skills.rest
ayofemiade
ayofemiadeCOMMUNITY
Explore all skills by this author →
GitHub

threejs-geometry

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

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

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 full parameter signatures. - 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 colored boxes. Use InstancedMesh with setMatrixAt and setColorAt to render them in a single draw call instead of 1000 separate meshes. ## Quick Start Create a Three.js scene with a custom BufferGeometry triangle and an InstancedMesh grid of 500 boxes with random colors.

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 a BufferAttribute wrapping a Float32Array for positions, normals, and UVs. Use setIndex with a Uint16Array or Uint32Array for indexed geometry, and call computeVertexNormals if you modify positions.

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. This renders all copies in one draw call, and you can add per-instance colors with setColorAt.

Does Three.js support 3D text geometry?▼

Yes, use TextGeometry from three/examples/jsm/geometries with a font loaded via FontLoader from a typeface.json file. Options include size, depth, curveSegments, and bevel settings, and you can call geometry.center() to center the text.

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

Lighting fails when normals are stale or missing after position changes. Set positions.needsUpdate to true and call geometry.computeVertexNormals() so the GPU receives updated normal data for correct shading.

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

Use indexed geometry with setIndex when vertices are shared between triangles, since it reduces memory and improves GPU vertex reuse. Non-indexed geometry is simpler for flat shading or when every triangle needs unique normals.

Related Skills

Explore More Software Engineering Skills→
ElementTechElementTech
2

threejs-fundamentals

Configure Three.js scenes with cameras, renderers, lighting, and object hierarchies.

Community
Intermediate
sbalagan22sbalagan22

r3f-materials

Define reusable PBR and shader materials for React Three Fiber meshes.

Community
Intermediate
BamoJBamoJ

perf-audit

Audit WebGL performance issues and provide optimization fixes.

Community
Advanced
imanlangaranimanlangaran
1

threejs-loaders

Loads GLTF models, textures, and HDR environments in Three.js applications.

Community
Intermediate