Animation and Rendering
Animation and Rendering :
A couple of simple steps at the end of a 'longish' tutorial. We need to animate our cube and render it so it becomes visible.
Animation of our cube is quite simple. We simply build a render loop and place our animation sequence within this loop.
At this point it is probably easier to show you this code all together and step through it.
var render = function () {
requestAnimationFrame( render );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
render();
In the above we start of by declaring a function called 'render'. The first line in this function declaration is 'requestAnimationFrame(render);' .
Strictly this is not three.js but rather an animation format first proposed by Mozilla (not 100% sure about this) and is now a staple across most browsers. You can see by the callback (the word 'render' in brackets) that the function is calling itself - effectively a loop.
There are some advantages with using requestAnimationFrame as compared to other looping types such as 'setInterval' or 'setTimeout' chiefly that the animation is mostly paused when not visible saving CPU cycles and battery life in mobile devices.
Next you will see our animation. The code 'cube.rotation.x' rotates the cube in the x plane 0.01 radians every time the loop runs (60 times per second). This is cloned for the y axis as well.
The next line 'renderer.render' takes the objects - scene and camera - that we created earlier and renders them to the canvas every time the loop is run.
Finally after the function has been declared it is then called with 'render();' running your animation loop.
The complete code is shown here. Note that in this final code, a second light source has been inserted into the code to make the animation stand out a bit better from the background.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Three.js Tutorial</title>
<script
src="https://ajax.googleapis.com/ajax/libs/threejs/r76/three.min.js">
</script>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera
( 40,( window.innerWidth)/(window.innerHeight), 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var light = new THREE.PointLight(0xffffff);
light.position.set(-100,200,100);
scene.add(light);
var light2 = new THREE.PointLight(0xffffdd);
light2.position.set(100,-2000,-100);
scene.add(light2);
var geometry = new THREE.BoxGeometry( 4,4,4 );
var material = new THREE.MeshLambertMaterial({color:0x009900});
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 30;
var render = function () {
requestAnimationFrame( render );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
render();
</script>
</body>
</html>
That's it.
At this point, on opening your Tutorial in a browser you should be viewing your animation similar to that at the top of this page.
Told you it was easy!.
I encourage you to experiment with the code to get a good feel of what is going on - although this is a simple animation, relatively minor changes using this code as a foundation can yield very impressive results very quickly.
All the animations displayed in this tutorial in fact only differ by a handful of code lines and in some - the bitmap files used in the mesh.
You can view the code with all its warts using developer tools in your browser and time permitting I shall list the relevant code with the animations so as to make it quite easy to look at.
