threejs-geometry
Three.js geometry generation: built-in shapes, BufferGeometry, vertex manipulation, custom meshes, and performance-optimized instanced rendering.
Introduction
This Three.js geometry skill provides technical guidance for constructing 3D objects within the Three.js ecosystem. It is designed for developers, creative coders, and graphics engineers who need to generate everything from simple primitives to complex, performant meshes. Whether you are building procedural environments, dynamic data visualizations, or high-performance 3D scenes, this skill offers the API references and structural patterns necessary to handle geometric data efficiently. It covers the full lifecycle of geometry creation, from standard constructor parameters for built-in shapes to the low-level manipulation of GPU-ready buffers.
-
Extensive documentation for built-in geometry primitives, including BoxGeometry, SphereGeometry, CylinderGeometry, and path-based shapes like ExtrudeGeometry and TubeGeometry.
-
Advanced workflows for Custom BufferGeometry, including manual construction of position, normal, UV, and color attributes using typed arrays (Float32Array, Uint16Array).
-
Integration guidelines for text generation using FontLoader and TextGeometry, including lifecycle management and bounding box calculations.
-
Best practices for memory management and GPU optimization, focusing on attribute updates and vertex data lifecycle.
-
Patterns for InstancedMesh to draw thousands of identical geometries with a single draw call, significantly improving frame rates.
-
Use this skill when you need to define the physical form of 3D objects in your scene.
-
Input expected includes coordinate data, segmentation counts, path points for shapes, or raw vertex data buffers.
-
Output provided is clean, production-ready Three.js code that integrates seamlessly with scenes, materials, and loaders.
-
Note that for performance-critical applications, always prefer BufferGeometry over legacy geometry classes to ensure maximum GPU throughput and lower memory overhead.
-
Keep in mind that modifications to geometry attributes at runtime require calling attribute.needsUpdate = true to signal the GPU to refresh its data.
Repository Stats
- Stars
- 2,126
- Forks
- 240
- Open Issues
- 4
- Language
- Not provided
- Default Branch
- main
- Sync Status
- Idle
- Last Synced
- Apr 29, 2026, 12:19 PM