Three.js 交互实现：射线检测、相机控制与对象拾取 #

解决 3D 场景从“静态渲染”到“动态交互”的跨越：通过射线检测实现精准的对象拾取，并利用多种相机控件构建流畅的用户视角操纵体验。

为什么需要这个技能 #

在 3D 空间中，鼠标点击的是 2D 屏幕，而目标对象处于 3D 坐标系。要实现“点击某个 3D 物体”的功能，不能简单地使用 DOM 事件，而需要通过射线检测（Raycasting）：从相机位置向鼠标点击方向发射一条虚拟射线，计算该射线与哪些 3D 几何体相交。

此外，一个可用的 3D 应用需要灵活的视角切换。掌握不同的相机控件（如 OrbitControls、PointerLockControls）能让用户像在专业软件或游戏中一样，自由地旋转、缩放和移动视角。

适用场景 #

• 3D 产品展示：点击产品零件显示详细信息或更换颜色。
• 数据可视化：在 3D 图表中通过鼠标悬停（Hover）高亮特定数据点。
• 第一人称视角应用：构建 3D 虚拟展厅、简单游戏或建筑漫游。
• 编辑器工具：实现类似 Unity/Blender 的物体平移、旋转和缩放 Gizmo。

核心工作流 #

1. 实现对象拾取 (Raycasting) #

通过将屏幕 2D 坐标转换为标准设备坐标（-1 到 +1），利用 THREE.Raycaster 检测交点。

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

function onClick(event) {
  // 转换为标准设备坐标
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObjects(scene.children);

  if (intersects.length > 0) {
    console.log("选中对象:", intersects[0].object);
  }
}

2. 配置相机操纵 (Controls) #

根据应用类型选择控件：

• OrbitControls：围绕目标点旋转，适用于产品展示。
• PointerLockControls：锁定鼠标，适用于第一人称视角。
• FirstPersonControls：简单的前向移动与视角转动。

3. 增强交互体验 #

• TransformControls：添加坐标轴辅助器，实现对象的精准移动、旋转和缩放。
• DragControls：允许用户直接在场景中拖拽 3D 物体。
• 坐标转换：使用 vector.project(camera) 将 3D 世界坐标转换为 2D 屏幕坐标，从而在 3D 物体上方悬浮 HTML UI 标签。

下载和安装 #

下载 threejs-interaction 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要 #

暂无推荐