Three.js gives you the ability to create 3D animations in the browser while doing all the heavy lifting of WebGL for you.

Scene, Camera, Renderer

Scene is where you add objects, cameras, lights.

Camera clips the scene and gives objects depth just like a real camera.

Renderer allows you to render your scene in either WebGL or Canvas 2D.

Create a three.js project

<!doctype html>
<html>
<head></head>

<body>
  <!--Load three.js-->
  <script src="http://threejs.org/build/three.min.js"></script>

  <script>
    // code in here
  </script>
</body>
</html>

Create the scene, perspective camera (camera that makes far objects appear small and close objects big), and renderer:

<script>
  var scene    = new THREE.Scene();
  var camera   = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
  var renderer = new THREE.WebGLRenderer();
</script>

Set the canvas size using renderer.setSize() and then render the scene 60 times per second using a background color of #3399ff:

<script>
  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/2, window.innerHeight/2);
  renderer.setClearColor(0x3399ff);
  document.body.appendChild(renderer.domElement);

  function render(){
    requestAnimationFrame(render);
    renderer.render(scene, camera);
  }
  render();
</script>

Add meshes with lights

A mesh consists of a geometry and material. Three.js comes with primitive geometries such as cubes, cones, and more. Materials describe the appearance of geometries.

We’ll create a spinning box geometry with a lambert material of color #f6546a and a white point light:

<script>
  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/2, window.innerHeight/2);
  renderer.setClearColor(0x3399ff);
  document.body.appendChild(renderer.domElement);

  // (width, height, depth)
  var geometry = new THREE.BoxGeometry(5, 5, 5);
  var material = new THREE.MeshLambertMaterial({color: 0xf6546a}) 
  var mesh = new THREE.Mesh(geometry, material)
  scene.add(mesh);

  // (color, intensity)
  var light = new THREE.PointLight(0xffffff, 1.2);
  // (x, y, z)
  light.position.set(0, 0, 6);
  scene.add(light);

  // move the camera back
  camera.position.z = 10;

  function render(){
    requestAnimationFrame(render);
    mesh.rotation.x += 0.1;
    mesh.rotation.y += 0.1;
    renderer.render(scene, camera);
  }
  render();
</script>

Textures

You can apply textures as the material instead:

<script>
  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/2, window.innerHeight/2);
  renderer.setClearColor(0x3399ff);
  document.body.appendChild(renderer.domElement);

  var geometry = new THREE.BoxGeometry(5, 5, 5);

  var loader = new THREE.TextureLoader();
  // URL of texture
  loader.load("/images/boxtexture.jpg", function(texture){
    var material = new THREE.MeshLambertMaterial({map: texture});
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
  });

  var light = new THREE.PointLight(0xffffff, 1.2);

  light.position.set(0, 0, 6);
  scene.add(light);

  camera.position.z = 10;

  function render(){
    requestAnimationFrame(render);
    mesh.rotation.x += 0.1;
    mesh.rotation.y += 0.1;
    renderer.render(scene, camera);
  }
  render();
</script>

3D Blender Models

Instead of using three.js’s primative shapes we can use a modeling program such as Blender to export 3d models as .json

You must have this addon in order to export blender models as .json

Open up blender and create a monkey model by clicking on create > Monkey. Delete the default cube by right clicking on it and hitting delete:

Monkey blender

Let’s add a material to the model by right clicking on the monkey and on the right side selecting material:

Blender Monkey Material

Apply a new material by clicking New and selecting a color with a lambert shader:

Blender New Shader

Export the model as .json:

File > Export > Three.js

On the left under shading check Face Materials

Export it and rename the extension from .json to .js

Blender export .json

Load the object

<script>
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/2, window.innerHeight/2);
renderer.setClearColor(0x3399ff);
document.body.appendChild(renderer3.domElement);

var light = new THREE.PointLight(0xffffff, 1.2);
scene.add(light);
light.position.set(0, 3, 3);

// Load the object 
var loader = new THREE.JSONLoader().load("/js/monkey.js", function(geometry, materials){
  var material = new THREE.MultiMaterial(materials);
  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
});

camera.position.z = 2;

function render(){
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
render();
</script>


And that’s the basics of Three.js, thanks for reading!