skills.rest
shige1014-dev
shige1014-devCOMMUNITY
Explore all skills by this author →
GitHub

threejs-geometry

Create and optimize Three.js geometries and meshes for real-time 3D rendering.

1|Updated Apr 11, 2026
Search Tags:#performance#geometry#threejs#mesh#instancing#buffergeometry
One-click install
npx skills add https://github.com/shige1014-dev/backup-OpenMontage --skill threejs-geometry-shige1014-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-geometry
Source: https://github.com/shige1014-dev/backup-OpenMontage/tree/main/.agents/skills/threejs-geometry
Command: npx skills add https://github.com/shige1014-dev/backup-OpenMontage --skill threejs-geometry-shige1014-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides clear, practical guidance for creating, customizing, and optimizing Three.js geometry so developers can build performant 3D meshes, point clouds, lines, and instanced objects without guessing attribute formats or GPU workflows.

Core Features & Use Cases

  • Built-in shapes & advanced primitives: Examples for Box, Sphere, Plane, Torus, Lathe, Extrude, Text, and more to quickly prototype scenes.
  • Custom BufferGeometry & attributes: Patterns for positions, normals, uvs, indices, colors, interleaved buffers, and indexed meshes for GPU-efficient data layouts.
  • Instancing & performance: Recipes for InstancedMesh, per-instance attributes, merging geometries, computing tangents, morph targets, and proper disposal to reduce draw calls and memory use.
  • Use Case: Convert high-count particle or crowd renders to instanced workflows, or create custom extruded and lathed meshes with correct UVs and normals for PBR rendering.

Quick Start

Use threejs-geometry to create a custom BufferGeometry with positions, normals, uvs, and indices, then render thousands of instances via InstancedMesh while minimizing draw calls.

Frequently Asked Questions about threejs-geometry

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I optimize Three.js geometry for high-count rendering?▼

Optimize Three.js geometry by using InstancedMesh for high-count rendering, merging geometries to reduce draw calls, and applying interleaved buffers for GPU-efficient data layouts. Proper GPU disposal patterns also minimize memory use.

What is the best way to create custom BufferGeometry with correct normals and UVs?▼

Create custom BufferGeometry by defining typed BufferAttributes for positions, normals, and UVs. Indexed geometry organizes vertices efficiently, ensuring correct UV mapping and normal computation for PBR rendering.

When should I use instanced rendering instead of standard meshes in Three.js?▼

Use instanced rendering for scenarios like particle or crowd renders to minimize draw calls. InstancedMesh supports per-instance attributes and colors, drastically improving performance over standard meshes.

Can I generate path-based extrusions and text geometry in Three.js?▼

Yes, Three.js supports path-based extrusions, lathed meshes, and text geometry. These built-in shapes and advanced primitives allow rapid scene prototyping with correctly computed geometry data.

Does Three.js support morph targets and interleaved buffers for BufferGeometry?▼

Yes, Three.js BufferGeometry supports morph targets for animation and interleaved buffers for efficient memory layout. These features enable complex deformations and optimized GPU workflows.

Why does my Three.js scene lose performance when rendering many meshes?▼

Performance drops occur from excessive draw calls and unoptimized memory. Convert high-count meshes to InstancedMesh, merge static geometries, and ensure proper GPU disposal to reduce memory use and draw calls.

Related Skills

Explore More Software Engineering Skills→
norrbackanorrbacka

threejs-fundamentals

Set up and repair Three.js scene infrastructure with cameras, renderers, and animation loops.

Community
Intermediate
TumeloRamaphosaTumeloRamaphosa

threejs-webgl

Create interactive Three.js 3D scenes with WebGL or WebGPU.

Community
Advanced
CarlosDoersCarlosDoers

threejs-shaders

Integrate custom GLSL shaders into Three.js scenes via ShaderMaterial or RawShaderMaterial.

Community
Intermediate
gyalamanch001agyalamanch001a

threejs-geometry

Create and optimize Three.js geometries for meshes, lines, points, and instanced rendering.

Community
Intermediate