skills.rest
Aadi-110i
Aadi-110iCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

threejs-geometry

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

Updated Jul 28, 2026
Search Tags:#javascript#webgl#three.js#3d graphics#mesh#buffergeometry#instancedmesh
One-click install
npx skills add https://github.com/Aadi-110i/PEP-PROJECT --skill threejs-geometry-aadi-110i
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-geometry
Source: https://github.com/Aadi-110i/PEP-PROJECT/tree/main/skills/threejs-geometry
Command: npx skills add https://github.com/Aadi-110i/PEP-PROJECT --skill threejs-geometry-aadi-110i

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 or 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 shader attributes. - Use Case: You need a particle field of 1000 rotating cubes with random colors. Use the InstancedMesh pattern to set per-instance transforms and colors in a single draw call. ## Quick Start Create a Three.js scene with a custom BufferGeometry triangle mesh and an InstancedMesh of 500 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 setAttribute using typed arrays: positions as Float32Array with itemSize 3, normals with itemSize 3, and UVs with itemSize 2. Add an index with setIndex 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 per-instance transforms via setMatrixAt and optional colors via setColorAt. This renders all copies in one draw call instead of thousands.

Does Three.js support text geometry?▼

Yes, TextGeometry from three/examples/jsm/geometries renders 3D text using fonts loaded with FontLoader in typeface.json format. Options include size, depth, curve segments, and bevel settings.

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

Meshes appear black when the geometry lacks normal attributes, which lighting calculations require. Call geometry.computeVertexNormals() after setting or modifying positions to generate correct normals.

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

Use indexed geometry with setIndex when vertices are shared between triangles, since it reduces memory by storing each vertex once. Use Uint16Array indices for meshes under 65535 vertices and Uint32Array for larger ones.

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
zocomputerzocomputer
45

threejs-materials

Explain and demonstrate Three.js material types with code examples.

Official
Intermediate
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