PlugWiki

Three.js Geometry Skill by cloudai-x: Current three.js Shape and Mesh Code

Gives Claude current three.js r186 knowledge about geometry, so shapes, custom vertex data, instancing and point clouds use the right API.

Installs
16.3K
on skills.sh
Stars
3.9K
on GitHub
Updated
Oct 2026
last repo commit

Three.js Geometry is a reference that Claude reads when you build 3D shapes, text, custom meshes, instanced meshes or point clouds in three.js. It targets three.js r186 and covers built-in shapes, BufferGeometry attributes, merging, InstancedMesh, BatchedMesh, lines and points, with a WebGPU and TSL section.

Its Common Mistakes list has 17 outdated patterns paired with the r186 fix. It bundles only SKILL.md and no scripts.

Good for

  • Web developers building 3D scenes with three.js
  • Developers drawing thousands of objects with instancing or batching
  • Anyone whose Claude-written three.js code uses removed APIs

Install threejs-geometry

Claude Code

  1. 1

    Copy this prompt.

    Install the threejs-geometry skill in Claude Code. Run this command:

npx skills add https://github.com/cloudai-x/threejs-skills --skill threejs-geometry

Then check that it loaded and tell me how to use it.
  2. 2

    Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Creating and shaping three.js geometry: built-in shapes, 3D text, vertex buffers and attributes, merging, instancing, batching, point clouds and lines, on WebGL or with WebGPU and TSL. Use when building 3D shapes or text, custom vertex data, custom meshes, instanced meshes, or point clouds.

Sections in SKILL.md

  1. Quick Start
  2. Built-in Geometries
  3. Basic Shapes
  4. Advanced Shapes
  5. Path-Based Shapes
  6. Text Geometry
  7. BufferGeometry
  8. Custom BufferGeometry
  9. Attribute Types
  10. Updating a BufferGeometry
  11. Interleaved Buffers
  12. Edges and Wireframes
  13. Points
  14. Lines
  15. InstancedMesh
  16. InstancedBufferGeometry

Key facts

Author
cloudai-x
License
MIT
Installs on skills.sh
16,281 (Nov 2, 2026)
GitHub stars
3,903 for the whole cloudai-x/threejs-skills repo (Nov 2, 2026)
Last commit
Oct 19, 2026
What is inside
1 file: SKILL.md. No scripts or other files.
Targets
three.js r186 (three@0.186)

What it includes

  • Basic, advanced and path-based shapes, plus 3D text

    Working code for the standard shape classes, shapes from paths, and text geometry.

    Try: “Make 10,000 instanced cubes with random colors in three.js.”

    Built-in geometries

  • Custom geometry, attribute types, updates and interleaved buffers

    How to build your own vertex data, update it each frame and use normalized attributes.

    BufferGeometry

  • EdgesGeometry, Points and Line classes

    Drawing outlines, point clouds and lines.

    Edges, wireframes, points and lines

  • Draw many copies of one shape in a single draw call

    Per-instance transforms and custom per-instance attributes.

    InstancedMesh and InstancedBufferGeometry

  • Draw many different geometries in one draw call

    Add geometries, then add an instance for each one that should render.

    BatchedMesh

  • Merging, transforming geometry and morph targets

    Helpers for combining geometries and moving vertices, plus morph target setup.

    Utilities, transforms and morph targets

  • Choosing merge, instance or batch and freeing GPU memory

    Guidance on when each approach pays off and how to dispose geometry.

    Performance and disposal

  • What changes under WebGPURenderer

    The WebGPU backend draws Points at one pixel, issues one draw per BatchedMesh instance and skips LineLoop.

    WebGPU and TSL

  • Outdated code mapped to the r186 fix with the reason

    Examples: computeTangents lives on the geometry, normalize byte colors, and add an instance to see a BatchedMesh geometry.

    Common Mistakes (17)

From the official docs

Questions

What does the threejs-geometry skill do?

It gives Claude current knowledge of three.js geometry for release r186: built-in shapes, text, custom vertex buffers, instancing, batching, points and lines, with a list of outdated patterns to avoid.

How do I install it?

Use the install box at the top of this page. The README documents npx skills add cloudai-x/threejs-skills, which installs the whole 13-skill set, and a manual copy into ~/.claude/skills or .claude/skills.

Do I need the other three.js skills?

No. SKILL.md ends with a See Also list (fundamentals, materials, shaders, animation, loaders, performance), but nothing requires them.

Which three.js version does it target?

three.js r186 (three@0.186). The README says the skills were checked against the published package and the official Migration Guide.

When should I use instancing or batching?

The skill covers InstancedMesh for many copies of one shape and BatchedMesh for different geometries, and points to threejs-performance for choosing by measured draw calls.

Is it safe to install?

It is one Markdown file with code examples and no scripts, so it only adds instructions for Claude. Review the code Claude writes from it as you would any generated code.

Information

updated Nov 2, 2026

Repository
cloudai-x/threejs-skills
Folder
skills/threejs-geometry

cloudai-x/threejs-skillsskills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 2
  1. github.com · github.com
  2. github.com · github.com

Updated Nov 2, 2026.