用途
Three.js Interaction 是一份面向 Three.js 的交互实现参考，用于在 3D 场景中处理用户输入与对象交互。它覆盖从鼠标/触摸拾取、相机控制到对象选择与拖拽的常见需求，适合在 Web 3D 应用中构建可操作的场景。
主要能力
射线检测（Raycaster）
- 通过
raycaster.setFromCamera(mouse, camera)从相机发射射线，实现鼠标拾取。 - 也可用
raycaster.set(origin, direction)从任意原点与方向发射射线。 intersectObjects(objects, recursive)返回交点数组，包含 distance、point、face、faceIndex、object、uv、uv1、normal、instanceId 等字段。- 支持 near/far 裁剪、Line/Points 精度阈值（
params.Line.threshold、params.Points.threshold）以及 layers 过滤。
鼠标与触摸输入
- 提供全窗口与指定 canvas 两种鼠标坐标归一化方式。
- 提供 touchstart 触摸事件处理示例，支持单指拾取。
相机控制器
- OrbitControls：阻尼、旋转/方位角限制、缩放距离限制、自动旋转、目标点设置。
- FlyControls：movementSpeed、rollSpeed、dragToLook，按 delta 更新。
- FirstPersonControls：movementSpeed、lookSpeed、垂直视角约束。
- PointerLockControls：指针锁定、lock/unlock 事件、基于键盘的移动与摩擦。
- TrackballControls：rotateSpeed、zoomSpeed、panSpeed、staticMoving。
- MapControls：阻尼、screenSpacePanning、极角限制。
- TransformControls：移动/旋转/缩放 gizmo，支持 local/world 空间、尺寸设置、dragging-changed 事件与键盘快捷键。
- DragControls：直接拖拽对象，提供 dragstart/drag/dragend 事件。
选择与悬停
- 点击选择：记录 selectedObject，切换 emissive 高亮。
- 框选：使用 SelectionBox 与 SelectionHelper 实现区域选择。
- 悬停效果：mousemove 中切换颜色与光标样式，并保存原始颜色。
坐标转换与输入
- 世界坐标转屏幕坐标（worldToScreen），用于将 HTML 元素定位到 3D 对象上。
- 屏幕坐标转世界坐标（screenToWorld）。
- 射线与平面求交（getRayPlaneIntersection），常用于地面平面定位。
- 键盘输入：通过 keydown/keyup 记录按键状态并驱动移动。
事件处理与性能
- 提供 InteractionManager 类封装事件绑定、鼠标更新、交点获取与可点击对象注册。
- 性能建议：限制射线检测频率（节流 mousemove）、使用 layers 过滤、使用简单碰撞网格、不需要时禁用控制器、批量更新。
使用方式
以 ES Module 方式引入 Three.js 与所需 addons，例如：
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
创建 Raycaster 与鼠标向量，在事件回调中更新鼠标坐标并调用 setFromCamera，再通过 intersectObjects 获取交点并处理。相机控制器需在动画循环中调用 update()（OrbitControls 的阻尼与自动旋转依赖此调用；FlyControls、FirstPersonControls 需传入 delta）。
适用场景
- 3D 场景中的对象点击拾取与选中高亮。
- 需要轨道、飞行、第一人称、指针锁定等不同相机操作方式的应用。
- 编辑器类场景中的对象移动、旋转、缩放与拖拽。
- 需要框选多个对象或悬停反馈的交互界面。
- 需要将 HTML 元素与 3D 对象位置对齐的场景。
限制
资料未提供该技能的安装命令、版本要求、收费方式、平台支持范围或效果保证等信息，暂未提供。具体 API 行为以 Three.js 官方文档为准。