What is Geometry?

Geometry defines the shape of a 3D object.

It consists of:

• Vertices (Points)
• Edges (Lines)
• Faces/Triangles

The GPU must process every vertex.

More vertices = More calculations = Lower FPS

Best Practices

✓ Reduce unnecessary vertices

✓ Reuse geometries

Real Example

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({
    color: "orange"
});

for(let i = 0; i < 100; i++){

    const cube = new THREE.Mesh(
        geometry,
        material
    );

    cube.position.x = i * 2;

    scene.add(cube);
}

Result:

• 100 visible cubes
• 1 geometry
• 1 material
• Much faster