Mesh and object creation

Back to Modules

Mesh and object creation

In Three.js, creating 3D objects, often referred to as "meshes," involves combining two fundamental components: Geometry and Material. These are then used to construct a Mesh object, which is a type of Object3D.

Object3D: The Foundation

Object3D is the base class for almost all objects in Three.js, including meshes, cameras, lights, and groups. It provides properties and methods for manipulating objects in 3D space, such as position, rotation, and scale.

Geometry: Defining the Shape

Geometry defines the shape and structure of a 3D object. It's essentially a collection of vertices (points in space) and faces (surfaces connecting those vertices). Three.js provides a variety of built-in geometries for common shapes, such as:

When creating geometries, it's a best practice to use BufferGeometry (e.g., BoxBufferGeometry instead of BoxGeometry) as it's more memory-efficient and faster.

Material: Defining the Appearance

Material determines how the surface of a 3D object looks and how it interacts with light. It manages properties like color, texture, transparency, and shininess. Three.js offers various material types, each with different characteristics:

You can apply textures to materials to add more detail and realism to your objects.

Mesh: Combining Geometry and Material

A Mesh object is created by combining a Geometry and a Material. It represents the actual 3D object that will be rendered in your scene.

Example: Creating a Simple Cube

Here's a simple example of creating a cube mesh:

import * as THREE from 'three';

// 1. Create Geometry
const geometry = new THREE.BoxGeometry(1, 1, 1); // A cube with dimensions 1x1x1

// 2. Create Material
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // A green basic material

// 3. Create Mesh
const cube = new THREE.Mesh(geometry, material);

// Add the cube to your scene (assuming you have a scene set up)
// scene.add(cube);

Best Practices for Object Creation: