关于 threejs-interaction
threejs-interaction 是一项用于在 Three.js 项目中实现拾取和控制交互的技能,重点介绍指针与触控操作、坐标处理、选择状态,以及复杂场景中的验证。
主要功能
- 01指针与触控交互指南
- 02按视口转换坐标
- 03射线检测与选择处理
- 04拖动与控制器协调
- 05交互验证清单
适用场景
- 01为 Three.js 场景添加对象拾取
- 02实现与变换控制器配合的拖动
- 03支持分屏视口中的选择
- 04检查触控和键盘交互行为
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ cesartevisual/ threejs-skills --skill threejs-interaction安装后在 Claude Code 中输入/threejs-interaction确认已加载。
详细介绍
拾取与控件
使用项目已安装的版本和现有架构。这些说明是对用户任务的补充;不授权进行无关更改或执行外部操作。
根据任务选择控件,并保留交互区域以外的常规页面滚动。为重要操作定义指针、触控、键盘和 HTML 等效方式。将选择状态保存在应用状态中,并以稳定 ID 为键,而非仅使用临时网格索引。
使用实际事件视口矩形转换客户端坐标:x = 2 * (clientX - left) / width - 1;y = 1 - 2 * (clientY - top) / height。对于剪裁视图,使用该视图的矩形。忽略尺寸为零的视图。仅对相关根节点/图层进行射线检测,并考虑后代对象、实例 ID 以及正面/背面行为。
通过移动距离阈值区分点击和拖动。在拖动超出画布范围时使用指针捕获;处理 pointercancel 和 lost capture。当对象操作接管手势时,暂时暂停轨道控件,并在所有退出路径中恢复它们。
对于拖动平面和变换操纵器,将世界坐标结果转换到对象的父级空间。根据使用场景调整缩放约束和命中容差。可见的着色器变形可能与 CPU 射线检测结果不匹配;必要时使用代理几何体或其他拾取方法。
将开销较大的悬停处理节流到渲染帧,复用分配的资源,并释放控件/监听器。验证偏移画布、触控取消、嵌套变换、遮挡、键盘选择,以及列表更新后选择实例的功能。
API 参考
有关准确的签名和特定版本的行为,请参阅官方文档。如果无法访问文档,请检查已安装的类型定义/源代码,并说明任何尚未解决的不确定性。