skills.rest
mooch10
mooch10COMMUNITY
Explore all skills by this author →
GitHub

threejs-geometry

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

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

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 Shape Reference: Covers Box, Sphere, Cylinder, Torus, Lathe, Extrude, Tube, and Text geometries with full parameter signatures. - Custom BufferGeometry: Shows how to define positions, normals, UVs, colors, and indices as typed arrays, plus interleaved buffers for memory efficiency. - Instanced Rendering: Demonstrates InstancedMesh and InstancedBufferGeometry for rendering thousands of copies with per-instance transforms and colors. - Use Case: When building a particle field or a crowd of repeated objects in a WebGL scene, use the InstancedMesh patterns to set per-instance matrices and colors 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 1000 randomly positioned 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 typed arrays: position (3 floats per vertex), normal, uv, and optionally color. Add an index array to reuse vertices, then call computeVertexNormals if lighting is needed.

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 a single draw call instead of one per mesh.

Does Three.js support text geometry?▼

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

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 = true and call geometry.computeVertexNormals() so the GPU receives updated normal data for shading.

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

Use indexed geometry with an index buffer when vertices are shared between triangles, since it reduces memory and improves GPU cache usage. Non-indexed geometry is simpler for cases like per-face normals where vertices must be duplicated.

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
vesvietvesviet

optimize-3d-assets

Optimizes 3D models, textures, and materials to reduce load times and GPU memory pressure.

Community
Intermediate
tadams95tadams95
1

r3f-geometry

Construct and optimize 3D geometries with React Three Fiber.

Community
Intermediate