Page 8: Objects and Primitives

We’ve seen how in three we create a scene and put objects in it. On this page, we consider what those objects are.

In three.js, almost everything is an Object3D. This class is the parent of almost everything. Even Scene objects are a special type of Object3D. The objects that we see, cameras, and lights are all types of Object3D. This uniformity is one of the nice things in three’s design: the Object3D class provides a lot of functionality.

Object3D objects can be built into hierarchies: any Object3D can be the parent of other objects. Three does not require special group objects, although there is a Group class (for making group objects that have no geometry themselves).

Visible Objects

I don’t have a good word for the “regular objects” (things that aren’t cameras or lights or other special things) that are the “stuff” we put in our world to look at.

In three, most objects are made as collections of triangles. Three’s terminology regarding this is somewhat confusing. In computer graphics, the term mesh is used to refer to a collection of related (usually connected) triangles. We’ll learn more about meshes in the future. For now, we’re focused on using them in three.

In three.js, a collection of triangles is called a Geometry, and a Mesh is an Object3D that contains a Geometry and a Material. In other words, a Mesh is a graphics object that contains a BufferGeometry.

The actual class name for a Geometry in three is BufferGeometry.

The Mesh is the closest thing to a “primitive” in three. Almost everything that we see in three will be a Mesh. Most of the built-in object types are built on top of Mesh. That is, they work by defining a set of triangles as a BufferGeometry.

Here are several “built-in” object types from three (thanks to Gemini for making the display):

Any one of these shapes can be created by creating a three object and adding it to a scene. If we look inside this program (I encourage you to do so), we can see that it has made a list of all the objects the program will create:

25
26
27
28
29
30
31
32
33
34
35
36
37
38

const geoData = [
    { name: 'Box', geo: new THREE.BoxGeometry(1, 1, 1) },
    { name: 'Sphere', geo: new THREE.SphereGeometry(0.7, 32, 32) },
    { name: 'Cylinder', geo: new THREE.CylinderGeometry(0.5, 0.5, 1, 32) },
    { name: 'Cone', geo: new THREE.ConeGeometry(0.6, 1, 32) },
    { name: 'Torus', geo: new THREE.TorusGeometry(0.5, 0.2, 16, 100) },
    { name: 'Knot', geo: new THREE.TorusKnotGeometry(0.4, 0.15, 100, 16) },
    { name: 'Dodeca', geo: new THREE.DodecahedronGeometry(0.7) },
    { name: 'Icosa', geo: new THREE.IcosahedronGeometry(0.7) },
    { name: 'Octa', geo: new THREE.OctahedronGeometry(0.7) },
    { name: 'Capsule', geo: new THREE.CapsuleGeometry(0.4, 0.6, 4, 16) },
    { name: 'Ring', geo: new THREE.RingGeometry(0.3, 0.7, 32) },
    { name: 'Plane', geo: new THREE.PlaneGeometry(1, 1) }
];

You can see that each kind of object is created by making a new instance.

The Geometry (the mesh, or collection of triangles) is defined when the object is created. Typically, this is done once when the object is created: to change the object or move it around, we transform it. Many of the three objects provide the ability to re-create their underlying geometry, so if you want to change a parameter (like the thickness of the Knot or the height of the Cone), you can rebuild the object. But in general, this is an expensive operation.

As a preview of things to come: the collection of triangles needs to be built into data structures that can be efficiently passed to the graphics hardware, and transferred to the hardware (so it is in the graphics memory). Therefore, we don’t want to change it often. This is true even if you want to make a small change to the collection of triangles.

Meshes

A three Mesh pairs a BufferGeometry with a Material.. You can think of this as: in order to have an object in the world, it needs to have a shape (as a collection of triangles), and it needs to have the “stuff” it is made out of in order to determine how it will appear.

A Mesh (and any object, like the built-in shapes) is a subclass (or kind) of Object3D. So all of the Object3D functionality is available. For example, each Object3D holds a transformation that relates it to its parent object. This also implies that any Object3D can have a parent object (so we can build a hierarchy).

Key Points

On this page we learned a bit about the geometric objects we can make in three.

1. We use Mesh objects that pair a BufferGeometry with a Material
2. We generally try to make the geometry (triangle collection) at the beginning and not change it.
3. Three’s built-in shapes are generally types of meshes - they just make their geometry at construction time.