skills.rest
divinaarmuela
divinaarmuelaCOMMUNITY
Explore all skills by this author →
GitHub

threejs-geometry

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

Updated Apr 19, 2026
Search Tags:#javascript#webgl#three.js#3d graphics#mesh#buffergeometry#instancedmesh
One-click install
npx skills add https://github.com/divinaarmuela/Content --skill threejs-geometry-divinaarmuela
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-geometry
Source: https://github.com/divinaarmuela/Content/tree/main/.claude/skills/threejs-geometry
Command: npx skills add https://github.com/divinaarmuela/Content --skill threejs-geometry-divinaarmuela

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Building 3D shapes in Three.js requires knowing dozens of geometry constructors, attribute layouts, and performance trade-offs, and mistakes lead to broken lighting, missing textures, or slow rendering. ## Core Features & Use Cases - Built-in Shapes: Reference for Box, Sphere, Cylinder, Torus, Lathe, Extrude, Tube, and Text geometries with correct parameter order. - Custom BufferGeometry: Set position, normal, UV, color, and index attributes with typed arrays, plus interleaved buffers for large meshes. - Instanced Rendering: Render thousands of copies with InstancedMesh, per-instance colors, and runtime matrix updates. - Use Case: You need a particle field of 1000 rotating boxes with random colors. Use the InstancedMesh pattern to set transforms and colors per instance in a single draw call. ## Quick Start Ask the AI to create a Three.js scene with a custom BufferGeometry triangle mesh or 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 custom geometry in Three.js?▼

Create a THREE.BufferGeometry and set attributes with typed arrays: position (3 floats per vertex), normal, uv, and optionally color. Add an index array with setIndex to reuse vertices, then call computeVertexNormals if lighting looks wrong.

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

Use THREE.InstancedMesh with a shared geometry and material, setting each instance's transform via setMatrixAt and a dummy Object3D. Per-instance colors work through setColorAt, and you must flag instanceMatrix.needsUpdate after changes.

What is the difference between EdgesGeometry and WireframeGeometry?▼

EdgesGeometry renders only hard edges above a threshold angle, producing clean outlines. WireframeGeometry renders every triangle edge, showing the full mesh tessellation. Both pair with LineSegments and LineBasicMaterial.

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

Changing position attributes invalidates normals, so lighting breaks. Call geometry.computeVertexNormals() after edits and set positions.needsUpdate = true so the GPU receives the new data.

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

Use indexed geometry whenever vertices are shared between triangles, since it reduces memory and improves GPU cache usage. Use Uint16Array indices for meshes under 65535 vertices and Uint32Array for larger ones.

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
zamansepeti43zamansepeti43

threejs-materials

Configure Three.js materials including PBR, toon, and custom GLSL shaders for mesh rendering.

Community
Intermediate
BamoJBamoJ

perf-audit

Audit WebGL performance issues and provide optimization fixes.

Community
Advanced
xingBaGanxingBaGan

threejs-loaders

Load GLTF, OBJ, FBX, STL, and PLY assets into Three.js scenes.

Community
Intermediate