Helper objects and util functions

Before we move on to the next chapter, we’re going to quickly introduce a couple of helper functions and objects. These helpers make it easier to position objects and see what is happening in a scene. The easiest way to see this in action is to open the chapter-01/porsche.html example in your browser:

Figure 1.15 – Porsche example with helper

On the right-hand side of the screen, at the bottom of the menu, you will see three buttons in the controls: Toggle AxesHelper, Toggle GridHelper, and Toggle PolarGridHelper. When you click on any of them, Three.js will add an overlay to the screen that can help you orient and position meshes, determine needed rotations, and check the sizes of your objects. For instance, when we toggle AxesHelper, we will see the x-, y-, and z-axes in the scene:

Figure 1.16 – Porsche example with AxesHelper enabled

Note that in this example, you can see a more extensive control UI, where you can also control various aspects of WebGLRenderer.