mcpField
T
threejs-helpers

threejs-helpers

github.com/full-stack-skillsDevelopment10357 installsUpdated 4w ago
Repository

About threejs-helpers

threejs-helpers is a skill for agents answering questions about three.js visualization helpers. It covers choosing, attaching, updating, and removing debug helpers, with attention to performance and production builds.

Key features

  1. 01Guidance on core and addon helpers
  2. 02Helper attachment and refresh practices
  3. 03Debug-only and production-use cautions
  4. 04Performance and transform pitfalls

Use cases

  1. 01Visualizing cameras, lights, and axes
  2. 02Inspecting skeletons, bounds, and mesh normals
  3. 03Planning debug-helper cleanup before release

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/full-stack-skills/threejs-skills --skill threejs-helpers

After installing, type/threejs-helpersin Claude Code to confirm it loaded.

Bundled filesagents/openai.yamlexamples/workflow-light-camera-helpers.md

Details

From the project README

When to use this skill

ALWAYS use this skill when the user mentions:

  • Visualizing axes, grids, camera frusta, shadow cameras, light directions
  • Showing skeleton bones, bounding boxes, normals/tangents for mesh inspection
  • Light probe or rect area visualization via helper classes

IMPORTANT: helpers vs production meshes

  • Helpers are debug objects; do not use as final scene geometry.

Trigger phrases include:

  • "AxesHelper", "GridHelper", "CameraHelper", "SkeletonHelper", "VertexNormalsHelper"
  • "辅助线", "法线显示", "包围盒调试"

How to use this skill

  1. Attach helper to the object it describes (e.g., CameraHelper(light.shadow.camera)).
  2. Update when targets move—some helpers need per-frame refresh.
  3. Remove in production builds or behind debug flags.
  4. Performance: helpers add draw calls—disable when profiling performance issues.
  5. Addons: import from three/addons/helpers/... paths per threejs-dev-setup.

See examples/workflow-light-camera-helpers.md.

Doc map (official)

Docs sectionRepresentative links
Helpershttps://threejs.org/docs/AxesHelper.html
Helpershttps://threejs.org/docs/GridHelper.html
Helpershttps://threejs.org/docs/CameraHelper.html
Helpershttps://threejs.org/docs/SkeletonHelper.html

Scope

  • In scope: Core + Addons helpers for visualization.
  • Out of scope: Production meshes or shipping art (threejs-geometries, threejs-lights); orbit/transform gizmo behavior (threejs-controls); editor UX parity with DCC tools; physics debug beyond helper stubs.

Common pitfalls and best practices

  • Too many helpers obscures view—toggle per subsystem.
  • Wrong attachment parent misaligns helper transforms.
  • Helpers inherit scene graph transforms—parent under a debug group to batch hide/show.
  • Some helpers duplicate geometry cost; strip in production or use #ifdef DEBUG style flags.
  • CameraHelper for shadow cameras must reference light.shadow.camera, not the main view camera.

Documentation and version

Helpers are listed under Helpers (core) and Addons → Helpers in three.js docs. They are for debug only; production meshes and lighting should use real geometry/lights (threejs-geometries, threejs-lights).

Agent response checklist

When answering under this skill, prefer responses that:

  1. Link the helper class (AxesHelper, CameraHelper, …) being used.
  2. State that helpers are not shipping art—strip or gate behind debug flags.
  3. Pair shadow/light helpers with threejs-lights tuning workflows.
  4. Mention performance cost when many helpers are enabled.
  5. Import paths follow threejs-dev-setup addon conventions.

References

Keywords

English: helper, debug, axes, grid, skeleton, normals, light helper, three.js

中文： 辅助、调试、坐标轴、网格、骨架、法线、Helper、three.js

Comments

Markdown supported