Skip to content

Instantly share code, notes, and snippets.

@duhaime
Last active January 5, 2018 16:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save duhaime/01b57075b79ad306220d752bccfe2375 to your computer and use it in GitHub Desktop.
Save duhaime/01b57075b79ad306220d752bccfe2375 to your computer and use it in GitHub Desktop.
Uniform spiral
<html>
<head>
<style>
html, body { width: 100%; height: 100%; background: #000; }
body { margin: 0; overflow: hidden; }
canvas { width: 100%; height: 100%; }
</style>
</head>
<body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js'></script>
<script src='https://threejs.org/examples/js/controls/TrackballControls.js'></script>
<script>
/**
* Generate a scene object with a background color
**/
function getScene() {
var scene = new THREE.Scene();
scene.background = new THREE.Color(0x111111);
return scene;
}
/**
* Generate the camera to be used in the scene. Camera args:
* [0] field of view: identifies the portion of the scene
* visible at any time (in degrees)
* [1] aspect ratio: identifies the aspect ratio of the
* scene in width/height
* [2] near clipping plane: objects closer than the near
* clipping plane are culled from the scene
* [3] far clipping plane: objects farther than the far
* clipping plane are culled from the scene
**/
function getCamera() {
var aspectRatio = window.innerWidth / window.innerHeight;
var camera = new THREE.PerspectiveCamera(75, aspectRatio, 0.1, 100000);
camera.position.set(0, 0, -2);
return camera;
}
/**
* Generate the light to be used in the scene. Light args:
* [0]: Hexadecimal color of the light
* [1]: Numeric value of the light's strength/intensity
* [2]: The distance from the light where the intensity is *
* @param {obj} scene: the current scene object
**/
function getLight(scene) {
var light = new THREE.PointLight(0xffffff, 1, 0);
light.position.set(1, 1, 1);
scene.add(light);
var ambientLight = new THREE.AmbientLight(0x111111);
scene.add(ambientLight);
return light;
}
/**
* Generate the renderer to be used in the scene
**/
function getRenderer() {
// Create the canvas with a renderer
var renderer = new THREE.WebGLRenderer({antialias: true});
// Add support for retina displays
renderer.setPixelRatio(window.devicePixelRatio);
// Specify the size of the canvas
renderer.setSize(window.innerWidth, window.innerHeight);
// Add the canvas to the DOM
document.body.appendChild(renderer.domElement);
return renderer;
}
/**
* Generate the controls to be used in the scene
* @param {obj} camera: the three.js camera for the scene
* @param {obj} renderer: the three.js renderer for the scene
**/
function getControls(camera, renderer) {
var controls = new THREE.TrackballControls(camera, renderer.domElement);
controls.zoomSpeed = 0.4;
controls.panSpeed = 0.4;
return controls;
}
/**
* Generate the material for the scene
* @param {obj} scene: the current scene object
**/
function addMaterial(scene) {
var geometry = new THREE.Geometry();
var material = new THREE.PointsMaterial({
size: .1,
vertexColors: THREE.VertexColors
});
for (var i=0; i < 10000; i ++) {
var position = new THREE.Vector3();
position.x = 5 * Math.sin(i);
position.y = 5 * Math.cos(i);
position.z = i/100;
geometry.vertices.push(position);
var color = 'rgb(' + Math.floor(i/10000 * 255) + ',0,255)';
geometry.colors[i] = new THREE.Color(color);
}
var mesh = new THREE.Points(geometry, material);
scene.add(mesh);
return mesh;
}
// Render loop
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
controls.update();
mesh.rotation.z -= 0.001;
};
var scene = getScene();
var camera = getCamera();
var light = getLight(scene);
var renderer = getRenderer();
var controls = getControls(camera, renderer);
mesh = addMaterial(scene);
render();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment