Skip to main content

Postscript

You now have a foundation to start building some creative code projects in three.js, and you've had a chance to see a simple demo of how to use that foundation. The amount of code you've produced may seem small, but you've learned some core concepts of 3D scenes and animation and then put those concepts to use with three.js.

In the next module, you'll build on this foundation by adding a number of objects to the scene and animating them as a group.

Optional exercises​

If you'd like to experiment with the demo before moving on to the next module, here are some things to try. Once you're done experimenting, be sure to restore your code to its previous state before moving on to the next module. If you're unsure what you may have changed, you can get your code back to the tutorial state by copying it from this module's checkpoint.

  • Pick one of the lights and try changing some of its properties. For example, change its color or position. Experiment with one light at a time so that you can see how changing one affects the scene.
  • In the demo's update function, change the rotation speeds to be different values. Observe how this affects the cube's behavior.
  • Change the value of MILLISECONDS_PER_FRAME to a different value such as 1000 / 30 or 1000 / 120. What changes do you notice?
  • In the demo code, replace THREE.BoxGeometry() with THREE.DodecahedronGeometry(). What differences, if any, do you notice in how the light and shadows interact with this shape?

Additional resources​