Lesson 4 - Let's Get Moving!

 

Introduction

Now that we have covered creating and coloring polygons, let's add some animation. Most of the source code is identical boilerplate to the second and third lessons so this lesson is also quite short.

Again, we instantiate a scene and call initializeScene()where all the work gets done. Similarly, the creation of the triangle and the square is identical to the third lesson.

The key difference in this lesson is that we don't call renderScene() directly. Instead, we call animateScene() which invokes a special behaviour in the browser that repeatedly calls a callback function, which in turn calls renderScene().

In the function, we first increase the y rotation of the triangle mesh and decrease the x rotation of the square mesh.

triangleMesh.rotation.y += 0.1;
squareMesh.rotation.x -= 0.075;

The Animation

Then we call a browser function, requestAnimationFrame.  That method tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. The method takes as an argument a callback to be invoked before the repaint. In our case, the callback function we pass in is animateScene. Note that if the container (i.e. the browser window) is not visible, the animation is paused.

requestAnimationFrame(animateScene);

Note also that our callback function effectively calls requestAnimationFrame() every time it is invoked - which is required - it's not a fire and forget sort of call.

Finally, we actually call renderScene() which then maps the 3D scene down to the 2D screen, just like the previous lessons

renderScene();

And that's it! Click on this link to see the actual rendered demo in all it's rainbow glory!



About Us | Contact Us | ©2017 Geo-F/X