three.js 第一人称

视角控制器 (First Person Controls)

three.js 中有一个非常方便的工具，可以帮助我们在场景中创建第一人称视角。这个工具就是 FirstPersonControls （第一人称控制器）。使用这个控制器，我们可以像在游戏中一样自由地移动视角。

要使用这个控制器，我们需要先加载 three.js 库和 FirstPersonControls.js 文件。然后创建一个 PerspectiveCamera 对象和一个场景 Scene 对象。

接下来，我们需要创建一个 FirstPersonControls 对象，并将它绑定到我们的相机和场景上：

var camera, scene, controls;

camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
scene = new THREE.Scene();

controls = new THREE.FirstPersonControls(camera);
controls.movementSpeed = 100;
controls.lookSpeed = 0.1;
controls.lookVertical = true;

在这里，我们为控制器设置了 movementSpeed （移动速度）和 lookSpeed （视角移动速度），并将 lookVertical （垂直视角移动）设置为 true。

接下来，我们需要在渲染循环中更新控制器的状态：

function render() {
  requestAnimationFrame(render);
  controls.update();
  renderer.render(scene, camera);
}

现在，我们就可以使用 WASD 和方向键来移动视角了：

function onKeyDown(event) {
  switch (event.keyCode) {
    case 38: // up
    case 87: // w
      controls.moveForward(10);
      break;
    case 37: // left
    case 65: // a
      controls.moveLeft(10);
      break;
    case 40: // down
    case 83: // s
      controls.moveBackward(10);
      break;
    case 39: // right
    case 68: // d
      controls.moveRight(10);
      break;
  }
}

在这里，我们为键盘事件添加了一个 onKeyDown 函数，根据按下的键来调用相应的控制器方法。

最后，我们需要将这个 onKeyDown 函数添加到文档的事件监听器中：

document.addEventListener('keydown', onKeyDown, false);

现在，我们就可以在场景中自由地移动视角了。