Friday 25 October 2013

Welcome to Threejs


Continuing with my research into WebGL libraries this week I was looking at ThreeJs and recreating the same sample as in my previous example with BabylonJs.

With Threejs there are 2 ways to create your viewport.
  1. Is to dynamically create a canvas element, as above. This is how you can add you rendered seen in to a webpage as normal.
    *the size are there cameras is in pixels in the javascript source
  2. To feel the entire page
In this example I will be using the first approach, as the majority of examples you will find online references the fullscreen mode. To please the viewport on to the page, we first need a div where we want our viewport placed


Download the compressed version of the library at http://threejs.org/build/three.min.js and put it in the same folder as your files.




To help keep our code clean you will now create a "myCode.js". I hope you noticed that this file is the one referenced in the above section.

In side "myCode.js" we will add the following:
As we are rendering to a element on the page we need to define the width and height. These sizes are used to in the example to match the camera perspective with the rendered viewport.

var canvasWidth = 578, canvasHeight = 200;
var camera = new THREE.PerspectiveCamera(90, canvasWidth  / canvasHeight, 0.1, 1000);
    camera.position.z = 3;

Now we create a render and attach it to the viewport.

var renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(canvasWidth , canvasHeight);

var viewport= document.getElementById( 'renderCanvas' );
viewport.appendChild( renderer.domElement );

Now we create our 2 world objects

//THREE.TorusGeometry(radius, tube, segmentsR, segmentsT)
var torus = new THREE.TorusGeometry( 1.5, 0.35, 16, 32 );
// THREE.SphereGeometry(radius, segmentsWidth, segmentsHeight)
var sphere = new THREE.SphereGeometry( 0.3, 16, 16 );

We need to define a material to apply to our objects. Phong shading will give a nice shine.

var material = new THREE.MeshPhongMaterial({
        // light
        specular: '#ffffff',
        // intermediate
        color: '#ffffff',
        // dark
        emissive: '#000000',
        shininess: 100 
      });


 var torusMesh = new THREE.Mesh(torus, material);
 var sphereMesh = new THREE.Mesh(sphere, material);


Create a light sources in order to give the correct light and dark shading on the objects

var directionalLight = new THREE.DirectionalLight( 0xffffff, 1);
directionalLight.position.set( 0, 10, 10 ); 

let's create our scene and add the element to it.

 var scene = new THREE.Scene();
  scene.add(torusMesh);
  scene.add(sphereMesh);
  scene.add( directionalLight );

To add a bit of flavour let's animate the torus. This will be in the function that will be run every frame.

  var render = function () {
      requestAnimationFrame(render);
      torusMesh.rotation.x += 0.01;
      torusMesh.rotation.y += 0.015;
      renderer.render(scene, camera);
  };

let's start the animation.

render();

There you go done and dusted.
If you have any thoughts or feedback, let me know by leaving me a comment.
... continue reading!