Skip to main content

Three.js Geometries and Materials Tutorial

Three.js provides a wide variety of geometries and materials that allow you to create complex 3D shapes and give them visual properties. This tutorial will guide you through the different types of geometries and materials available in Three.js and how to use them in your projects.

1. Introduction to Geometries​

In Three.js, geometries define the shape of 3D objects. There are several built-in geometries, and you can also create custom geometries if needed.

Common Built-in Geometries​

  • BoxGeometry: A cube or rectangular prism.
  • SphereGeometry: A sphere.
  • PlaneGeometry: A flat surface or plane.
  • CylinderGeometry: A cylinder.
  • TorusGeometry: A torus (donut shape).

Example: Creating a Box Geometry​

const geometry = new THREE.BoxGeometry(1, 1, 1); // Width, Height, Depth
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // Green color
const cube = new THREE.Mesh(geometry, material); // Create a mesh
scene.add(cube); // Add the mesh to the scene

2. Creating Custom Geometries​

You can create custom geometries by defining vertices, faces, and other attributes manually.

Example: Creating a Custom Geometry​

const customGeometry = new THREE.Geometry();
customGeometry.vertices.push(
    new THREE.Vector3(-1, -1, 0),
    new THREE.Vector3(1, -1, 0),
    new THREE.Vector3(1, 1, 0),
    new THREE.Vector3(-1, 1, 0)
);

// Define faces using the vertices
customGeometry.faces.push(new THREE.Face3(0, 1, 2));
customGeometry.faces.push(new THREE.Face3(0, 2, 3));

const customMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, side: THREE.DoubleSide });
const customMesh = new THREE.Mesh(customGeometry, customMaterial);
scene.add(customMesh);

3. Introduction to Materials​

Materials define the appearance of geometries in Three.js. Different materials can have various properties, including color, texture, transparency, and shading effects.

Common Built-in Materials​

  • MeshBasicMaterial: A simple material with a solid color, unaffected by lights.
  • MeshLambertMaterial: A material that reacts to lights, providing a matte finish.
  • MeshPhongMaterial: A shiny material that reflects lights, simulating specular highlights.
  • MeshStandardMaterial: A more advanced material for physically-based rendering (PBR), supporting roughness and metalness.

Example: Using Different Materials​

// Basic material (doesn't respond to lights)
const basicMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const basicCube = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), basicMaterial);
scene.add(basicCube);

// Lambert material (responds to lights)
const lambertMaterial = new THREE.MeshLambertMaterial({ color: 0x0000ff });
const lambertCube = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), lambertMaterial);
lambertCube.position.x = 2;
scene.add(lambertCube);

// Phong material (reflective and shiny)
const phongMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000, shininess: 100 });
const phongCube = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), phongMaterial);
phongCube.position.x = -2;
scene.add(phongCube);

4. Applying Textures​

Textures can be applied to materials to enhance their visual appearance.

Step 1: Loading a Texture​

Use the TextureLoader to load a texture image:

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('path/to/texture.jpg');

Step 2: Applying the Texture to a Material​

You can apply the loaded texture to a material:

const texturedMaterial = new THREE.MeshBasicMaterial({ map: texture });
const texturedCube = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), texturedMaterial);
scene.add(texturedCube);

5. Conclusion​

In this tutorial, you learned about geometries and materials in Three.js, including how to create built-in and custom geometries, use various materials, and apply textures to enhance the appearance of 3D objects. With this knowledge, you can start building more complex and visually appealing 3D scenes.

Further Reading​

Content Review​

The content in this repository has been reviewed by chevp. Chevp is dedicated to ensuring that the information provided is accurate, relevant, and up-to-date, helping users to learn and implement programming skills effectively.

About the Reviewer​

For more insights and contributions, visit chevp's GitHub profile: chevp's GitHub Profile.