Three.js Geometry and BufferGeometry Guide
This guide explains how Three.js geometry maps to GPU buffers, how attributes are structured, and how to scale mesh-heavy scenes without excessive draw calls.
Core Concepts
BufferGeometry is the default geometry path in Three.js because it stores vertex data in typed arrays that map cleanly to WebGL buffers. Attributes like position, normal, and uv are each separate buffer channels.
const geometry = new THREE.BufferGeometry()
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3))
geometry.setAttribute('normal', new THREE.BufferAttribute(normals, 3))
geometry.setIndex(indices)Best Practices
- Keep scene setup, update loop, and cleanup code isolated for maintainability.
- Prefer deterministic data flow and avoid hidden side effects in frame updates.
- Profile changes on mobile-class hardware before shipping.
- Document control schemes and provide readable non-canvas text context for SEO.