Three.js 相机和运动绑定到对象

Question

我使用了三个指针锁定控件作为对象的控件，并且还使用了透视相机，但是当我将它们都添加到对象时，只添加了其中一个，这取决于我首先添加的是哪一个。同样作为一个初学者，我不熟悉如何移动对象，当我使用 WASD 键时，我移动的方向也会随着相机移动的角度旋转。这里只有重要的代码片段。

当我移动我的对象时，它只向北、E、S、W 方向移动，但当我移动我的相机时，它仍然在它产生时的方向移动，而不是改变方向的角度所以如果我瞄准东方并且我向前移动它会向北。

此外，当我向任何方向移动时，对象会移回 0、0、0

 function e() {
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);

    scene = new THREE.Scene();

    scene.background = new THREE.Color(0xffffff);

    var playerGeometry = new THREE.BoxBufferGeometry(10, 40, 10);
    playerGeometry = playerGeometry.toNonIndexed(); // ensure each face has unique vertices

    var playerMaterial = new THREE.MeshPhongMaterial({
      specular: 0xffffff,
      flatShading: true,
      vertexColors: THREE.VertexColors
    });

    window.player = new THREE.Mesh(playerGeometry, playerMaterial);

    console.log(player);

    window.player.add(camera);
    camera.position.set(0, 20, 20); 
    
     controls = new THREE.PointerLockControls(camera);
     window.player.add(controls.getObject());
    scene.add(player);
    objects.push(player);
    }
    
    
  ========================================================================= // Then the animation, these are just snippets not ofc the whole thing
    
    function animate() {

    requestAnimationFrame(animate);

    if (controls.enabled) {
      raycaster.setFromCamera(direction, camera);

      var time = performance.now();
      var delta = (time - prevTime) / 1000;

      velocity.x -= velocity.x * 10.0 * delta;
      velocity.z -= velocity.z * 10.0 * delta;
      velocity.y -= 3.8 * 100.0 * delta; // 100.0 = mass

      if (window.player.position) {
      window.player.position.z = Number(keys[87]) - Number(keys[83]);
      window.player.position.x = Number(keys[65]) - Number(keys[68]);
      window.player.position.normalize(); // this ensures consistent movements in all directions

      if (keys[87] || keys[83])  window.player.position.z -= window.player.position.z * 400.0 * delta;
      if (keys[65] || keys[68])  window.player.position.x -= window.player.position.x * 400.0 * delta;
      if (keys[32]) velocity.y = 200;
      }
      controls.getObject().translateX(velocity.x * delta);
      controls.getObject().translateY(velocity.y * delta);
      controls.getObject().translateZ(velocity.z * delta);

      if (controls.getObject().position.y < 10) {
        velocity.y = 0;
        controls.getObject().position.y = 10;
        canJump = true;
      }

      prevTime = time;

      if (camControls) camControls.update(delta);
    }

    renderer.render(scene, camera);

  }

Answer 1

如果我正确理解您的要求，您应该能够通过对代码进行以下调整（即在if (window.player.position) 块内）来实现所需的相机移动。

这里的关键思想是，您应该通过从相机方向本身派生的区域的方向向量来更新相机的位置。这可以确保相机沿着正确的路径移动，相对于相机的当前方向：

if (window.player.position) {
/* 
  Avoid this logic

  window.player.position.z = Number(keys[87]) - Number(keys[83]);
  window.player.position.x = Number(keys[65]) - Number(keys[68]);
  window.player.position.normalize(); // this ensures consistent movements in 
  all directions
*/

/* Extract the forward facing vector from your camera. This gives us a vector
   by which when can move forward relative to the camera's current pointing 
   direction */
var forward = new THREE.Vector3()
camera.getWorldDirection (forward)

/* Extract a vector that is pointing to the right of the camera's current 
   direction. This gives us a vector that we can move left/right (strafe) on,
   relative to the camera's current direction */
var right = new THREE.Vector3().crossVectors(camera.up, forward)

// Normalize the vectors to unit length for ensure predictable camera movement
forward.normalize()
right.normalize()

if (keys[87])  {

  /* Add "velocity" vector to the player's current position, based on
     camera forward direction */
  window.player.position.addScaledVector(forward, 1.0 * delta); 
}

if (keys[83])  {

  /* Add "velocity" vector to the player's current position, based on 
     camera backward direction (ie -1.0) */
  window.player.position.addScaledVector(forward, -1.0 * delta); 
}

if (keys[65]) { 

  /* Add "strafe" vector to the player's current position, based on
     camera right direction */
  window.player.position.addScaledVector(right, 1.0 * delta);
}

if (keys[68]) { 

  /* Add "strafe" vector to the player's current position, based on
     camera left direction (ie -1.0) */
  window.player.position.addScaledVector(right, -1.0 * delta);
}

if (keys[32]) velocity.y = 200;

}

// -- ADD TO ACHIEVE THIRD PERSON CAMERA --

// These vectors store temporary data for out 3rd person camera behaviour
const playerPosition = new THREE.Vector3()
const cameraPosition = new THREE.Vector3()

// Get the players position, and cameras position
window.player.getWorldPosition(playerPosition)
camera.getWorldPosition(cameraPosition)

// Calculate a vector that will offset the camera, based on the player's 
// current position. This is based on the current direction vector from
// the camera to the player
const cameraOffset = new THREE.Vector3().subVectors(playerPosition, cameraPosition)

// Set the distance between player and third person view. Change 5.0 to something smaller to bring
// camera closer to player
cameraOffset.setLength(5.0) 

// Calculate the camera's new positions
const newCameraPosition = new THREE.Vector3().addVectors(playerPosition, cameraOffset)

// Update the camera's lookat object (player) and position (to achieve
// third person effect)
camera.lookAt(playerPosition)
camera.position.copy(newCameraPosition)

希望这会有所帮助:-)