如何在Three.js中让对象遵循PointerLockControls的方向？

var controls = new THREE.PointerLockControls(camera);

scene.add(controls.getObject());

var element = document.body;

element.addEventListener('mousedown', function () {
  controls.lock();
});

var moveForward = false;
var moveBackward = false;
var moveLeft = false;
var moveRight = false;

document.addEventListener('keydown', function (event) {
  switch (event.keyCode) {
    case 38: // up
    case 87: // w
      moveForward = true;
      break;

    case 37: // left
    case 65: // a
      moveLeft = true;
      break;

    case 40: // down
    case 83: // s
      moveBackward = true;
      break;

    case 39: // right
    case 68: // d
      moveRight = true;
      break;
  }
});

document.addEventListener('keyup', function (event) {
  switch (event.keyCode) {
    case 38: // up
    case 87: // w
      moveForward = false;
      break;

    case 37: // left
    case 65: // a
      moveLeft = false;
      break;

    case 40: // down
    case 83: // s
      moveBackward = false;
      break;

    case 39: // right
    case 68: // d
      moveRight = false;
      break;
  }
});

function animate() {
  requestAnimationFrame(animate);

  if (controls.isLocked) {
    var direction = new THREE.Vector3();

    var velocity = new THREE.Vector3();
    var speed = 0.1;

    direction.z = Number(moveForward) - Number(moveBackward);
    direction.x = Number(moveRight) - Number(moveLeft);
    direction.normalize(); // this ensures consistent movements in all directions

    velocity.x += direction.x * speed;
    velocity.z += direction.z * speed;

    controls.moveRight(velocity.x);
    controls.moveForward(velocity.z);
  }

  renderer.render(scene, camera);
}