threejs-geometry_skill

Overview

This skill provides practical utilities and patterns for creating and manipulating geometry with Three.js, from built-in primitive shapes to custom BufferGeometry and instanced rendering. It focuses on efficient GPU-friendly data layouts, editing vertex attributes, and common geometry utilities to prepare meshes for rendering. Use it to build custom shapes, optimize draw calls, and handle text, lines, points, and path-based geometry.

How this skill works

The skill explains how to instantiate built-in geometries (boxes, spheres, torus, polyhedra) and create complex shapes using lathe, extrude, and tube generators. It shows how to build custom BufferGeometry with typed arrays for positions, normals, uvs, colors, and indices, and how to update attributes and recompute normals or bounding volumes. It also covers InstancedMesh and InstancedBufferGeometry for high-performance repeated meshes and utilities for merging, interleaving, and computing tangents.

When to use it

• When you need standard primitives (box, sphere, torus) with configurable segments and detail.
• When building custom meshes from vertex data or importing procedural geometry.
• When creating path-based or extruded shapes (lathe, extrude, tube).
• When rendering many identical objects and you need to reduce draw calls (InstancedMesh).
• When optimizing memory layout or merging static geometry for performance.

Best practices

• Prefer BufferGeometry with typed arrays for GPU efficiency and lower GC pressure.
• Use indexed geometry to reuse vertices and reduce vertex count.
• Merge static meshes and interleave attributes to lower draw calls and improve cache locality.
• Choose segment counts to balance visual quality and performance; dispose geometries when no longer needed.
• Recompute normals and bounding volumes after modifying vertex positions to ensure correct lighting and culling.

Example use cases

• Create UI labels or 3D signage using TextGeometry loaded via FontLoader and center the geometry for easy placement.
• Build a procedural asteroid field with InstancedMesh and per-instance transforms and colors for thousands of objects.
• Construct a custom mesh from simulation data by writing positions, normals, and uvs into a BufferGeometry.
• Generate a vase or bottle using LatheGeometry from a 2D profile and optionally extrude logos or handles.
• Merge static environment pieces with BufferGeometryUtils.mergeGeometries to reduce draw calls in a static scene.