A Quick Guide to Geometries in Three.js

Three.js offers a variety of geometries that allow developers to create complex 3D shapes easily. Here’s a brief overview of some specific geometries you can use in your projects:

1. ConvexGeometry

ConvexGeometry is used to create a convex hull from a set of points. This is particularly useful for modeling objects that need to be enclosed in a convex shape. You provide an array of vertices, and it constructs a geometry that wraps around them.

const points = [
    new THREE.Vector3(1, 1, 1),
    new THREE.Vector3(-1, 1, 1),
    new THREE.Vector3(-1, -1, 1),
    new THREE.Vector3(1, -1, 1),
    new THREE.Vector3(0, 0, -1),
];
const convexGeometry = new THREE.ConvexGeometry(points);

2. DecalGeometry

DecalGeometry is used to project textures onto surfaces, creating the appearance of decals (like stickers) on 3D models. This is particularly useful for adding details such as bullet holes or logos on surfaces.

const decalGeometry = new THREE.DecalGeometry(targetMesh, position, rotation, size);

3. ParametricGeometry

ParametricGeometry allows you to create surfaces defined by parametric equations. You can define how the surface should look by specifying mathematical functions for its shape.

const parametricFunction = (u, v, target) => {
    const x = 10 * (u - 0.5);
    const y = 10 * (v - 0.5);
    const z = Math.sin(x) * Math.cos(y);
    target.set(x, y, z);
};
const parametricGeometry = new THREE.ParametricGeometry(parametricFunction, 10, 10);

4. TeapotGeometry

TeapotGeometry creates a classic teapot shape, often used for testing lighting and materials in Three.js. It’s a fun geometry that showcases the library’s capabilities in rendering smooth, curved surfaces.

const teapotGeometry = new THREE.TeapotGeometry(5, 10); // radius and detail level

5. TextGeometry

TextGeometry is used to create 3D text from a string. It allows you to specify font, size, and other properties, enabling the creation of custom text shapes in your scenes.

const fontLoader = new THREE.FontLoader();
fontLoader.load('path/to/font.json', (font) => {
    const textGeometry = new THREE.TextGeometry('Hello, Three.js!', {
        font: font,
        size: 1,
        height: 0.1,
    });
});

Conclusion

These geometries in Three.js provide flexibility and creativity in designing 3D objects. By understanding how to use each geometry type, developers can create rich and diverse scenes tailored to their projects.