鼠标控制人物移动，实现第三人称视角

在上一篇[xxx]中利用quaternion和 Raycaster 实现了物体移动并转向鼠标点击的位置。对于镜头的控制是在 OribitControl 的基础上，设置 minDistance=0 和 maxDistance=10 实现的「伪镜头跟随」，因为并没有实现镜头观测的方向和物体面朝的方向保持一致。 它更像是一种「上帝视角」，这也是一种应用场景。

该篇将实现真正的镜头跟随，实现一个「第三人称视角」的效果，这在沉浸式场景浏览体验较好。

在 threejs 中，几乎所有创建的物体或者加载的模型都是继承自 Object3D 对象，它们都有 add 方法，可以将其他物体添加为自己的子集。

去掉 OribitControl

这里直接不再使用 OribitControl 控制器，它无法实现第三人称视角效果，并且会干扰接下来的实现过程。

去掉 对象机的控制

注释掉 camera.quaternion.set(toTurn)

MTCtrl.go({
  target: playerMesh,
  destPosition: clickPoint,
  fixedY: 0,
  onStart: () => {},
  onUpdate: (toTurn) => {
    playAction(0);
    // camera.quaternion.set(toTurn);//注释掉，不再用四元数控制像机的方向
  },
  onComplete: () => {
    stopAction();
  },
});

物体添加像机

let playerMesh = null;
gltfLoader.load(
  "/models/player.gltf",
  (gltf) => {
    scene.add(gltf.scene);

    playerMesh = gltf.scene;
    playerMesh.position.set(0, 0, 0);

    /**以下为关键代码 */
    playerMesh.rotateY(Math.PI); // playerMesh旋转180度，面朝屏幕内
    playerMesh.add(camera); //关键代码：playerMesh添加camera为自己的子集，此刻像机就像被定在了playerMesh上，实现实时位置、角度的同步。
    camera.position.set(0, 3, -4); //关键代码：像机设置在playerMesh的身后，这里的Z是负值，是因为「playerMesh旋转了180度，那么此刻朝向我们的这一端是Z轴的负方向了」
    camera.lookAt(new THREE.Vector3(0, 0, -1)); //关键代码：像机观测点，在playerMesh后方1m位置
  },
  (progress) => {},
  (error) => {
    console.error(error);
  }
);

完成上述代码后，就已经实现了视角跟随的「第三人称视角」效果了，可以移动 playerMesh 进行效果测试。 具体原因可看代码的注释！