Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Polygonal modeling and Three.js – Part 4

Wednesday, April 9th, 2014 by Servage

shapesRENDER THE SCENE

We have everything we need for a basic scene, so all that’s left is to tell the renderer to run by creating a render loop. We’ll use requestAnimationFrame() to inform the browser of the upcoming animation, and then start the renderer with the scene we’ve created. Note that requestAnimationFrame() has limited support, so check out Paul Irish’s shim to make sure all of your users get the same experience.

var render = function () {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
};

render();

If you open this in your browser, you’ll see the ball in the middle of the canvas with the light reflecting off of it. At this point, play around with the properties to get a better idea of how small changes affect the scene.

Now that the scene is rendered, we can add a simple animation as a starting point. The render loop is already firing every animation frame, so all we have to do is set the speeds, and then we can view the animation right away.

var render = function () {
  requestAnimationFrame(render);
  sphere.position.x += 1; // Move along x-axis towards the right side of the screen
  sphere.position.y -= 1; // Move along y-axis towards the bottom of the screen
  sphere.rotation.x += .1; // Spin left to right on the x-axis
  sphere.rotation.y -= .1; // Spin top to bottom on the y-axis
  renderer.render(scene, camera);
};

render();

GIVING CONTROL TO THE USER

If you’re interested in Three.js for game creation, then you’ll want the user to be able to interact with the models on the screen. Map the commands like sphere.position.x +=1 to character-key codes, which will give the user control (in this case, by using the W, A, S and D keys to move). A simple switch statement will assign the key codes to the position changes. Combining position changes with the opposite rotation change will make the ball appear to roll (for example, position.y += 3 with position.x -= 0.2).

window.addEventListener('keydown', function(event) {
var key = event.which ? event.which : event.keyCode;

switch(key)
{
case 87:
sphere.position.y += 3;
sphere.rotation.x -= 0.2;
break;
case 65:
sphere.position.x -= 3;
sphere.rotation.y -= 0.2;
break;
case 83:
sphere.position.y -= 3;
sphere.rotation.x += 0.2;
break;
case 68:
sphere.position.x += 3;
sphere.rotation.y += 0.2;
break;
}

}, false);

If you want to also include the Stats.js library, then add it to your document with the following snippet:

var stats = new Stats();
stats.setMode(1);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild( stats.domElement );

setInterval( function () {
  stats.begin();
  stats.end();
}, 1000 / 60 );

Going back to the demo, you should have a rock that rolls in the direction of your key press, along with statistics running in the corner if you choose.

Conclusion

This article barely scratches the surface of the Three.js library, as you can see by reading through the documentation. Once you are comfortable with the API, experimenting with particles, mapping and more complicated meshes can yield incredible results.

If you want to better understand how to work in 3-D but don’t have access to Maya or 3ds Max, then Blender is available for free. If you would rather stay in the browser, a few sandbox apps were created in Three.js that will work for you. An editor can be found on the Three.js home page. An alternative is actually a featured project on the home page called ThreeFab and is currently in alpha.

Three.js is a gold mine for creating beautiful and complex Web experiments. Taking the extremely simple demonstration explained here and turning it into a mind-blowing experiment merely takes experimentation and the willingness to try new things. It doesn’t get much better than digging into this library and into WebGL to create something like this.

 

Polygonal modeling and Three.js – Part 4, 4.5 out of 5 based on 2 ratings
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.