关于 threejs-objects
threejs-objects 是用于解答 three.js 场景图与对象问题的技能，涵盖对象变换、网格类型、射线拾取和图层，并说明相关问题的处理边界。
主要功能
- 01场景图与对象变换
- 02静态、实例化及骨骼网格
- 03射线拾取
- 04基于图层控制可见性
- 05对象释放建议
适用场景
- 01用 Group 和变换组织对象
- 02使用 Raycaster 选择场景对象
- 03按图层筛选相机和对象的可见性
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/threejs-objects确认已加载。
附带文件agents/openai.yamlexamples/workflow-raycaster-pick.md
详细介绍
何时使用此技能
用户提到以下内容时，始终使用此技能：
- 父子关系、
position/rotation/scale、matrixAutoUpdate、updateMatrixWorld - 选择网格类型：静态、实例化、蒙皮或批处理 LOD
- 拾取：
Raycaster.setFromCamera、intersectObjects、递归标志、face/uv 结果 - 图层：针对摄像机/灯光/对象的选择性可见性
重要：对象与数学
| 需求 | 技能 |
|---|---|
| 场景图 + 拾取 | threejs-objects |
| 仅盒体/射线数学 | threejs-math |
触发短语包括：
- “Object3D”、“InstancedMesh”、“SkinnedMesh”、“Raycaster”、“layers”
- “父子节点”、“射线拾取”、“图层”
如何使用此技能
- 使用
Group和变换来构建场景；尽可能减少层级深度。 - 实例化：设置每个实例的矩阵；理解
count和视锥体剔除行为。 - SkinnedMesh：绑定骨架；动画片段参见 threejs-animation；蒙皮材质标志参见 threejs-materials。
- 拾取：将设备坐标归一化，从摄像机设置射线，按图层筛选，并对交点排序。
- 事件：在自定义对象上使用
EventDispatcher——仅介绍模式，不涉及 DOM 框架。 - 裁剪：用户需要分段剖切时，按文档使用
ClippingGroup。 - 释放资源：永久移除对象时，释放几何体/材质/纹理。
参见 examples/workflow-raycaster-pick.md。
文档索引（官方）
| 文档章节 | 代表性链接 |
|---|---|
| 核心 | https://threejs.org/docs/Object3D.html |
| 对象 | https://threejs.org/docs/Mesh.html |
| 对象 | https://threejs.org/docs/InstancedMesh.html |
| 核心 | https://threejs.org/docs/Raycaster.html |
范围
- 范围内： Object3D 场景图、可渲染对象类型、光线投射、图层、事件分发器基础知识。
- 范围外： 物理引擎；XR 输入映射（threejs-webxr）。
常见陷阱和最佳实践
- 对移动对象执行世界空间射线测试前，忘记调用
updateMatrixWorld。 - 未设置
layers的 Raycaster 会拾取意外对象——在摄像机和对象上保持图层掩码一致。 - InstancedMesh 的射线拾取命中需要按实例处理——请查阅对应版本的文档。
文档和版本
Object3D、网格类型、Raycaster 和 Layers 的文档位于 three.js 文档中的 Objects 和 Core 章节。拾取和图层的行为可能会有细微变化——请链接到与用户所用 three.js 版本对应的具体页面。
Agent 回复检查清单
使用此技能回答时，优先采用以下做法：
- 根据需要链接
Object3D、Mesh、InstancedMesh、Raycaster或Layers。 - 将骨骼动画与 threejs-animation 及蒙皮网格设置结合介绍。
- 对不涉及场景图的纯线性代数问题，转交给 threejs-math。
- 涉及会话/控制器时，将 XR 输入问题转交给 threejs-webxr。
- 永久移除对象时，提醒调用
dispose()释放几何体/材质。
参考资料
- https://threejs.org/docs/Object3D.html
- https://threejs.org/docs/Raycaster.html
- https://threejs.org/docs/Layers.html
- https://threejs.org/docs/InstancedMesh.html
关键词
英文： object3d、mesh、instancedmesh、skinnedmesh、raycaster、layers、scene graph、three.js
中文： 场景图、Object3D、Mesh、实例化、骨骼网格、射线拾取、图层、three.js
评论
支持 Markdown