Create and optimize Three.js geometry - built-in primitives, custom BufferGeometry with position/normal/uv attributes, indexed meshes, and InstancedMesh for rendering many objects efficiently.
---
name: threejs-geometry
description: Three.js geometry creation - built-in shapes, BufferGeometry, custom geometry, instancing. Use when creating 3D shapes, working with vertices, building custom meshes, or optimizing with instanced rendering.
---
Build and optimize Three.js geometry from primitives up to custom and instanced meshes.
## How to use
1. Reach for built-in geometries first - `BoxGeometry`, `SphereGeometry`, `PlaneGeometry`, `CylinderGeometry` (a cone with `radiusTop: 0`), `TorusGeometry`, `TorusKnotGeometry`, etc., tuning their segment counts.
2. Pair geometry with a material (e.g. `MeshStandardMaterial`) into a `THREE.Mesh` and add it to the scene.
3. For custom shapes, build a `BufferGeometry` and set `position`, `normal`, and `uv` attributes via `BufferAttribute`.
4. Use indexed geometry (`setIndex`) to share vertices, and `computeVertexNormals()` when you generate positions by hand.
5. To render many copies efficiently, use `InstancedMesh` and set per-instance transforms with `setMatrixAt`.
Full skill & source: https://github.com/CloudAI-X/threejs-skills/tree/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-geometry