skills.rest
zamansepeti43
zamansepeti43COMMUNITY
Explore all skills by this author →
GitHub

threejs-geometry

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

Updated Sep 1, 2026
Search Tags:#javascript#webgl#three.js#3d graphics#buffergeometry#instancedmesh#mesh generation
One-click install
npx skills add https://github.com/zamansepeti43/c-rak-agent --skill threejs-geometry-zamansepeti43
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-geometry
Source: https://github.com/zamansepeti43/c-rak-agent/tree/main/video-engine/.agents/skills/threejs-geometry
Command: npx skills add https://github.com/zamansepeti43/c-rak-agent --skill threejs-geometry-zamansepeti43

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 mistakes in vertex data or segment counts cause rendering bugs and slow 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 copies with InstancedMesh and per-instance colors or custom InstancedBufferGeometry attributes. - Use Case: When building a particle field or a crowd of repeated objects, use the InstancedMesh patterns to set per-instance transforms and colors in a single draw call instead of creating thousands of separate meshes. ## Quick Start Ask the AI to create a Three.js scene with a custom BufferGeometry triangle mesh and 500 instanced boxes with random positions and 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 BufferAttribute objects holding Float32Array data for positions (3 floats per vertex), normals, and UVs. Optionally call setIndex with a Uint16Array or Uint32Array to reuse vertices across triangles.

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 optional per-instance colors via setColorAt. This renders all copies in one draw call instead of one per mesh.

Does Three.js support text geometry?▼

Yes, TextGeometry from three/examples/jsm/geometries renders 3D text using a font loaded with FontLoader from a typeface.json file. Options include size, depth, curve segments, and bevel settings, and you can call geometry.center() to center the result.

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

The geometry is missing normal attributes, which lighting calculations require. Call geometry.computeVertexNormals() after setting positions, or supply a normal BufferAttribute manually, and verify the material responds to lights.

When should I use indexed geometry versus non-indexed?▼

Use indexed geometry with setIndex 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
sbalagan22sbalagan22

r3f-materials

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

Community
Intermediate
afoveaafovea

threejs-geometry

Create and optimize Three.js geometry with BufferGeometry and InstancedMesh.

Community
Advanced
jtgironjtgiron

react-three-fiber

Generate React Three Fiber scenes from JSON render specifications.

Community
Intermediate