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.
No setup needed. Let our cloud agents run this skill for you.
Select Provider
Select Model
Claude Sonnet 4.5
$0.20/task
Best for coding tasks
No setup required
Three.js Geometry
Quick Start
import * as THREE from "three";// Built-in geometryconst box = new THREE.BoxGeometry(1, 1, 1);const sphere = new THREE.SphereGeometry(0.5, 32, 32);const plane = new THREE.PlaneGeometry(10, 10);// Create meshconst material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });const mesh = new THREE.Mesh(box, material);scene.add(mesh);
// Lathe - points[], segments, phiStart, phiLengthconst points = [ new THREE.Vector2(0, 0), new THREE.Vector2(0.5, 0), new THREE.Vector2(
Text Geometry
import { FontLoader } from "three/examples/jsm/loaders/FontLoader.js";import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry.js";const loader = new FontLoader();loader.load("fonts/helvetiker_regular.typeface.json", (font) => { const geometry =
BufferGeometry
The base class for all geometries. Stores data as typed arrays for GPU efficiency.
Custom BufferGeometry
const geometry = new THREE.BufferGeometry();// Vertices (3 floats per vertex: x, y, z)const vertices = new Float32Array([ -1, -1, 0
BufferAttribute Types
// Common attribute typesnew THREE.BufferAttribute(array, itemSize);// Typed array optionsnew Float32Array(count * itemSize); // Positions, normals, UVsnew Uint16Array(count); // Indices (up to 65535 vertices)new Uint32Array(count); // Indices (larger meshes)new Uint8Array(count * itemSize); // Colors (0-255 range)// Item sizes
Modifying BufferGeometry
const positions = geometry.attributes.position;// Modify vertexpositions.setXYZ(index, x, y, z);// Access vertexconst x = positions.getX(index);const y = positions.getY(index);const z = positions.getZ(index);// Flag for GPU updatepositions.needsUpdate
Interleaved Buffers (Advanced)
// More efficient memory layout for large meshesconst interleavedBuffer = new THREE.InterleavedBuffer( new Float32Array([ // pos.x, pos.y, pos.z, uv.u, uv.v (repeated per vertex) -1, -1, 0, 0, 0, 1, -1, 0
EdgesGeometry & WireframeGeometry
// Edge lines (only hard edges)const edges = new THREE.EdgesGeometry(boxGeometry, 15); // 15 = threshold angleconst edgeMesh = new THREE.LineSegments( edges, new THREE.LineBasicMaterial({ color: 0xffffff }),);// Wireframe (all triangles)const
Points
// Create point cloudconst geometry = new THREE.BufferGeometry();const positions = new Float32Array(1000 * 3);for (let i = 0; i < 1000; i++) {
Lines
// Line (connected points)const points = [ new THREE.Vector3(-1, 0, 0), new THREE.Vector3(0, 1, 0), new
InstancedMesh
Efficiently render many copies of the same geometry.
const geometry = new THREE.BoxGeometry(1, 1, 1);const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
Update Instance at Runtime
// Update single instanceconst matrix = new THREE.Matrix4();instancedMesh.getMatrixAt(index, matrix);// Modify matrix...instancedMesh.setMatrixAt(index, matrix);instancedMesh.instanceMatrix.needsUpdate = true;// Raycasting with instanced meshconst intersects = raycaster.intersectObject(instancedMesh);if (intersects.length
InstancedBufferGeometry (Advanced)
For custom per-instance attributes beyond transform/color.
const geometry = new THREE.InstancedBufferGeometry();geometry.copy(new THREE.BoxGeometry(1, 1, 1));// Add per-instance attributeconst offsets = new Float32Array(count * 3);
Geometry Utilities
import * as BufferGeometryUtils from "three/examples/jsm/utils/BufferGeometryUtils.js";// Merge geometries (must have same attributes)const merged = BufferGeometryUtils.mergeGeometries([geo1, geo2, geo3]);// Merge with groups (for multi-material)const merged = BufferGeometryUtils.mergeGeometries([geo1, geo2], true);// Compute tangents (required for normal maps)BufferGeometryUtils.
Common Patterns
Center Geometry
geometry.computeBoundingBox();geometry.center(); // Move vertices so center is at origin
// Base geometryconst geometry = new THREE.BoxGeometry(1, 1, 1, 4, 4, 4);// Create morph targetconst morphPositions = geometry.attributes.position.array.slice();for (let i
Performance Tips
Use indexed geometry: Reuse vertices with indices
Merge static meshes: Reduce draw calls with mergeGeometries
Use InstancedMesh: For many identical objects
Choose appropriate segment counts: More segments = smoother but slower
Dispose unused geometry: geometry.dispose()
// Good segment counts for common usesnew THREE.SphereGeometry(1, 32, 32); // Good qualitynew THREE.SphereGeometry(1, 64, 64); // High qualitynew THREE.SphereGeometry(1, 16, 16); // Performance mode
See Also
threejs-fundamentals - Scene setup and Object3D
threejs-materials - Material types for meshes
threejs-shaders - Custom vertex manipulation
new THREE.SphereGeometry(1, 32, 32);
new THREE.SphereGeometry(1, 32, 32, 0, Math.PI * 2, 0, Math.PI); // Full sphere
new THREE.SphereGeometry(1, 32, 32, 0, Math.PI); // Hemisphere