Graphics Reference
In-Depth Information
1. Let's first look at how to use
requestAnimationFrame
for rendering. For
this, we've created a render function:
function render() {
renderer.render(scene, camera);
scene.getObjectByName('cube').rotation.x
+= 0.05;
requestAnimationFrame(render);
}
As you can see, we pass the render function as an argument to request a
frame for animation. This will cause the
render
function to be called at a
regular interval. In the
render
function, we will also update the rotation of
the
x
axis of the cube to show you that the scene is re-rendered.
2. To use this function in the recipes, which we saw at the beginning of this
chapter, we just have to replace this call:
function init() {
...
// call the render function
renderer.render(scene, camera);
}
With the following:
function init() {
...
// call the render function
render();
}
3. You will now have your own animation loop, so any changes made to your
model, camera, or other objects in the scene can now be done from within
the
render()
function.
