threejs-geometry

Name: threejs-geometry
Availability: InStock
Author: divinaarmuela

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

Ready to run

npx skills add https://github.com/divinaarmuela/Content --skill threejs-geometry-divinaarmuela

💬 Prompt for ChatGPT / Claude Chat▼

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.