mcpField
T
threejs-interaction

threejs-interaction

github.com/cesartevisual开发11394 次安装7 周前更新
代码仓库

关于 threejs-interaction

threejs-interaction 是一项用于在 Three.js 项目中实现拾取和控制交互的技能,重点介绍指针与触控操作、坐标处理、选择状态,以及复杂场景中的验证。

主要功能

  1. 01指针与触控交互指南
  2. 02按视口转换坐标
  3. 03射线检测与选择处理
  4. 04拖动与控制器协调
  5. 05交互验证清单

适用场景

  1. 01为 Three.js 场景添加对象拾取
  2. 02实现与变换控制器配合的拖动
  3. 03支持分屏视口中的选择
  4. 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 参考

有关准确的签名和特定版本的行为,请参阅官方文档。如果无法访问文档,请检查已安装的类型定义/源代码,并说明任何尚未解决的不确定性。

评论

支持 Markdown