threejs-geometry

Create and manipulate Three.js geometries with buffer and instancing techniques.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/hanzoai/video --skill threejs-geometry-hanzoai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-geometry
Source: https://github.com/hanzoai/video/tree/main/.agents/skills/threejs-geometry
Command: npx skills add https://github.com/hanzoai/video --skill threejs-geometry-hanzoai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Creating and manipulating 3D geometries in Three.js can be verbose and error-prone; this skill provides a concise, comprehensive guide to common and advanced geometries, buffer geometry techniques, and instancing patterns to accelerate development.

Core Features & Use Cases

  • Built-in geometries including BoxGeometry, SphereGeometry, PlaneGeometry, CircleGeometry, CylinderGeometry, and more for rapid scene assembly.
  • Advanced shapes such as CapsuleGeometry, DodecahedronGeometry, IcosahedronGeometry, PolyhedronGeometry, LatheGeometry, ExtrudeGeometry, and TubeGeometry for custom forms.
  • BufferGeometry fundamentals and advanced techniques: custom attributes, interleaved buffers, per-vertex colors, normals, UVs, and custom geometry utilities.
  • Instancing and performance tips: InstancedMesh, InstancedBufferGeometry, merging geometries, and efficient attribute handling.
  • Use cases: prototyping interactive 3D scenes, teaching geometry concepts, or building performance-conscious WebGL apps.

Quick Start

Create a simple scene with THREE.BoxGeometry and a MeshStandardMaterial, then add the mesh to your scene.

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 3D geometries in Three.js using BufferGeometry?▼

Yes, you can use BufferGeometry to create custom 3D geometries in Three.js by defining per-vertex attributes, interleaved buffers, normals, and UVs. This approach provides direct control over mesh data structure for custom shapes beyond built-in options.

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

The best way to render thousands of meshes efficiently in Three.js is using InstancedMesh and InstancedBufferGeometry. These instancing patterns reduce draw calls by reusing a single geometry across multiple instances.

How do I use advanced geometry shapes like Capsule or Dodecahedron in Three.js?▼

Use advanced geometry shapes like CapsuleGeometry and DodecahedronGeometry in Three.js by instantiating their respective classes with configuration parameters. These built-in constructors generate complex polyhedron and custom forms for rapid scene assembly.

Does Three.js support merging multiple geometries for performance optimization?▼

Yes, Three.js supports merging multiple geometries to reduce draw calls and improve performance optimization. This technique combines separate meshes into a single BufferGeometry, streamlining rendering workflows for complex WebGL applications.

When should I use custom geometry attributes in WebGL applications?▼

Use custom geometry attributes in WebGL applications when you need per-vertex colors, custom normals, or specific UV mappings. BufferGeometry customization allows tailored rendering effects that built-in material properties cannot achieve.