A PlanarFe Adventure

LearnLoveCode

3Dify Yourself: Three.js

Three.js is a Javascript library designed to be used to render 3D objects and animations in the browser using WebGL. It allows you to create animations without relying on proprietary plugins using the end-users GPU and as well as providing a bunch of classes and functions to let you skip a whole bunch of programming and move straight to the animating.

It breaks down into four basic components:

  • A Scene 
    1
2

        var scene = new THREE.Scene();
  • A Camera 
    1
2
3

        var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.5, 1000 );
    camera.position.z = 2;
  • A Renderer 
    1
2
3
4
5

        var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    renderer.setClearColor( 0xffffff, 1);
  • One or more geometric objects 
    1
2
3
4
5

          var geometry = new THREE.BoxGeometry(0.25, 0.25, 0.25 );
      var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
      var cube = new THREE.Mesh( geometry, material );
      scene.add( cube );
  • A Render function 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

          var render = function () {requestAnimationFrame( render );

        if($direction === 1){
          if($counter < 50){cube.position.y += 0.03; $counter++}
          else{$direction = 0; $counter = 0}
        }
        else {
          if($counter < 50){cube.position.y -= 0.03; $counter++}
          else{$direction = 1; $counter = 0}
        }

        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;

        renderer.render(scene, camera);
      };

The scene, camera, and geometry are pretty self explanatory (though you try putting together some advanced geometries if you think it’s so easy!). The renderer does all the heavy lifting to display your magnificent creation, but the fun happens in the render function. This is where your talent and skill come into play on the game grid you master of space and motion, you. Within the render function is where you can do things like move, rotate, and deform objects. Go on, get crazy with your bad self! The documentation is a bit cumbersome to traverse but given more time an effort than I feel like putting into this right now you can create some pretty impressive stuff. Like this:

Here’s the quick animation that I played with. It’s basically the code from the Three.js ‘Getting Started’ but I tweaked a couple different things until I got tired and settled on a bouncing cube.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

    <html>
      <head>
        <title>My first Three.js app</title>
        <style>
          body { margin: 0; }
          canvas { width: 100%; height: 100% }
        </style>
      </head>
      <body>
        <script src="js/three.min.js"></script>
        <script>
          var scene = new THREE.Scene();
          var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.5, 1000 );

          var renderer = new THREE.WebGLRenderer();
          renderer.setSize( window.innerWidth, window.innerHeight );
          document.body.appendChild( renderer.domElement );
          renderer.setClearColor( 0xffffff, 1);

          var geometry = new THREE.BoxGeometry(0.25, 0.25, 0.25 );
          var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
          var cube = new THREE.Mesh( geometry, material );
          scene.add( cube );

          camera.position.z = 2;

          var $direction = 1;
          var $counter = 0;


          var render = function () {
            requestAnimationFrame( render );


            if($direction === 1){
              if($counter < 50){cube.position.y += 0.03; $counter++}
              else{$direction = 0; $counter = 0}
            }
            else {
              if($counter < 50){cube.position.y -= 0.03; $counter++}
              else{$direction = 1; $counter = 0}
            }

            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;

            renderer.render(scene, camera);
          };

          render();
        </script>
      </body>
    </html>

The animation may be simple but that isn’t much code for a rendered scene.