102.3K+Download
Skip to the usage guide
Three.js Geometryby CloudAI-X

Three.js Geometry Skill.

Choose a shape representation before adding surface styling or animation.

  • 3D
  • Three.js
Download OpenDesignView Usage Guide
Source Review · Three.js GeometrySKILL.md
Task 3D Produces • Primitive, extruded, or custom geometry • Checked position, normal, index, and UV attributes • An instancing or merging plan for repeated shapes Before You Start A working Three.js project and renderer; verify source examples against the installed release. Additional controls and loaders depend on the chosen path.
Editorial summary · source reviewed 2026-10-07 · not a generated example

01 What It Does

Three.js Geometry: Build Meshes and Repeated Shapes

Shape constructors, custom BufferGeometry attributes, instancing, geometry utilities, and disposal.

Source-based workflowNot an execution benchmark

The Working Approach

Three.js Geometry covers primitives, path-based forms, custom vertex buffers, points, lines, and repeated meshes. Its focus is structural: positions and indices, surface normals, texture coordinates, and the relationship between geometric detail and rendering work.

The source moves from boxes and spheres to extrusion, tubes, text, and InstancedMesh. It is relevant both to authoring a custom form and to diagnosing expensive repetition. The resulting mesh still needs inspection; examples are not proof of a production-ready asset.

Expected Deliverables

  • Primitive, extruded, or custom geometry
  • Checked position, normal, index, and UV attributes
  • An instancing or merging plan for repeated shapes
See the Example Brief

From Brief to Review

  1. 01
    Choose a Representation

    Use a primitive or path-based form when it expresses the shape; reserve custom buffers for finer control.

  2. 02
    Inspect the Mesh

    Check dimensions, triangle orientation, normals, and bounds before judging its material.

  3. 03
    Reduce Repetition Cost

    Use appropriate instancing or compatible static merging, and release unused geometry.

02 When to Use It

When to Use It

A working Three.js project and renderer; verify source examples against the installed release. Additional controls and loaders depend on the chosen path.

A Good Fit

  • Custom FormsUseful for extruded profiles, lathe shapes, tubes, or hand-authored vertices.
  • Repeated ObjectsInstancing suits copies sharing geometry while varying transform or color.

Limits to Check

  • Not a Sculpting ToolThe skill supplies code patterns rather than an interactive modeling package.
  • Detail Is Not FreeMore segments can improve a silhouette while increasing rendering work.

Bring These Inputs

  • Shape DefinitionSupply dimensions, profile points, or a form reference.
  • Surface NeedsIdentify lighting and texture requirements.
  • RepetitionState how many objects share geometry and what varies.

03 Decisions That Matter

Decisions That Matter

  1. Topology Before Appearance

    Bad attributes can resemble a material defect; inspect the mesh data first.

  2. Copies Without Duplication

    Instancing is a distinct representation for many matching shapes.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Setup

Use the relevant threejs-skills directory as agent guidance. It is not the Three.js runtime and does not install scene assets.

Upstream Source File
https://github.com/CloudAI-X/threejs-skills/blob/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-geometry/SKILL.md

A working Three.js project and renderer; verify source examples against the installed release. Additional controls and loaders depend on the chosen path.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief
Use threejs-geometry to build display stands from this profile. Choose extrusion or lathe geometry, inspect normals and bounds, and use instancing if the stands share a mesh. Explain which parameter changes require rebuilding geometry.

Inspect the Result

Check the actual output against these observable criteria.

  • The silhouette follows the input profile.
  • Normals and bounds remain consistent after edits.
  • Repeated objects use a justified representation.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesignRead the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner
CloudAI-X
Repository
CloudAI-X/threejs-skills
Skill File
skills/threejs-geometry/SKILL.md
License
Not confirmed — review the upstream terms before reuse.
Reviewed Snapshot
2026-10-07 · b1c623076c66
Editorial Source Summary
Shape constructors, custom BufferGeometry attributes, instancing, geometry utilities, and disposal.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Does it cover 3D text?

Yes. TextGeometry examples include loading a typeface, bevel settings, and centering.

When is instancing appropriate?

When copies share geometry and differ through per-instance transforms or colors.

Why update bounds after vertex edits?

Spatial information must remain consistent with the mesh's changed positions.

OpenDesign

Make Room for the Next Design Iteration.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesignBrowse Design Skills
Upstream Source File
https://github.com/CloudAI-X/threejs-skills/blob/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-geometry/SKILL.md