skills.rest
ratnesh-maurya
ratnesh-mauryaCOMMUNITY
Explore all skills by this author →
Website𝕏@_ratneshmauryaGitHub

threejs-geometry

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Building 3D shapes in Three.js requires knowing dozens of geometry constructors, attribute layouts, and performance patterns, and mistakes with buffers or instancing cause rendering bugs that are hard to debug. ## Core Features & Use Cases - Built-in Shapes: Reference for Box, Sphere, Cylinder, Torus, Lathe, Extrude, Tube, and Text geometries with correct parameter signatures. - Custom BufferGeometry: Set position, normal, UV, color, and index attributes with typed arrays, plus interleaved buffers for memory efficiency. - Instanced Rendering: Render thousands of mesh copies with InstancedMesh, per-instance colors, and runtime matrix updates. - Use Case: You need a particle field of 1000 rotating boxes in a Next.js scene. Use the InstancedMesh pattern to set transforms via a dummy Object3D and flag instanceMatrix.needsUpdate for the GPU. ## 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 a custom BufferGeometry in Three.js?▼

Create a THREE.BufferGeometry, then call setAttribute with a BufferAttribute wrapping a Float32Array for positions, normals, and UVs. Use setIndex with a Uint16Array or Uint32Array for indexed geometry, and call computeVertexNormals after modifying positions.

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. Set instanceMatrix.needsUpdate to true after changes, and optionally add per-instance colors with setColorAt.

Does Three.js TextGeometry require an external font file?▼

Yes, TextGeometry requires a typeface JSON font loaded with FontLoader from three/examples/jsm/loaders/FontLoader.js. After creating the geometry, call computeBoundingBox and center to align the text at the origin.

Why is my Three.js mesh black after modifying vertices?▼

Lighting fails when normals are stale after position changes. Set positions.needsUpdate to true and call geometry.computeVertexNormals to recalculate normals, then recompute bounding volumes with computeBoundingBox and computeBoundingSphere.

When should I use Uint16Array vs Uint32Array for geometry indices?▼

Use Uint16Array for meshes with up to 65535 vertices and Uint32Array for larger meshes. Indexed geometry reuses vertices across triangles, reducing memory and improving GPU performance compared to non-indexed geometry.

Related Skills

Explore More Software Engineering Skills→
ElementTechElementTech
2

threejs-fundamentals

Configure Three.js scenes with cameras, renderers, lighting, and object hierarchies.

Community
Intermediate
code-review-benchmarkcode-review-benchmark

forge-pipeline-morph-animations

Load .fmesh and .fanim morph assets and apply per-vertex deltas in SDL GPU scenes.

Official
Advanced
OpenAEC-FoundationOpenAEC-Foundation
11

threejs-errors-performance

Diagnose Three.js performance issues and memory leaks in WebGL scenes.

Official
Advanced
Aurora-AIAurora-AI
1

r3f-bridge-engineer

Bridge React Three Fiber components with native Three.js for interactive 3D scenes.

Community
Intermediate