skills.rest
imanlangaran
imanlangaranCOMMUNITY
Explore all skills by this author →
GitHub

threejs-geometry

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

1|Updated Aug 20, 2023
Search Tags:#javascript#webgl#three.js#3d graphics#mesh#instancing#buffergeometry
One-click install
npx skills add https://github.com/imanlangaran/mini-projects --skill threejs-geometry-imanlangaran
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-geometry
Source: https://github.com/imanlangaran/mini-projects/tree/main/building-sell/.claude/skills/threejs-geometry
Command: npx skills add https://github.com/imanlangaran/mini-projects --skill threejs-geometry-imanlangaran

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 getting vertex data or instancing wrong leads to broken rendering or poor frame rates. ## 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: Create meshes from raw vertex, normal, UV, color, and index arrays, including interleaved buffers for memory efficiency. - Instanced Rendering: Render thousands of object copies with InstancedMesh and per-instance colors or custom shader attributes. - Use Case: You need to render 1000 randomly positioned boxes in a scene. Use the InstancedMesh pattern to set per-instance transforms with a single draw call instead of creating 1000 separate meshes. ## Quick Start Show me how to create a custom BufferGeometry triangle mesh with vertex colors in Three.js.

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 for position, normal, and uv arrays, and optionally setIndex for indexed triangles. Use Float32Array for positions and normals, and Uint16Array or Uint32Array for indices.

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

Use THREE.InstancedMesh with a shared geometry and material, then set 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 text geometry for 3D text?▼

Yes, TextGeometry from three/examples/jsm/geometries works with fonts loaded via FontLoader in typeface.json format. It supports size, depth, curve segments, and bevel options, and you can center the result with geometry.center().

Why is my custom Three.js mesh black or unlit?▼

The geometry is missing normal attributes, which lighting calculations require. Add a normal BufferAttribute manually or call geometry.computeVertexNormals() after setting positions to generate them automatically.

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

Use indexed geometry when vertices are shared between triangles, since it reduces memory and improves GPU vertex cache reuse. Non-indexed geometry is simpler for small meshes but duplicates vertex data for every triangle.

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
sixscripts-aisixscripts-ai

threejs-webgl

Build interactive Three.js 3D scenes with WebGL and WebGPU 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