跳转到使用指南
Three.js Interaction作者 CloudAI-X

Three.js Interaction Skill.

使用画布和相机的实际坐标,将手势与目标 3D 对象关联起来。

  • 3D
  • Three.js
来源审查 · Three.js InteractionSKILL.md
任务 3D 产出 • 相对于画布的对象拾取 • 合适的相机控件配置 • 选择、悬停、拖动或变换行为 开始之前 需要一个可运行的 Three.js 项目和渲染器;请根据已安装的版本核对来源示例。其他控件和加载器取决于所选方案。
编辑摘要 · 来源审查于 2026-10-07 · 并非生成的示例

01 功能说明

Three.js Interaction:拾取和操控对象

基于射线的拾取、坐标转换、相机控件、选择和对象操控。

基于来源的工作流程并非执行基准测试

工作方法

Three.js Interaction 涵盖射线投射和控件。它说明屏幕输入如何转化为相机射线、交点如何识别对象或实例,以及为什么嵌入式画布需要自己的坐标转换,而不能假定其占据整个窗口。

相机导航和对象操控是两项不同的工作。轨道、飞行、地图、拖动和变换控件各有不同作用。类似编辑器的场景需要协调这些处理程序,以免拖动模型时相机也随之旋转。

预期交付成果

  • 相对于画布的对象拾取
  • 合适的相机控件配置
  • 选择、悬停、拖动或变换行为
查看示例任务简述

从任务简述到审查

  1. 01
    定义目标

    列出可选择的对象,并确定嵌套网格或实例是否属于独立目标。

  2. 02
    映射输入

    根据画布矩形对指针位置进行归一化,并通过当前相机执行射线投射。

  3. 03
    协调控件

    处理操控期间的导航冲突,并在选择发生变化时恢复反馈。

02 适用场景

适用场景

需要一个可运行的 Three.js 项目和渲染器;请根据已安装的版本核对来源示例。其他控件和加载器取决于所选方案。

适合的用途

  • 产品配置器选择产品部件,并高亮显示该特定对象或对其执行操作。
  • 场景编辑器使用变换或拖动控件来移动、旋转和缩放选中的几何体。

需要检查的限制

  • 无障碍支持需另行处理仅有指针示例并不能证明其支持键盘或辅助技术访问。
  • 需要审查生命周期请在实际应用中核实控件 API,并清理事件处理程序。

请提供这些输入

  • 场景层级结构确定可选择的网格和实例。
  • 画布位置提供实际的嵌入式视图和当前相机。
  • 输入行为明确导航、操控、触摸和替代控件。

03 关键决策

重要决策

  1. 准确归一化

    相对于画布的坐标可防止拾取位置在页面布局中发生偏移。

  2. 交互归属

    禁用相互冲突的控件,可让每个手势都只有一个明确用途。

04 示例任务

尝试一份聚焦的任务简述

下面的示例任务简述尚未经过测试。使用前请检查该技能的设置。

检查设置

将相关的 threejs-skills 目录用作智能体指南。它不是 Three.js 运行时,也不会安装场景资源。

上游源文件
https://github.com/CloudAI-X/threejs-skills/blob/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-interaction/SKILL.md

需要一个可运行的 Three.js 项目和渲染器;请根据已安装的版本核对来源示例。其他控件和加载器取决于所选方案。

从一项交付成果开始

运行该技能前,请调整这份任务简述中的范围、来源材料和约束条件。

示例任务简述
使用 threejs-interaction 为这个嵌入式产品查看器添加选择功能。使用相对于画布的坐标,仅对列出的部件执行射线投射。高亮显示选中的部件,并防止轨道控件与对象拖动相互冲突。另行说明一种键盘替代操作方式。

检查结果

根据以下可观察的标准检查实际输出。

  • 布局变化后,拾取仍保持准确。
  • 拖动时不会使相机沿轨道旋转。
  • 明确处理旧的高亮状态和监听器。

OpenDesign 为编码智能体提供本地设计工作区。此条目并不表示该技能已捆绑提供,也不表示其中包含其外部工具、凭据和软件依赖项。

05 来源与许可证

来源和许可证

本页描述的是下方链接所指向的固定来源修订版本。上游行为和要求可能会发生变化。

来源所有者
CloudAI-X
许可证
尚未确认——复用前请审查上游条款。
已审查的快照
2026-10-07 · b1c623076c66
编辑来源摘要
基于射线的拾取、坐标转换、相机控件、选择和对象操控。

由 OpenDesign 根据链接来源编写的原创摘要。仓库星标数是带有时间属性的受欢迎程度指标,并不代表技能使用量或质量评分。

06 开始前的问题

开始前的问题

它能区分实例吗?

文档中的交点结果包含 InstancedMesh 的 instanceId。

为什么点击可能无法命中嵌入式画布?

一种可能的原因是使用了窗口尺寸,而不是画布矩形。

它是否只涵盖轨道导航?

不是。它讨论了多种相机控制模型,以及对象拖动和变换。

OpenDesign

为下一轮设计迭代留出空间。

将任务简述、来源材料和设计工作集中保存在本地工作区中。将该技能加入工作流程前,请检查其自身设置。

上游源文件
https://github.com/CloudAI-X/threejs-skills/blob/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-interaction/SKILL.md