Combining Geometries and Materials

In the previous sections, we've learned about the fundamental building blocks of 3D scenes in Three.js: geometries, which define the shape of an object, and materials, which define its appearance. Now, let's put them together to create visible, tangible objects in our virtual world. The Mesh object in Three.js is the key to this combination. A Mesh is essentially a combination of a Geometry and a Material. You can think of it as taking a raw geometric shape and then applying a specific finish or texture to it.

Here's how we typically create a Mesh. First, we instantiate a geometry object, for example, a BoxGeometry to create a cube. Then, we instantiate a material object, such as a MeshBasicMaterial for a simple, unshaded color. Finally, we pass these two objects to the THREE.Mesh constructor. This creates our 3D object, ready to be added to the scene.

It's important to understand that a single geometry can be used with multiple different materials to create variations of the same shape. Conversely, a single material can be applied to many different geometries. This modularity is a core principle that allows for efficient rendering and creative flexibility.

graph TD
    A[Geometry] --> C{Mesh}
    B[Material] --> C

When you create a THREE.Mesh, you are essentially creating a renderable object that Three.js knows how to draw. The Mesh object itself holds references to both its geometric data and its material properties. When the renderer processes the scene, it uses the geometry to determine the shape and the material to determine how that shape should be colored, shaded, and textured.

Let's look at another example, this time creating a sphere. We'll use SphereGeometry and a MeshLambertMaterial to demonstrate how different geometries and materials can be combined. MeshLambertMaterial is a step up from MeshBasicMaterial as it reacts to light, giving objects a more realistic appearance.