threejs-geometry

Create and manipulate Three.js geometries with BufferGeometry and InstancedMesh.

46.2k|5.7k|Updated Mar 29, 2026
One-click install
npx skills add https://github.com/calesthio/OpenMontage --skill threejs-geometry-calesthio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-geometry
Source: https://github.com/calesthio/OpenMontage/tree/main/.agents/skills/threejs-geometry
Command: npx skills add https://github.com/calesthio/OpenMontage --skill threejs-geometry-calesthio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Three.js geometry creation is central to building 3D scenes; this skill provides code examples and guidance for using built-in shapes, custom BufferGeometry, and instancing to streamline geometry workflows.

Core Features & Use Cases

  • Built-in geometries: BoxGeometry, SphereGeometry, PlaneGeometry, and more for immediate scene setup.
  • Advanced shapes and custom geometry: CapsuleGeometry, PolyhedronGeometry, custom BufferGeometry with attributes, and per-vertex data.
  • Instancing and performance: Techniques like InstancedMesh and interleaved attributes to render many objects efficiently.
  • Practical workflows: From basic scene assembly to complex geometry manipulation and rendering optimizations.

Quick Start

Create a simple Three.js scene and render a green box using BoxGeometry.

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 with per-vertex attributes in Three.js?▼

To create custom BufferGeometry in Three.js, define vertex positions and attributes directly into typed arrays, passing them into the geometry to construct custom 3D shapes for real-time rendering. This allows precise per-vertex data control.

What is the best way to render thousands of objects efficiently in Three.js?▼

The best way to render thousands of objects efficiently in Three.js is using InstancedMesh. It allows you to draw identical geometries multiple times with a single draw call, significantly optimizing performance-conscious rendering tasks.

Can I use built-in shapes like BoxGeometry and SphereGeometry for immediate scene setup?▼

Yes, you can use built-in shapes like BoxGeometry and SphereGeometry for immediate Three.js scene setup. They provide pre-configured geometry data for rapid prototyping and basic 3D scene construction without manual vertex definitions.

How do interleaved attributes work when optimizing Three.js geometries?▼

Interleaved attributes optimize Three.js geometries by packing multiple vertex data streams, such as positions and normals, into a single buffer. This memory layout improves GPU cache locality during real-time 3D rendering tasks.

Does this cover advanced shapes like CapsuleGeometry and PolyhedronGeometry?▼

Yes, this covers advanced shapes like CapsuleGeometry and PolyhedronGeometry. These built-in Three.js geometries extend basic modeling workflows, allowing you to construct complex 3D forms beyond standard boxes and spheres.

When should I avoid using InstancedMesh for 3D scene construction?▼

You should avoid using InstancedMesh for 3D scene construction when objects require unique geometry topologies, as instancing requires all instances to share the exact same BufferGeometry data, limiting per-instance structural variations.