skills.rest
X-manist
X-manistCOMMUNITY
Explore all skills by this author →
GitHub

threejs-geometry

Create Three.js geometries including built-in shapes, BufferGeometry, and instanced meshes.

Updated Jul 16, 2026
Search Tags:#javascript#webgl#three.js#3d graphics#mesh#buffergeometry#instancedmesh
One-click install
npx skills add https://github.com/X-manist/Cohmira --skill threejs-geometry-x-manist
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-geometry
Source: https://github.com/X-manist/Cohmira/tree/main/src/builtin-plugins/openmontage/.agents/skills/threejs-geometry
Command: npx skills add https://github.com/X-manist/Cohmira --skill threejs-geometry-x-manist

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Building 3D scenes in Three.js requires knowing dozens of geometry constructors, attribute layouts, and performance techniques, and mistakes in vertex data or segment counts cause rendering bugs or slow frame rates. ## Core Features & Use Cases - Built-in Shapes: Reference for Box, Sphere, Cylinder, Torus, Lathe, Extrude, Tube, and TextGeometry with full parameter signatures. - Custom BufferGeometry: Construct meshes from raw vertex, normal, UV, color, and index typed arrays, including interleaved buffers. - Instanced Rendering: Render thousands of copies with InstancedMesh and per-instance colors or custom InstancedBufferGeometry attributes. - Use Case: When building a particle field or a crowd of repeated objects, use the InstancedMesh patterns to set per-instance transforms and colors in a single draw call instead of creating thousands of separate meshes. ## Quick Start Ask the AI to create a Three.js scene with a custom BufferGeometry triangle mesh and an InstancedMesh of 1000 randomly placed boxes.

Frequently Asked Questions about threejs-geometry

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a custom BufferGeometry in Three.js?▼

Create a THREE.BufferGeometry, then call setAttribute with BufferAttribute objects holding Float32Array data for position (3 floats per vertex), normal, and uv. Optionally call setIndex with a Uint16Array or Uint32Array to reuse vertices across triangles.

How to render thousands of objects efficiently in Three.js?▼

Use THREE.InstancedMesh with a shared geometry and material, then set each instance transform via setMatrixAt and optional per-instance colors via setColorAt. Set instanceMatrix.needsUpdate to true after changes so the GPU receives updated data.

What built-in geometries does Three.js provide?▼

Three.js includes Box, Sphere, Plane, Circle, Cylinder, Cone, Torus, TorusKnot, Ring, Capsule, and polyhedron geometries like Icosahedron and Dodecahedron. Path-based options include LatheGeometry, ExtrudeGeometry, TubeGeometry, and TextGeometry via FontLoader.

Why is my Three.js mesh black after modifying vertices?▼

Lighting requires correct normals, so after changing position attributes call geometry.computeVertexNormals() and set the attribute's needsUpdate flag to true. Also recompute bounding volumes with computeBoundingBox and computeBoundingSphere for correct culling.

When should I use indexed geometry in Three.js?▼

Use indexed geometry when triangles share vertices, since indices let the GPU reuse vertex data and reduce memory. Use Uint16Array indices for meshes under 65535 vertices and Uint32Array for larger meshes.

Related Skills

Explore More Software Engineering Skills→
hanzoaihanzoai

threejs-fundamentals

Create a minimal Three.js scene with rotating cube, lighting, and animation loop for web browsers.

Official
Intermediate
toilahuonggtoilahuongg

threejs-materials

Create and configure Three.js materials for realistic rendering.

Community
Advanced
vesvietvesviet

optimize-3d-assets

Optimizes 3D models, textures, and materials to reduce load times and GPU memory pressure.

Community
Intermediate
Prompt-or-Die-LabsPrompt-or-Die-Labs
7

threejs-scene-builder

Generates Three.js and React Three Fiber scenes with GLTF loading, animation, and lighting.

Official
Advanced