Let's take a look at the three core elements that make up a 3D Object in Three.js: Geometry, Materials, and Mesh.

What is Geometry?

Geometry is the set of vertices, faces, and lines that define the shape of a 3D object. in simple terms, think of it as the "skeleton" of a 3D object. consider the example code below

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

// coordinates of the vertices of the triangle
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 buffer attributes to the geometry
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));

basic Geometry Types

Three.js provides a Geometry class that allows you to create a variety of basic shapes.

// Boxes
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);

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

What are Materials?

Materials define the appearance of a 3D object. it contains all the visual properties that determine how an object looks, such as color, transparency, and texture. we use the following key properties

const material = new THREE.MeshStandardMaterial({
    // Basic properties
    transparent: true, // whether to use transparency
    opacity: 0.5, // opacity (0.0 to 1.0)
    side: THREE.DoubleSide, // render double-sided
    visible: true, // Visible
    wireframe: false, // wireframe mode

    // color related
    color: 0xff0000, // default color
    emissive: 0x000000, // self-emissive color

    // and so on...
});

the main Material types and their features

1. MeshBasicMaterial

this is the simplest Material and is not affected by lighting. it performs well and is suitable for simple applications. it is the fastest to render because there are no lighting calculations.

2. MeshStandardMaterial

a Material that uses physically based rendering (PBR). PBR simulates the interaction of light based on real-world physics to produce very realistic results. As a result, it is more computationally expensive to render than other Materials.2

3. MeshPhongMaterial

The MeshPhongMaterial is a great Material for representing glossy surfaces. It uses the Phong shading model to calculate highlights and reflections, and is often used to represent Materials such as 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

Material uses a variety of Maps to make the appearance of objects more realistic and rich. Maps provide a way to map textures to the surface of a 3D object, and each map is used to control different visual characteristics.

1. map

a map that applies a 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 to represent the details of the surface.

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

const material = new THREE.MeshStandardMaterial({
    normalMap: normalTexture,
    normalScale: new THREE.Vector2(1, 1) // adjust the strength of the normal map
});

3. roughnessMap

a map that controls the roughness of the surface. It is used by MeshStandardMaterial.

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

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

Mesh

now, the object that combines the Geometry, which acts as the skeleton, and the Material, which defines the appearance, is the Mesh. Mesh is a class that inherits from Object3D in Three.js and creates an object 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);

Properties and Methods of Mesh

position

// Set the position
mesh.position.set(x, y, z);
// or
mesh.position.x = 1;
mesh.position.y = 2;
mesh.position.z = 3;

rotation

// Set the position
mesh.position.set(x, y, z);
// or
mesh.position.x = 1;
mesh.position.y = 2;
mesh.position.z = 3;

scale

// Set the scale
mesh.scale.set(x, y, z);
// or
mesh.scale.x = 2; // 2x along the x-axis
mesh.scale.y = 0.5; // Scale by 0.5 on the y-axis
mesh.scale.z = 1; // no change on the z-axis

wrapping Up

We've covered the core components of Three.js. We used Geometry to define the shape of our 3D objects, Material to express the visual characteristics of our objects, and Mesh to combine the two to create 3D objects that are rendered on the screen.

in this article, we've covered the core concepts with some basic examples, but Three.js is much more versatile and powerful than this, and you'll want to explore it further in the future.

also, due to the nature of 3D graphics, more complex objects require more computing resources. so, in a real project, you'll want to keep the following in mind (or else it'll blow up on mobile...)

• maintaining a reasonable polygon count
• freeing up memory for unnecessary objects

🔎 References

• Three.js Docs