DailyJS

three.js: a JavaScript 3D Engine

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

graphics canvas 3d

three.js: a JavaScript 3D Engine

Posted by Alex R. Young on .
Featured

graphics canvas 3d

three.js: a JavaScript 3D Engine

Posted by Alex R. Young on .

three.js is a 3D JavaScript engine written by mrdoob that uses canvas and svg. 3D
scenes can be built using a camera, lines, mesh, and particles. The
author has written some excellent demos:

Code looks like this:

var camera, scene, renderer;

init();
setInterval(loop, 1000 / 60);

function init() {
  camera = new THREE.Camera(0, 0, 1000);
  scene = new THREE.Scene();
  renderer = new THREE.CanvasRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);

  for (var i = 0; i < 1000; i++) {
    var particle = new THREE.Particle(new THREE.ColorFillMaterial(Math.random() * 0x808008 + 0x808080, 1));
    particle.size = Math.random() * 10 + 5;
    particle.position.x = Math.random() * 2000 - 1000;
    particle.position.y = Math.random() * 2000 - 1000;
    particle.position.z = Math.random() * 2000 - 1000;
    particle.updateMatrix();
    scene.add(particle);
  }

  document.body.appendChild(renderer.domElement);
}

function loop() {
  renderer.render(scene, camera);
}

Notice the use of the render loop, set to approximately 60fps.

This is a very tightly focused library, which means it's a good
alternative to using something larger like
Processing.js if you just want to create 3D graphics. The author notes that performance on devices like the iPhone
isn't great, but you could still have some fun with it.

I also noticed that the same author has an interesting JavaScript
performance monitor called
stats.js. It displays a graph showing frames per second for your scripts.