VR - 3DOF 指向选择

注意：本页示例需要支持 VR 的设备和一个指向设备。如果没有，它们将无法工作。请参阅这篇文章了解原因。

在上一篇文章中，我们介绍了一个非常简单的 VR 示例，用户可以通过注视来选择物体。在本文中，我们将更进一步，让用户使用一个指向设备来选择。

Three.js 提供了两个 VR 控制器对象，从而相对容易地处理单个 3DOF 控制器或两个 6DOF 控制器的情况。每个控制器都是一个 Object3D 对象，可以提供控制器的朝向和位置。它们还会在用户开始按下、正在按下和松开控制器主按钮时，分别触发 selectstart、select 和 selectend 事件。

从上一个示例开始，让我们将 PickHelper 更改为 ControllerPickHelper。

新的实现会在选中对象时发出一个 select 事件。我们只需像这样使用它：

const pickHelper = new ControllerPickHelper(scene);
pickHelper.addEventListener('select', (event) => {
  event.selectedObject.visible = false;
  const partnerObject = meshToMeshMap.get(event.selectedObject);
  partnerObject.visible = true;
});

请记住，我们在之前的代码中使用了 meshToMeshMap 来将立方体与球体进行映射。这样我们就可以通过一个对象来查找与之对应的另一个对象。在这里，我们只是隐藏了被选中的对象，并显示其对应对象。

关于 ControllerPickHelper 的具体实现，首先我们需要将 VR 控制器对象添加到场景中，并为它们添加一些 3D 线条，以可视化用户的指向方向。我们会保存这些控制器和线条。

class ControllerPickHelper {
  constructor(scene) {
    const pointerGeometry = new THREE.BufferGeometry().setFromPoints([
      new THREE.Vector3(0, 0, 0),
      new THREE.Vector3(0, 0, -1),
    ]);

    this.controllers = [];
    for (let i = 0; i < 2; ++i) {
      const controller = renderer.xr.getController(i);
      scene.add(controller);

      const line = new THREE.Line(pointerGeometry);
      line.scale.z = 5;
      controller.add(line);
      this.controllers.push({controller, line});
    }
  }
}

即使没有其他任何操作，仅仅这样设置，我们就可以在场景中看到一条或两条线，显示出用户的指向设备的位置和方向。

但我们面临一个问题，我们并不希望 RayCaster 本身去拾取这些线条。一个简单的解决方案是，将可拾取对象与不可拾取对象分开，方法是将它们分别放到不同的 Object3D 父对象下面。

const scene = new THREE.Scene();
+// 用于放置可拾取对象，以便将其与不可拾取对象分离
+const pickRoot = new THREE.Object3D();
+scene.add(pickRoot);

...

