Create the Universe in Three.js

Three.js is a JavaScript library that uses HTML5 canvas and WebGL to render 3D graphics on a web browser. It is well-documented and has a very intuitive API.  I am going to walk through the steps of creating the universe in Three.js (or just 10000 cubes floating in 3D space).

<!DOCTYPE html>
<html>
  <head>
    <title>Three Test</title>
   <style>
     body {
       background-color: black;
       overflow: hidden;
     }
   </style>
   <script src='http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js'></script>
   <script src='./bower_components/jquery/dist/jquery.min.js'></script>
  </head>
   <body>
   </body>
   <script src='./main.js'></script>
</html>

You will first need to create a index.html page like the one above, as well as a main.js file in the same folder.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75,window.innerWidth/ window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

In your main.js file, you will need to instantiate a scene, camera, and renderer like the example above. A scene represents the 3D space where your objects will live in. A camera represents the point-of-view in which you are looking at your scene. A renderer  represents the canvas element that is appended to your DOM.

var directionalLight = new THREE.DirectionalLight(0xffffff,1);
directionalLight.position.set(7,5,-5);
scene.add(directionalLight);

You can make your scene more interesting by adding directional lighting.  It is as simple as instantiating a directional light object, and adding it to you scene.

var geometry = new THREE.BoxGeometry(1,1,1);
var material = new THREE.MeshLambertMaterial({color: 0xffffff});

To prepare ourselves for creating cubes, we will need to instantiate a geometry object to indicate that we will be using a unit cube, and a material object to indicate that we will be using lambert material.

var cubes = [];

for (var i = 0; i < 10000 ; i++) {
 var rx = Math.random()*2000-1000;
 var ry = Math.random()*1000-500;
 var rz = Math.random()*10000-5000;
 cubes[i] = new THREE.Mesh(geometry,material);

 cubes[i].position.x = rx;
 cubes[i].position.y = ry;
 cubes[i].position.z = rz;
 scene.add(cubes[i]);
};

Now here is the fun part. We are going to create 10000 cube in random places using the for..loop above, and add them to our scene.

camera.position.z = 20;
camera.position.x = 0;
camera.position.y = 0;

We are almost there! Before we render, we will need to position our camera.

//Render Loop
function render() {
 requestAnimationFrame(render);
 camera.position.z -= 5;
 for(var i = 0; i < cubes.length; i++){
 cubes[i].rotation.x += 0.05; 
 cubes[i].rotation.y += 0.05;
 }

 renderer.render(scene,camera);
}


render();

Finally, we use the render function above to render the scene. The render function will be invoked about 30 times per second for smooth animation. You will see from the example above that for every iteration, I am rotating each of the 10000 cubes by 0.05 degrees.

Have fun hacking!