Last active
January 5, 2018 16:56
-
-
Save duhaime/01b57075b79ad306220d752bccfe2375 to your computer and use it in GitHub Desktop.
Uniform spiral
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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