function makeInstance(geometry, color, x) {
  const material = new THREE.MeshPhongMaterial({color});

  const cube = new THREE.Mesh(geometry, material);
-  scene.add(cube);
+  pickRoot.add(cube);

...

接下来让我们添加一些代码，用来通过控制器进行拾取。这是我们第一次通过非相机的方式进行拾取。在我们关于拾取的文章中，用户使用鼠标或手指进行拾取，射线从相机出发，穿过屏幕。在上一篇文章中，我们是根据用户的注视方向进行拾取，也就是依赖相机方向。而这次，我们是从控制器的位置出发进行拾取，不再使用相机。

class ControllerPickHelper {
  constructor(scene) {
+    this.raycaster = new THREE.Raycaster();
+    this.objectToColorMap = new Map();
+    this.controllerToObjectMap = new Map();
+    this.tempMatrix = new THREE.Matrix4();

    const pointerGeometry = new THREE.BufferGeometry().setFromPoints([
      new THREE.Vector3(0, 0, 0),
      new THREE.Vector3(0, 0, -1),
    ]);

    this.controllers = [];
    for (let i = 0; i < 2; ++i) {
      const controller = renderer.xr.getController(i);
      scene.add(controller);

      const line = new THREE.Line(pointerGeometry);
      line.scale.z = 5;
      controller.add(line);
      this.controllers.push({controller, line});
    }
  }
+  update(pickablesParent, time) {
+    this.reset();
+    for (const {controller, line} of this.controllers) {
+      // 从控制器发射一条射线
+      this.tempMatrix.identity().extractRotation(controller.matrixWorld);
+      this.raycaster.ray.origin.setFromMatrixPosition(controller.matrixWorld);
+      this.raycaster.ray.direction.set(0, 0, -1).applyMatrix4(this.tempMatrix);
+      // 获取射线与对象的交集
+      const intersections = this.raycaster.intersectObjects(pickablesParent.children);
+      if (intersections.length) {
+        const intersection = intersections[0];
+        // 调整线条长度，使其刚好触碰到对象
+        line.scale.z = intersection.distance;
+        // 选中第一个对象（最近的）
+        const pickedObject = intersection.object;
+        // 保存控制器选中的对象
+        this.controllerToObjectMap.set(controller, pickedObject);
+        // 如果尚未高亮该对象，则进行高亮
+        if (this.objectToColorMap.get(pickedObject) === undefined) {
+          // 保存其原始颜色
+          this.objectToColorMap.set(pickedObject, pickedObject.material.emissive.getHex());
+          // 设置为闪烁的红色/黄色
+          pickedObject.material.emissive.setHex((time * 8) % 2 > 1 ? 0xFF2000 : 0xFF0000);
+        }
+      } else {
+        line.scale.z = 5;
+      }
+    }
+  }
}

就像之前一样，我们使用了 Raycaster，不过这次射线是从控制器发出的。在以前的 PickHelper 中，只有一个拾取点（相机），但这里我们有两个控制器，每个都可能在拾取对象。我们在 controllerToObjectMap 中保存每个控制器所指向的对象，同时在 objectToColorMap 中保存对象原本的高光颜色，并让射线刚好触碰到对象表面。

我们需要添加代码，在每一帧重置这些设置。

class ControllerPickHelper {

  ...

+  _reset() {
+    // 恢复颜色
+    this.objectToColorMap.forEach((color, object) => {
+      object.material.emissive.setHex(color);
+    });
+    this.objectToColorMap.clear();
+    this.controllerToObjectMap.clear();
+  }
  update(pickablesParent, time) {
+    this._reset();

    ...

}

接下来，我们希望在用户点击控制器时触发一个 select 事件。为此，我们可以扩展 three.js 的 EventDispatcher，然后监听来自控制器的 select 事件，如果控制器当前指向某个对象，就向外派发一个带有该对象的自定义 select 事件。

-class ControllerPickHelper {
+class ControllerPickHelper extends THREE.EventDispatcher {
  constructor(scene) {
+    super();
    this.raycaster = new THREE.Raycaster();
    this.objectToColorMap = new Map();  // 保存颜色和被选中对象
    this.controllerToObjectMap = new Map();
    this.tempMatrix = new THREE.Matrix4();

    const pointerGeometry = new THREE.BufferGeometry().setFromPoints([
      new THREE.Vector3(0, 0, 0),
      new THREE.Vector3(0, 0, -1),
    ]);

    this.controllers = [];
    for (let i = 0; i < 2; ++i) {
      const controller = renderer.xr.getController(i);
+      controller.addEventListener('select', (event) => {
+        const controller = event.target;
+        const selectedObject = this.controllerToObjectMap.get(controller);
+        if (selectedObject) {
+          this.dispatchEvent({type: 'select', controller, selectedObject});
+        }
+      });
      scene.add(controller);

      const line = new THREE.Line(pointerGeometry);
      line.scale.z = 5;
      controller.add(line);
      this.controllers.push({controller, line});
    }
  }
}

现在我们只需在渲染循环中调用 update 方法即可：

function render(time) {

  ...

+  pickHelper.update(pickablesParent, time);

  renderer.render(scene, camera);
}

只要你有一个带控制器的 VR 设备，就应该能够用控制器来选择物体。

点击这里在新窗口中打开

那如果我们想要能够移动这些物体呢？

其实相对简单。我们只需要把控制器的 select 事件监听器代码提取到一个函数中，以便我们可以用于多个用途。

class ControllerPickHelper extends THREE.EventDispatcher {
  constructor(scene) {
    super();

    ...

    this.controllers = [];

+    const selectListener = (event) => {
+      const controller = event.target;
+      const selectedObject = this.controllerToObjectMap.get(event.target);
+      if (selectedObject) {
+        this.dispatchEvent({type: 'select', controller, selectedObject});
+      }
+    };

    for (let i = 0; i < 2; ++i) {
      const controller = renderer.xr.getController(i);
-      controller.addEventListener('select', (event) => {
-        const controller = event.target;
-        const selectedObject = this.controllerToObjectMap.get(event.target);
-        if (selectedObject) {
-          this.dispatchEvent({type: 'select', controller, selectedObject});
-        }
-      });
+      controller.addEventListener('select', selectListener);

       ...

然后我们将其同时用于 selectstart 和 select 事件：

class ControllerPickHelper extends THREE.EventDispatcher {
  constructor(scene) {
    super();

    ...

    this.controllers = [];

    const selectListener = (event) => {
      const controller = event.target;
      const selectedObject = this.controllerToObjectMap.get(event.target);
      if (selectedObject) {
-        this.dispatchEvent({type: 'select', controller, selectedObject});
+        this.dispatchEvent({type: event.type, controller, selectedObject});
      }
    };

    for (let i = 0; i < 2; ++i) {
      const controller = renderer.xr.getController(i);
      controller.addEventListener('select', selectListener);
      controller.addEventListener('selectstart', selectListener);

       ...

我们还要传递 selectend 事件，这是 three.js 在用户松开控制器按钮时发送的：

class ControllerPickHelper extends THREE.EventDispatcher {
  constructor(scene) {
    super();

    ...

    this.controllers = [];

    const selectListener = (event) => {
      const controller = event.target;
      const selectedObject = this.controllerToObjectMap.get(event.target);
      if (selectedObject) {
        this.dispatchEvent({type: event.type, controller, selectedObject});
      }
    };

+    const endListener = (event) => {
+      const controller = event.target;
+      this.dispatchEvent({type: event.type, controller});
+    };

    for (let i = 0; i < 2; ++i) {
      const controller = renderer.xr.getController(i);
      controller.addEventListener('select', selectListener);
      controller.addEventListener('selectstart', selectListener);
+      controller.addEventListener('selectend', endListener);

       ...

现在我们可以修改代码，使得当我们收到 selectstart 事件时，把被选中的物体从场景中移除，并作为控制器的子对象。这样它就会跟随控制器移动。当我们收到 selectend 事件时，再把它放回原来的位置。

const pickHelper = new ControllerPickHelper(scene);
-pickHelper.addEventListener('select', (event) => {
-  event.selectedObject.visible = false;
-  const partnerObject = meshToMeshMap.get(event.selectedObject);
-  partnerObject.visible = true;
-});

+const controllerToSelection = new Map();
+pickHelper.addEventListener('selectstart', (event) => {
+  const {controller, selectedObject} = event;
+  const existingSelection = controllerToSelection.get(controller);
+  if (!existingSelection) {
+    controllerToSelection.set(controller, {
+      object: selectedObject,
+      parent: selectedObject.parent,
+    });
+    controller.attach(selectedObject);
+  }
+});
+
+pickHelper.addEventListener('selectend', (event) => {
+  const {controller} = event;
+  const selection = controllerToSelection.get(controller);
+  if (selection) {
+    controllerToSelection.delete(controller);
+    selection.parent.attach(selection.object);
+  }
+});

当物体被选中时，我们保存该物体及其原始父级。当用户完成后，我们可以将物体放回原来的地方。

我们使用了 Object3D.attach 来重新设置选中物体的父级。这个函数允许我们在不改变对象位置和朝向的情况下更换其父对象。

有了这些，我们现在就可以使用 6DOF 控制器来移动物体，或者使用 3DOF 控制器来改变它们的朝向。

点击这里在新窗口中打开

说实话，我并不确定这个 ControllerPickHelper 是否是组织代码的最佳方式，但它在展示如何用 Three.js 在 VR 中实现基础交互方面非常实用。