skills.rest
capella-hotel-group
capella-hotel-groupOFFICIAL
Explore all skills by this author →
GitHub

threejs-geometry

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

Updated Apr 6, 2026
Search Tags:#javascript#geometry#webgl#three.js#3d graphics#buffergeometry#instancedmesh
One-click install
npx skills add https://github.com/capella-hotel-group/capella-hotel-group-poc --skill threejs-geometry-capella-hotel-group
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-geometry
Source: https://github.com/capella-hotel-group/capella-hotel-group-poc/tree/main/.github/skills/threejs-geometry
Command: npx skills add https://github.com/capella-hotel-group/capella-hotel-group-poc --skill threejs-geometry-capella-hotel-group

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? It provides ready-to-use patterns for creating and manipulating 3D geometry in Three.js, removing the guesswork around constructor parameters, typed-array attributes, and performance optimization techniques. ## Core Features & Use Cases - Built-in Shapes: Covers Box, Sphere, Cylinder, Torus, Lathe, Extrude, Tube, and TextGeometry with full parameter signatures. - Custom BufferGeometry: Shows how to define position, normal, UV, color, and index attributes with typed arrays, plus interleaved buffers for memory efficiency. - Instancing & Performance: Demonstrates InstancedMesh, InstancedBufferGeometry, geometry merging, morph targets, and disposal patterns. - Use Case: When building a scene with thousands of repeated objects, use the InstancedMesh pattern to set per-instance transforms and colors in a single draw call. ## Quick Start Ask the AI to create a Three.js scene containing a custom BufferGeometry quad with vertex colors and an InstancedMesh of 1000 randomly positioned 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 custom geometry in Three.js?▼

Create a THREE.BufferGeometry and set attributes with typed arrays: position (3 floats per vertex), normal, uv, and optionally color and index. Use setAttribute with BufferAttribute, then call computeVertexNormals if lighting is needed.

How to render thousands of objects efficiently in Three.js?▼

Use THREE.InstancedMesh with a shared geometry and material, setting per-instance transforms via setMatrixAt and optional per-instance colors via setColorAt. This renders all copies in a single draw call instead of one per mesh.

What is the difference between EdgesGeometry and WireframeGeometry?▼

EdgesGeometry renders only hard edges above a threshold angle, producing clean outlines, while WireframeGeometry renders every triangle edge. Both are displayed with LineSegments and LineBasicMaterial.

Why is my custom BufferGeometry not lit correctly?▼

Missing or incorrect normal attributes cause lighting failures. After modifying positions, call geometry.computeVertexNormals() to regenerate normals, and set needsUpdate on changed attributes so the GPU receives new data.

When should I use indexed geometry in Three.js?▼

Use indexed geometry when vertices are shared between triangles, since indices let the GPU reuse vertex data and reduce memory. Use Uint16Array for meshes under 65535 vertices and Uint32Array for larger ones.

Related Skills

Explore More Software Engineering Skills→
huangzidahuangzida
2

threejs-fundamentals

Bootstrap Three.js scenes with camera, renderer, and Object3D hierarchies.

Community
Intermediate
gyalamanch001agyalamanch001a

threejs-materials

Configure Three.js mesh materials for PBR shading and shader effects.

Community
Intermediate
tja688tja688

unity-performance

Profile Unity rendering, CPU/GPU workloads, and memory usage to identify bottlenecks.

Community
Intermediate
ptrthomasptrthomas
7

blender-geometry-nodes

Automate procedural geometry workflows in Blender using Geometry Nodes and Python.

Community
Advanced