Skip to content

Mesh ​

The Mesh is built from an explicit list of faces. It is the escape hatch for geometry no primitive covers — imported models, procedurally generated surfaces, hand-built assemblies.

NOTE

For the full API, see the 3D API Reference.

Demo ​

Usage ​

ts
import {
    createMesh,
} from '@ripl/3d';

const mesh = createMesh({
    faces: [
        {
            vertices: [[0, 0, 0], [1, 0, 0], [0, 1, 0]],
            normals: [[0, 0, 1], [0, 0, 1], [0, 0, 1]],
            uvs: [[0, 0], [1, 0], [0, 1]],
            colors: ['#ff0000', '#00ff00', '#0000ff'],
        },
    ],
    material: {
        vertexColors: true,
    },
});

Properties ​

  • faces: the faces the mesh is built from, held by reference and never copied
  • revision: a counter bumped whenever the face list is replaced

Each face carries:

  • vertices: its vertices in local space, wound counter-clockwise when viewed from the front
  • normal: an optional precomputed face normal; derived from the first three vertices when omitted
  • normals: optional per-vertex normals, enabling smooth shading
  • uvs: optional per-vertex texture coordinates
  • colors: optional per-vertex colours, used when the material sets vertexColors

Replacing the geometry ​

The faces live outside element state and are only read, because computeFaces fires on every cache invalidation. Call setFaces to replace them.

ts
mesh.setFaces(nextFaces);

Type Guard ​

ts
import {
    elementIsMesh,
} from '@ripl/3d';

if (elementIsMesh(element)) {
    console.log(element.faces.length);
}