[Three.js] Geometry, Materials, Mesh

Let's explore the three core elements that make up 3D objects in Three.js: Geometry, Materials, and Mesh.

What is Geometry?

Geometry defines the shape of a 3D object through a collection of vertices, faces, and lines. Simply put, you can think of it as the 'skeleton' of a 3D object. Let's look at the example code below.

// Creating a custom triangle
const geometry = new THREE.BufferGeometry();

// Triangle vertex coordinates
const vertices = new Float32Array([
    -1.0, -1.0, 0.0,  // v0
     1.0, -1.0, 0.0,  // v1
     0.0,  1.0, 0.0   // v2
]);

// Assign to geometry as buffer attribute
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));

This way, you can render on screen by passing data in Matrix form. More options related to this can be found in the official documentation link.

Basic Geometry Types

Three.js provides various Geometry classes for creating basic shapes.

// Box
const boxGeometry = new THREE.BoxGeometry(width, height, depth);

// Sphere
const sphereGeometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments);

// Plane
const planeGeometry = new THREE.PlaneGeometry(width, height);

// Cylinder
const cylinderGeometry = new THREE.CylinderGeometry(radiusTop, radiusBottom, height);

// Cone
const coneGeometry = new THREE.ConeGeometry(radius, height);

// Torus (donut shape)
const torusGeometry = new THREE.TorusGeometry(radius, tube, radialSegments);

What are Materials?

Material defines the appearance of a 3D object. It includes all visual properties that determine how an object will look, such as color, transparency, texture, etc. It uses the following key properties.

const material = new THREE.MeshStandardMaterial({
    // Basic properties
    transparent: true,     // Whether to use transparency
    opacity: 0.5,         // Opacity (0.0 ~ 1.0)
    side: THREE.DoubleSide, // Double-sided rendering
    visible: true,        // Visibility
    wireframe: false,     // Wireframe mode

    // Color related
    color: 0xff0000,      // Base color
    emissive: 0x000000,   // Self-illumination color

    // And more...
});

Main Material Types and Characteristics

1. MeshBasicMaterial

The simplest Material, not affected by lighting. Good performance and suitable for simple uses. It can render the fastest because there are no lighting calculations.

2. MeshStandardMaterial

A Material that uses physically based rendering (PBR). PBR simulates light interactions based on actual physical laws to produce very realistic results. Therefore, it requires more computational cost for rendering than other Materials.

3. MeshPhongMaterial

MeshPhongMaterial is suitable for representing glossy surfaces. It uses the Phong shading model to calculate highlights and reflections, and is often used to represent materials like plastic or ceramics.

new THREE.MeshBasicMaterial({
  color: color,
  side: THREE.DoubleSide,
});
new THREE.MeshStandardMaterial({
  color: color,
  roughness: 0.5,
  metalness: 0.5,
  side: THREE.DoubleSide,
}),
new THREE.MeshPhongMaterial({
  color: color,
  shininess: 60,
  specular: 0x444444,
  side: THREE.DoubleSide,
}),

Basic Concepts and Types of Maps

Materials can use various Maps to make the appearance of objects more realistic and rich. Maps provide a way to map textures onto the surface of 3D objects, and each Map is used to control different visual characteristics.

1. map

A map that applies basic color texture.

const textureLoader = new THREE.TextureLoader();
const colorTexture = textureLoader.load('hangyodon.avif');

const material = new THREE.MeshStandardMaterial({
    map: colorTexture
});

2. normalMap

A map that represents surface details.

const normalTexture = textureLoader.load('hangyodon.avif');

const material = new THREE.MeshStandardMaterial({
    normalMap: normalTexture,
    normalScale: new THREE.Vector2(1, 1)  // Adjust normal map intensity
});

3. roughnessMap

A map that controls surface roughness. Used with MeshStandardMaterial.

const roughnessTexture = textureLoader.load('hangyodon.avif');

const material = new THREE.MeshStandardMaterial({
    roughnessMap: roughnessTexture,
    roughness: 1.0  // Default roughness value
});

Mesh

Now, Mesh is the object that combines Geometry, which acts as the skeleton, and Material, which defines the appearance. Mesh is a class that inherits from Object3D in Three.js and creates objects that can be rendered in 3D space.

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Mesh Properties and Methods

Position

// Setting position
mesh.position.set(x, y, z);
// Or
mesh.position.x = 1;
mesh.position.y = 2;
mesh.position.z = 3;

Rotation

// Setting position
mesh.position.set(x, y, z);
// Or
mesh.position.x = 1;
mesh.position.y = 2;
mesh.position.z = 3;

Scale

// Setting scale
mesh.scale.set(x, y, z);
// Or
mesh.scale.x = 2;  // 2x on X-axis
mesh.scale.y = 0.5; // 0.5x on Y-axis
mesh.scale.z = 1;   // No change on Z-axis

Conclusion

We've looked at the core components of Three.js. We can define the shape of 3D objects with Geometry, express their visual characteristics with Material, and create 3D objects that are actually rendered on screen through Mesh, which combines the two.

In this article, we've examined the core concepts through basic examples, but Three.js provides much more diverse and powerful features that would be good to explore in more detail later.

Also, due to the nature of 3D graphics, more computing resources are needed as objects become more complex. Therefore, in actual projects, you should pay attention to the following items! (Otherwise, it often crashes on mobile...)

• Maintain appropriate polygon count
• Free memory of unnecessary objects

References

• Three.js Docs