Skip to content

Instantly share code, notes, and snippets.

@GraemeFulton

GraemeFulton/Three.js---Star-field.markdown

Created April 26, 2015 18:03
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save GraemeFulton/22fc3fb72a14ce4711c2 to your computer and use it in GitHub Desktop.
Save GraemeFulton/22fc3fb72a14ce4711c2 to your computer and use it in GitHub Desktop.
Download ZIP
Three.js - Star field
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<title>Three.js starter tutorial</title>
<meta charset="utf-8">
</head>
<body style="margin:0px;">
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>
</body>
</html>
Raw
script.js
//Declare three.js variables
var camera, scene, renderer, stars=[];
//assign three.js objects to each variable
function init(){
//camera
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 5;
//scene
scene = new THREE.Scene();
//renderer
renderer = new THREE.WebGLRenderer();
//set the size of the renderer
renderer.setSize( window.innerWidth, window.innerHeight );
//add the renderer to the html document body
document.body.appendChild( renderer.domElement );
}
function addSphere(){
// The loop will move from z position of -1000 to z position 1000, adding a random particle at each position.
for ( var z= -1000; z < 1000; z+=20 ) {
// Make a sphere (exactly the same as before).
var geometry = new THREE.SphereGeometry(0.5, 32, 32)
var material = new THREE.MeshBasicMaterial( {color: 0xffffff} );
var sphere = new THREE.Mesh(geometry, material)
// This time we give the sphere random x and y positions between -500 and 500
sphere.position.x = Math.random() * 1000 - 500;
sphere.position.y = Math.random() * 1000 - 500;
// Then set the z position to where it is in the loop (distance of camera)
sphere.position.z = z;
// scale it up a bit
sphere.scale.x = sphere.scale.y = 2;
//add the sphere to the scene
scene.add( sphere );
//finally push it to the stars array
stars.push(sphere);
}
}
function animateStars() {
// loop through each star
for(var i=0; i<stars.length; i++) {
star = stars[i];
// and move it forward dependent on the mouseY position.
star.position.z += i/10;
// if the particle is too close move it to the back
if(star.position.z>1000) star.position.z-=2000;
}
}
function render() {
//get the frame
requestAnimationFrame( render );
//render the scene
renderer.render( scene, camera );
animateStars();
}
init();
addSphere();
render();
Raw
Three.js---Star-field.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment