threejs-helpers
Skill9 starsChanged 54 days agoApache-2.0View on GitHub
Debug and visualization helpers in three.js Core Helpers (AxesHelper, GridHelper, CameraHelper, light helpers, SkeletonHelper, bounding box helpers, PlaneHelper, PolarGridHelper, ArrowHelper) and Addons Helpers (VertexNormalsHelper, VertexTangentsHelper, RectAreaLightHelper, LightProbeHelper, ViewHelper, OctreeHelper, TextureHelper, PositionalAudioHelper, AnimationPathHelper, RapierHelper). Use only for development and editor overlays—not for shipping art; for gizmo-style manipulation use threejs-controls.
In this repository21 other files it gives its agents.
- openspec-apply-changeSkill
- openspec-archive-changeSkill
- openspec-exploreSkill
- openspec-proposeSkill
- threejs-animationSkill
- threejs-audioSkill
- threejs-cameraSkill
- threejs-controlsSkill
- threejs-dev-setupSkill
- threejs-geometriesSkill
- threejs-lightsSkill
- threejs-loadersSkill
- threejs-materialsSkill
- threejs-mathSkill
- threejs-node-tslSkill
- threejs-objectsSkill
- threejs-postprocessingSkill
- threejs-renderersSkill
- threejs-scenesSkill
- threejs-texturesSkill
- threejs-webxrSkill
The file
We split this skill into the rules it gives an agent
4 rules. About 0 are common, 3 are distinctive, and 1 is very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈3
Distinctive · estimate
This author's own choices. Worth a look.
1
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 26
Update: when targets move—some helpers need per-frame refresh.
- Very specific: line 29
Addons: import from three/addons/helpers/...
- Distinctive: line 61
When answering under this skill, prefer responses that:
- Distinctive: line 67
Import paths follow threejs-dev-setup addon conventions.
≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
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
- Attach helper to the object it describes (e.g.,
CameraHelper(light.shadow.camera)). - Update when targets move—some helpers need per-frame refresh.
- Remove in production builds or behind debug flags.
- Performance: helpers add draw calls—disable when profiling performance issues.
- Addons: import from
three/addons/helpers/...paths per threejs-dev-setup.
See examples/workflow-light-camera-helpers.md.
Doc map (official)
| Docs section | Representative links |
| Helpers | https://threejs.org/docs/AxesHelper.html |
| Helpers | https://threejs.org/docs/GridHelper.html |
| Helpers | https://threejs.org/docs/CameraHelper.html |
| Helpers | https://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 DEBUGstyle flags. CameraHelperfor shadow cameras must referencelight.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:
- Link the helper class (
AxesHelper,CameraHelper, …) being used. - State that helpers are not shipping art—strip or gate behind debug flags.
- Pair shadow/light helpers with threejs-lights tuning workflows.
- Mention performance cost when many helpers are enabled.
- Import paths follow threejs-dev-setup addon conventions.
References
- Manual (debug workflow context): https://threejs.org/manual/
- Docs index (Helpers group): https://threejs.org/docs/#Helpers
- Examples: https://threejs.org/docs/DirectionalLightHelper.html
Keywords
English: helper, debug, axes, grid, skeleton, normals, light helper, three.js
中文： 辅助、调试、坐标轴、网格、骨架、法线、Helper、three.js
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.