skills.rest
brunoolf
brunoolfCOMMUNITY
Explore all skills by this author →
GitHub

threejs-geometry

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

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

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 patterns, and getting vertex data or instancing wrong produces invisible meshes or slow rendering. ## Core Features & Use Cases - Built-in and Path-Based Shapes: Reference for Box, Sphere, Cylinder, Torus, Lathe, Extrude, Tube, and TextGeometry with correct parameter signatures. - Custom BufferGeometry: Construct meshes from raw vertex, normal, UV, color, and index typed arrays, including interleaved buffers for memory efficiency. - Instanced Rendering: Render thousands of copies with InstancedMesh and per-instance colors or custom InstancedBufferGeometry attributes. - Use Case: You need a particle field of 1000 boxes with random positions and colors. Use the InstancedMesh pattern with setMatrixAt and setColorAt to render them 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 scattered 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, then setAttribute with BufferAttribute objects holding Float32Array data for positions (3 floats per vertex), normals, and UVs. Add an index array with setIndex to reuse vertices, and 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. This renders all copies in one draw call, and per-instance colors are supported through setColorAt.

What is the difference between BufferGeometry and InstancedBufferGeometry?▼

BufferGeometry stores per-vertex attributes like position and normal for a single mesh. InstancedBufferGeometry adds per-instance attributes via InstancedBufferAttribute, letting shaders receive unique data per copy beyond the standard transform matrix.

Why is my Three.js mesh black or not lit correctly?▼

Missing or incorrect normal attributes cause lighting failures on custom geometry. Call geometry.computeVertexNormals() after setting or modifying positions, and ensure the material responds to lights, such as MeshStandardMaterial.

When should I merge geometries in Three.js?▼

Merge static meshes with BufferGeometryUtils.mergeGeometries to reduce draw calls when objects share materials and never move independently. All merged geometries must have identical attribute sets, and dynamic objects should stay separate.

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
sbalagan22sbalagan22

r3f-materials

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

Community
Intermediate
adamhjkadamhjk
2

pixijs-performance

Profile and optimize PixiJS applications to reduce draw calls and prevent memory leaks.

Community
Advanced
xingBaGanxingBaGan

threejs-loaders

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

Community
Intermediate