threejs-geometries

Original：🇺🇸 English

Translated

three.js geometry authoring: BufferGeometry, typed BufferAttribute and interleaved layouts, InstancedBufferGeometry, primitive Geometries (box/sphere/torus/etc.), ExtrudeGeometry and Shape/Path/Curve from Extras, WireframeGeometry, and addon geometries such as TextGeometry, DecalGeometry, RoundedBoxGeometry. Covers merged scope of procedural curves and extrusion formerly split as extras-curves; for animation morph targets see threejs-animation; for merging buffers utilities see official BufferGeometryUtils module in docs Utils addons.

4installs

Sourcefull-stack-skills/threejs-skills

Added on2026-10-18

NPX Install

npx skill4agent add full-stack-skills/threejs-skills threejs-geometries

SKILL.md Content

View Translation Comparison →

When to use this skill

ALWAYS use this skill when the user mentions:

Building or modifying
```
BufferGeometry
```
, attributes, index buffers, draw ranges
Instancing via
```
InstancedBufferAttribute
```
/
```
InstancedMesh
```
geometry side (threejs-objects for mesh wrapper)

Extruding

Shape

along paths,

TubeGeometry

,

LatheGeometry

,

ExtrudeGeometry

Text or decal addon geometries

IMPORTANT: geometries vs math

threejs-geometries = GPU-ready triangle data.
threejs-math =
```
Box3
```
,
```
Sphere
```
,
```
Ray
```
tests without mesh topology.

Trigger phrases include:

"BufferGeometry", "BufferAttribute", "ExtrudeGeometry", "Shape", "Curve"
"几何体", "缓冲几何", "挤出", "文字几何"

How to use this skill

Prefer built-in primitives when they fit before custom buffers.
For custom meshes: create
```
BufferGeometry
```
, set
```
position
```
,
```
normal
```
,
```
uv
```
, optional
```
index
```
; compute bounding volumes for culling.
For instancing attributes, align divisor/count with
```
InstancedMesh
```
patterns in threejs-objects.
For 2D profiles: build
```
Shape
```
/
```
Path
```
, extrude or lathe per docs; consult Extras Curve family for path sampling.
For addon NURBS knots, follow Addons Curves pages sparingly—cite docs instead of copying full APIs.
Dispose geometries when replacing meshes to avoid leaks.

See examples/workflow-extrude-shape.md.

Doc map (official)

Docs section	Representative links
Core	https://threejs.org/docs/BufferGeometry.html
Geometries	https://threejs.org/docs/BoxGeometry.html
Extrude	https://threejs.org/docs/ExtrudeGeometry.html
Shape	https://threejs.org/docs/Shape.html

Scope

In scope: Core geometries, buffer core, curve/shape/extrusion workflows, selected addon geometries.
Out of scope: Physics collision mesh baking; full CAD import pipelines.

Common pitfalls and best practices

Missing normals break lighting; compute or import consistently.
Wrong winding order flips faces—check side/culling.
Huge attribute counts need LOD or simplification (modifiers in addons—mention only if user asks).

Documentation and version

Primitives and

BufferGeometry

live under Geometries and BufferGeometry in three.js docs. Curve,

Shape

, and extrusion APIs appear under Extras and Geometries—Addons Curves / Geometries document NURBS and text meshes; link those instead of copying long signatures.

Agent response checklist

When answering under this skill, prefer responses that:

Link
```
BufferGeometry
```
, a primitive, or
```
ExtrudeGeometry
```
/
```
Shape
```
as appropriate.
Point instancing usage to threejs-objects for
```
InstancedMesh
```
patterns.
Point morph targets and tracks to threejs-animation when deformation is time-driven.
Reference
```
BufferGeometryUtils
```
(Addons Utils) only by name + docs link when merging/splitting.
Emphasize
```
dispose()
```
when replacing large custom buffers.

References

Keywords

English: buffergeometry, extrude, shape, path, curve, primitives, instancing, three.js

中文： 几何体、BufferGeometry、挤出、Shape、曲线、实例化、three.js