threejs-helpers
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.
- Installs
- 379
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/full-stack-skills/threejs-skills --skill threejs-helpers- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads threejs-helpers automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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
FAQ
What does the threejs-helpers skill do?
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.
How do I install threejs-helpers?
Run npx skills add https://github.com/full-stack-skills/threejs-skills --skill threejs-helpers in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/threejs-helpers/ (personal) or .claude/skills/threejs-helpers/ (project).
Which AI agents can use threejs-helpers?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is threejs-helpers safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains threejs-helpers?
It is published by full-stack-skills in full-stack-skills/threejs-skills. It has 379 recorded installs.
More from full-stack-skills/threejs-skills
threejs-animation
full-stack-skills/threejs-skills
three.js keyframe animation system: AnimationMixer, AnimationClip, AnimationAction, KeyframeTrack variants, PropertyBinding, PropertyMixer, AnimationObjectGroup, AnimationUtils; mixing and crossfading clips, loop modes, timeScale, weight; addon AnimationClipCreator and CCDIKSolver for procedural rigs. Use when playing glTF clips, blending actions, or authoring procedural tracks; for skin deformation rigging on meshes see threejs-objects; for math interpolants without clips see threejs-math only when not tied to AnimationMixer.
threejs-camera
full-stack-skills/threejs-skills
three.js cameras: Camera base, PerspectiveCamera, OrthographicCamera, CubeCamera, ArrayCamera, StereoCamera; projection matrices, aspect, FOV, orthographic frustum sizes, near/far planes, and dynamic environment maps with CubeCamera. Use when placing views, rendering reflections, or multi-view splits; for XR projections and eye matrices use threejs-webxr; for post pass camera tricks use threejs-postprocessing alongside threejs-renderers.
threejs-postprocessing
full-stack-skills/threejs-skills
Addon screen-space post-processing for three.js using EffectComposer, Pass base class, RenderPass, and stock passes such as UnrealBloomPass, SSAOPass, SSRPass, BokehPass, OutlinePass, FXAAPass/SMAAPass, TAARenderPass, and ShaderPass; references the Shaders addon group for underlying shader modules; contrasts with core PostProcessing class used in node/WebGPU stacks (see threejs-node-tsl and threejs-renderers). Use when building composer chains—not for basic renderer tone mapping alone (threejs-renderers).
threejs-loaders
full-stack-skills/threejs-skills
three.js asset I/O using LoadingManager, Cache, FileLoader, image and texture loaders, GLTFLoader with DRACOLoader and KTX2Loader, and common format loaders under Addons; symmetric exporters such as GLTFExporter and texture/buffer exporters. Use when loading or exporting models, HDR, LUT, fonts, or compressed textures; for runtime Texture object parameters after load use threejs-textures; for scene graph placement use threejs-objects.
threejs-objects
full-stack-skills/threejs-skills
three.js scene graph objects: Object3D transforms and hierarchy, Group, Mesh, InstancedMesh, SkinnedMesh, BatchedMesh, LOD, Line/LineLoop/LineSegments, Points, Sprite, Bone, Skeleton, ClippingGroup; interaction via Raycaster, Layers masks, and EventDispatcher patterns. Merges the former interaction scope—use for picking and layers; for pure vector math without scene graph use threejs-math; for playing skeletal clips use threejs-animation; for frustum culling internals see camera docs.
threejs-materials
full-stack-skills/threejs-skills
Open the skill to read its SKILL.md instructions.
Popular code quality & workflow skills
grill-me
mattpocock/skills
A relentless interview to sharpen a plan or design.
improve-codebase-architecture
mattpocock/skills
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
handoff
mattpocock/skills
Compact the current conversation into a handoff document for another agent to pick up.
domain-modeling
mattpocock/skills
Build and sharpen a project's domain model. Use when discussing codebase terminology, writing or editing a GLOSSARY.md, or recording or editing an ADR.
codebase-design
mattpocock/skills
Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.
diagnosing-bugs
mattpocock/skills
Diagnosis loop for hard bugs and performance regressions. Use when the user says "diagnose"/"debug this", or reports something broken/throwing/failing/slow.