Babylon.js学习之路《七、用户交互：鼠标点击、拖拽与射线检测》

---

1. 引言：用户交互的核心作用

• 上一章详解灯光与阴影，材质与纹理的相关知识。
• 这一章详细介绍一下Babylon中，用户交互：鼠标点击、拖拽与射线检测。

1.1 材质与纹理的核心作用

• 核心作用：
  • 让用户与3D场景中的物体动态互动（如点击按钮、拖拽物体、触发事件）。
  • 提升沉浸感：交互是游戏、数据可视化、虚拟展厅的核心功能。
• 案例对比：
  • 无交互：静态场景，用户只能被动观察。
  • 有交互：点击物体弹出信息、拖拽旋转模型、射线检测选中目标。

---

2. 基础交互：鼠标与触摸事件

2.1 绑定鼠标点击事件

• Babylon.js 的 ActionManager：
  通过事件管理器简化交互逻辑，支持点击、悬停、拖拽等事件。

• 代码示例：点击立方体变色

  const box = BABYLON.MeshBuilder.CreateBox("box", {}, scene);box.actionManager = new BABYLON.ActionManager(scene);// 绑定点击事件box.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, // 触发条件：点击() => {box.material.diffuseColor = BABYLON.Color3.Random(); // 随机颜色}));
  

2.2 触摸事件适配

• 移动端兼容性：
  Babylon.js 自动处理触摸事件，无需额外代码。

• 示例：双指缩放与旋转：

    camera.attachControl(canvas, true); // 启用触控支持camera.inputs.add(new BABYLON.FreeCameraTouchInput()); // 添加触控输入
  

---

3. 射线检测（Ray Casting）

3.1 射线检测的原理

• 核心机制：
  从屏幕点击位置向3D场景发射一条射线，检测与物体的碰撞点。

