threejs-geometry

Creates and optimizes Three.js 2D/3D geometries with built-in shapes, BufferGeometry customization, instancing, and rendering workflows.

2|Updated Jan 30, 2026
One-click install
npx skills add https://github.com/ElementTech/create-threejs-game --skill threejs-geometry-elementtech
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: threejs-geometry
Source: https://github.com/ElementTech/create-threejs-game/tree/main/template/.claude/skills/threejs-geometry
Command: npx skills add https://github.com/ElementTech/create-threejs-game --skill threejs-geometry-elementtech

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Three.js developers often struggle to create, customize, and optimize geometry for 3D scenes, from built-in shapes to custom buffers and instancing.

Core Features & Use Cases

  • Built-in Geometries: Box, Sphere, Plane, Cylinder, Cone, Torus, and more, with practical usage examples.
  • Advanced Shapes: Capsule, Dodecahedron, Icosahedron, Octahedron, Tetrahedron, Polyhedron.
  • BufferGeometry: Custom vertex attributes, indices, normals, UVs, morph targets, and interleaving.
  • Instancing & Performance: Efficient rendering of large numbers of identical objects via InstancedMesh.
  • Geometry Utilities: Merging geometries, computing tangents, and other helpers.
  • Use Case: Quickly prototype scenes or procedural geometry for games, demos, or visualizations.

Quick Start

Create a basic Three.js scene, add a simple BoxGeometry mesh, and render a green cube.

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

Three.js instancing via InstancedMesh allows efficient rendering of large numbers of identical objects. This Skill provides practical usage patterns for InstancedMesh to optimize geometry pipelines and significantly improve rendering performance in games and visualizations.

What is the best way to render large numbers of identical objects in Three.js?

Three.js instancing via InstancedMesh allows efficient rendering of large numbers of identical objects. This Skill provides practical usage patterns for InstancedMesh to optimize geometry pipelines and significantly improve rendering performance in games and visualizations.

Can I use morph targets with custom Three.js geometry?

Three.js geometry utilities include helpers for merging geometries and computing tangents. This Skill covers these utilities to help developers optimize and combine geometries for fast prototyping and performant geometry pipelines.

Does this Skill cover built-in Three.js shapes like spheres and cylinders?

Yes, this Skill covers built-in Three.js shapes like Box, Sphere, Cylinder, Cone, and Torus. It also includes advanced shapes such as Capsule and Dodecahedron, providing practical usage examples for quickly prototyping 3D scenes.

When should I merge geometries in Three.js?

You should merge geometries in Three.js to reduce draw calls and optimize rendering performance. This Skill provides geometry utilities like merging and computing tangents to streamline performant geometry pipelines for games and visualizations.