Generate Three.js 3D Geometries

This skill covers creating and optimizing geometry in Three.js, spanning built-in shapes, custom BufferGeometry, and instanced rendering for mesh-structure work distinct from scene setup or materials alone. It documents built-in primitive geometries (Box, Sphere with partial-sphere/hemisphere parameters, Plane, Circle, Cylinder including cone and hexagonal-prism variants, Cone, Torus, TorusKnot, Ring), platonic/advanced solids (Capsule, Dodecahedron, Icosahedron, Octahedron, Tetrahedron, and the generic Polyhedron built from raw vertex/index arrays), path-based shapes (Lathe for surfaces of revolution, Extrude for 2D shapes extruded with bevel options, Tube for extruding along a Catmull-Rom curve), and TextGeometry loaded from a typeface JSON font with bounding-box centering. It explains BufferGeometry as the base class storing all geometry data as GPU-efficient typed arrays: building a custom geometry from scratch with position/index/normal/UV/per-vertex-color BufferAttributes, the typed-array conventions per attribute (Float32Array for positions/normals/UVs, Uint16/32Array for indices depending on vertex count, Uint8Array for byte colors), modifying vertices at runtime via setXYZ/getX/Y/Z with the required needsUpdate flag and recomputing normals/bounding volumes after changes, and advanced interleaved buffers for more efficient memory layout on large meshes. It covers EdgesGeometry (hard-edge outlines with a threshold angle) vs WireframeGeometry (every triangle edge) rendered via LineSegments, point clouds via THREE.Points with PointsMaterial size attenuation, and line primitives (Line, LineLoop, LineSegments) built from Vector3 arrays or raw position buffers. InstancedMesh is covered in depth for efficiently rendering many copies of one geometry - setting a per-instance transform matrix via a dummy Object3D, optional per-instance colors via InstancedBufferAttribute, runtime instance updates, and raycasting against instances to retrieve the hit instanceId - plus InstancedBufferGeometry for custom per-instance shader attributes beyond transform/color. Geometry utilities cover merging same-attribute geometries (with optional multi-material groups) via BufferGeometryUtils.mergeGeometries, computing tangents for normal mapping, and interleaving attributes for performance. Common patterns include centering geometry at the origin, scaling to fit a unit bounding box, cloning with subsequent transforms, and manually constructing morph target position arrays. Performance tips: prefer indexed geometry to reuse vertices, merge static meshes to cut draw calls, use InstancedMesh for repeated objects, choose segment counts matching the required visual quality (16 for performance, 32 for standard, 64 for high quality), and dispose unused geometry. It introduces r183's BatchedMesh as a higher-level InstancedMesh alternative supporting multiple distinct geometries in a single draw call with per-instance opacity, visibility, and depth-sorted transparency.

Use it when creating or optimizing geometry in Three.js - built-in shapes, custom BufferGeometry, vertex-level work, or instanced/batched rendering - rather than scene setup or material properties alone. It cross-references companion skills for scene/Object3D fundamentals, material types, and custom vertex manipulation via shaders, which are out of its own scope.

Inputs: the desired mesh shape (built-in primitive, custom vertex data, or a large repeated-object scenario) and its performance/quality requirements.
Outputs: working Three.js JavaScript code for the requested geometry - built-in shape construction, custom BufferGeometry with proper attributes, or InstancedMesh/BatchedMesh setup for repeated objects.

const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
geometry.setIndex(new THREE.BufferAttribute(indices, 1));
geometry.computeVertexNormals();

Three.js developers building or optimizing mesh geometry - from simple built-in shapes to custom BufferGeometry and large-scale instanced rendering - who need correct attribute setup and performance-conscious patterns.