• 代码实现：点击选中物体

    scene.onPointerDown = (evt, pickResult) => {if (pickResult.hit) {const hitMesh = pickResult.pickedMesh;// 高亮选中物体hitMesh.material.emissiveColor = BABYLON.Color3.Yellow();}};
  

3.2 高级射线检测技巧

• 筛选检测目标：
  仅检测特定类型的物体（如可交互的按钮）。

    const ray = new BABYLON.Ray(camera.position, scene.pointerX, scene.pointerY // 从屏幕坐标生成射线方向);const predicate = (mesh) => mesh.name.startsWith("interactive_"); // 仅检测名称前缀为 interactive_ 的物体const hit = scene.pickWithRay(ray, predicate);
  

• 长按检测与连续触发：

    let isHolding = false;scene.onPointerObservable.add((pointerInfo) => {if (pointerInfo.type === BABYLON.PointerEventTypes.POINTERDOWN) {isHolding = true;// 开始长按检测const interval = setInterval(() => {if (!isHolding) clearInterval(interval);// 持续触发逻辑（如充能效果）}, 100);} else if (pointerInfo.type === BABYLON.PointerEventTypes.POINTERUP) {isHolding = false;}});
  

---

4. 拖拽物体的实现

4.1 拖拽基础：平面拖拽

• 步骤分解：
  1. 按下时：检测是否选中物体，记录初始位置。
  2. 移动时：根据鼠标位移更新物体位置。
  3. 释放时：结束拖拽。

• 代码示例：

    let draggedMesh = null;
  let startPosition = null;scene.onPointerDown = (evt, pickResult) => {
  if (pickResult.hit) {draggedMesh = pickResult.pickedMesh;startPosition = draggedMesh.position.clone();
  }
  };scene.onPointerMove = () => {
  if (draggedMesh) {const ray = scene.createPickingRay(scene.pointerX, scene.pointerY);const hit = scene.pickWithRay(ray);if (hit.pickedPoint) {// 在平面上拖拽（Y轴固定）draggedMesh.position.x = hit.pickedPoint.x;draggedMesh.position.z = hit.pickedPoint.z;}
  }
  };scene.onPointerUp = () => {
  draggedMesh = null;
  };
  

4.2 3D 空间自由拖拽

• 基于射线与碰撞点：

    scene.onPointerMove = () => {if (draggedMesh) {const ray = scene.createPickingRay(scene.pointerX, scene.pointerY);const hit = scene.pickWithRay(ray);if (hit.pickedPoint) {draggedMesh.position = hit.pickedPoint; // 直接移动到碰撞点}}};
  

4.3 拖拽限制（轴向锁定、范围限制）

• 限制拖拽方向：

    // 只允许沿 X 轴拖拽draggedMesh.position.x = hit.pickedPoint.x;draggedMesh.position.y = startPosition.y; // 固定 Y 轴draggedMesh.position.z = startPosition.z; // 固定 Z 轴
  

• 限制拖拽范围：

    draggedMesh.position.x = Math.min(10, Math.max(-10, hit.pickedPoint.x)); // X 轴范围 [-10, 10]
  

---

5. 高级交互技巧

5.1 组合交互：拖拽 + 旋转/缩放

• 拽时旋转物体：

  let time = 0;scene.registerBeforeRender(() => {material.diffuseColor = new BABYLON.Color3(Math.sin(time) * 0.5 + 0.5, // R通道Math.cos(time) * 0.5 + 0.5, // G通道0.5                         // B通道);time += 0.02;});

5.2 交互反馈设计

• 悬停高亮：

    mesh.actionManager.registerAction(new BABYLON.SetValueAction(BABYLON.ActionManager.OnPointerOverTrigger,mesh.material,"emissiveColor",BABYLON.Color3.White() // 悬停时发光));mesh.actionManager.registerAction(new BABYLON.SetValueAction(BABYLON.ActionManager.OnPointerOutTrigger,mesh.material,"emissiveColor",BABYLON.Color3.Black() // 恢复原色));
  

5.3 性能优化

• 减少射线检测频率：

    let lastCheck = 0;scene.onPointerMove = () => {if (Date.now() - lastCheck > 100) { // 每 100ms 检测一次const hit = scene.pick(scene.pointerX, scene.pointerY);lastCheck = Date.now();}};
  

• 使用 Octree 加速检测：

    scene.createOrUpdateSelectionOctree(); // 创建空间索引const hit = scene.pickWithRay(ray, (mesh) => true, true); // 启用 Octree 优化
  

---

6. 实战任务

任务 1：实现可拖拽的拼图游戏

• 目标：拖拽碎片到正确位置后自动吸附。
• 代码要点：

    if (distanceBetween(draggedMesh.position, targetPosition) < 0.5) {draggedMesh.position = targetPosition.clone(); // 自动吸附showSuccessEffect();}
  

任务 2：射线检测射击游戏

• 目标：点击屏幕发射子弹，击中目标后爆炸。
• 代码要点：

    scene.onPointerDown = (evt, pickResult) => {if (pickResult.hit) {const explosion = BABYLON.MeshBuilder.CreateSphere("explosion", { diameter: 2 }, scene);explosion.position = pickResult.pickedPoint;explosion.material = new BABYLON.StandardMaterial("explodeMat", scene);explosion.material.emissiveColor = BABYLON.Color3.Red();setTimeout(() => explosion.dispose(), 500); // 0.5秒后消失}};
  

7. 常见问题与解决方案

7.1 射线检测不准确

• 原因：模型碰撞边界（Bounding Box）与视觉不匹配。
• 解决：
  • 为复杂模型设置精确碰撞体

    mesh.checkCollisions = true;mesh.ellipsoid = new BABYLON.Vector3(1, 2, 1); // 自定义碰撞范围
  

7.2 拖拽时物体穿透地面

• 解决
  • 启用物理引擎并添加碰撞约束：

      new BABYLON.PhysicsImpostor(mesh, BABYLON.PhysicsImpostor.BoxImpostor, {mass: 1,friction: 0.5}, scene);
  

---

8. 总结与下一章预告

8.1 关键知识点回顾

• 件绑定、射线检测、拖拽逻辑、交互反馈设计。
• 扩展方向：
  • 手势识别：捏合缩放、滑动旋转。
  • VR 交互：通过 WebXR 实现手柄射线交互。
  • 多人协作：通过 WebSocket 同步交互状态。

8.2 下一章预告

• 《动画基础：关键帧动画与缓动效果》：创建简单动画，使用动画曲线（Easing Functions）优化效果。