A Green Cube

This version of the Green Cube has an animation that can be started and stopped:

• 0: stop animation loop
• 1: advance the animation by one frame
• 2: start the animation loop

This is a very simple scene, but it shows all the basic elements of a Three.js program:

• A scene object holds all the stuff in the scene; in this case, just a green cube.
• A camera object gives the renderer a viewpoint and perspective on the scene.
• A renderer, which uses the scene and camera to draw onto the canvas. The canvas is created by the renderer, but we add it to the page. In this version, we have set the canvas to be 600x200, and centered it. We also use these dimensions to configure the camera, otherwise the image will be distorted.
• We create some geometry and material, and we combine them to create a scene object.
• We create some functions to render the scene, update the scene (changing the rotations of the box), and start/stop an animation loop.
• Finally, we set up the keyboard callbacks, tying the numbers 0, 1 and 2 to stopping the animation, advancing it by one frame, and starting it.