The Components of a Real-Time 3D App

The Components of a Real-Time 3D App

Every three.js app (in fact, nearly every real-time 3D app) will have the following basic components:

  • a Scene – this is a holder for everything else. You can think of it as a “tiny universe” in which all your 3D objects live.
  • a Camera – this is directly equivalent to the concept of a camera in the real world, and you’ll use this to view your scene.
  •  a canvas – this is an HTML canvas element, and just like a canvas in the real world, it starts out as a blank rectangle, just waiting to hold your beautiful creations!
  • a Renderer – this is a machine that takes a Camera and a Scene as input and outputs beautiful drawings (or renderings) onto your canvas.

Together, the Scene, Camera, canvas, and Renderer give us the scaffolding of an app, however, none of them can actually be seen. We’ll also need to add some kind of visible object, and in this chapter, we’ll add a simple box-shaped Mesh, which has three components.

  • a Mesh – this is just a holder for a Geometry and a Material and defines the position in 3D space. We can add this to our Scene.
  • a Geometry – this defines the shape of our Mesh.
  • a Material – and this defines the way that the surface of the Mesh looks.