Skip to main content

Postscript

In this module, you added objects to your scene and then animated them together as a group. You also got a glimpse of vectors, meshes, and materials.

The next module will cover adding behavior to the grid cells you created in this module. The more abstract notion of state will also be introduced.

Optional exercises​

If you would 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 are unsure what you have changed, you can get your code back to the tutorial state by copying it from this module's checkpoint.

  • Try different values for GRID_SIZE. Remember that this value must be an integer. Be aware that as you increase this value, there will be a point where the animation noticeably slows down and may even cause your browser to crash.

  • The buildCellVisual function only creates cubes. Change the function so that it creates a shape other than a cube. For example, try creating tetrahedrons instead (using THREE.TetrahedronGeometry).

  • The update function used in this module rotates the grid on the y-axis. Add a line to the function so that the grid also rotates on the x-axis. How does this affect the overall scene? What happens if you go a step further and also rotate it on the z-axis?

  • What if the shape of each cell was determined randomly? Modify the buildCellVisual function so that it creates a random shape each time it is called. Limit the possible random shapes to THREE.BoxGeometry, THREE.ConeGeometry and THREE.SphereGeometry.

  • Consider the logic that determines where to place the camera:

    camera.position.set(0, 0, GRID_SIZE * (MAX_CELL_SIZE + CELL_SPACING));

    How might you modify the setUpLights function so that the position of the lights is determined by the size of your rotating grid? What happens if you accidentally place one of your lights inside the grid? This is an advanced exercise.

Additional resources​