javascript - 如何独立于特定相机轴来移动相机？

Question

所以我有来自 https://threejs.org/examples/?q=lock#misc_controls_pointerlock 的代码示例，但非常最小化和简化，没有飞行的立方体和跳跃和其他一些东西:

var camera, scene, renderer, controls;
var objects = [];
var raycaster;
var moveForward = false;
var moveBackward = false;
var moveLeft = false;
var moveRight = false;
var canJump = false;
var prevTime = performance.now();
var velocity = new THREE.Vector3();
var direction = new THREE.Vector3();
var vertex = new THREE.Vector3();
var color = new THREE.Color();

init();
animate();

function init() {
  camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
  camera.position.y = 10;
  scene = new THREE.Scene();
  scene.background = new THREE.Color( 0xffffff );
  scene.fog = new THREE.Fog( 0xffffff, 0, 750 );
  var light = new THREE.HemisphereLight( 0xeeeeff, 0x777788, 0.75 );
  light.position.set( 0.5, 1, 0.75 );
  scene.add( light );
  controls = new THREE.PointerLockControls( camera );

  document.body.addEventListener( 'click', function () {
    controls.lock();
  }, false );

  scene.add( controls.getObject() );
  var onKeyDown = 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;
      case 32: // space
        if ( canJump === true ) velocity.y += 350;
        canJump = false;
        break;
    }
  };
  var onKeyUp = 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;
    }
  };
  document.addEventListener( 'keydown', onKeyDown, false );
  document.addEventListener( 'keyup', onKeyUp, false );
  raycaster = new THREE.Raycaster( new THREE.Vector3(), new THREE.Vector3( 0, - 1, 0 ), 0, 10 );

  // floor
  var floorGeometry = new THREE.PlaneBufferGeometry( 2000, 2000, 100, 100 );
  floorGeometry.rotateX( - Math.PI / 2 );
  floorGeometry = floorGeometry.toNonIndexed(); // ensure each face has unique vertices
  position = floorGeometry.attributes.position;
  var colors = [];
  for ( var i = 0, l = position.count; i < l; i ++ ) {
    color.setHSL( Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
    colors.push( color.r, color.g, color.b );
  }
  floorGeometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
  var floorMaterial = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors } );
  var floor = new THREE.Mesh( floorGeometry, floorMaterial );
  scene.add( floor );

  renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

  window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
  requestAnimationFrame( animate );
  if ( controls.isLocked === true ) {
    var time = performance.now();
    var delta = ( time - prevTime ) / 1000;

    controls.getObject().translateZ(Number( moveBackward ) - Number( moveForward ));
    controls.getObject().translateX(Number( moveRight ) - Number( moveLeft ));

    if ( controls.getObject().position.y < 10 || controls.getObject().position.y > 10 ) {
      controls.getObject().position.y = 10;
    }

    prevTime = time;
  }
  renderer.render( scene, camera );
}

它工作得很好，但是这个例子有一个问题:你往下看得越远，移动得越慢。如果你完全向下看，你就无法移动。

原因是当前代码中的 translateZ 和 translateX 用于移动。 translateZ/X 沿 z/x 轴平移，同时考虑相机 Angular 。

因此，为了解决这个问题，我希望运动几乎独立于相机 Angular 。

一种方法是改变

controls.getObject().translateZ(Number( moveBackward ) - Number( moveForward ));
controls.getObject().translateX(Number( moveRight ) - Number( moveLeft ));

至

controls.getObject().position.z += Number( moveBackward ) - Number( moveForward );
controls.getObject().position.x += Number( moveRight ) - Number( moveLeft );

一开始这似乎工作得很好，但现在剩下的唯一问题是，如果你旋转相机，那么你将不再沿着你看到的方向移动。

如何沿着 z/x 轴移动相机，与相机 Angular 无关，但仍能朝着相机上看到的方向移动？这样，当我向下(或向上)看时，我的移动速度就不会缓慢。

Answer 1

您可以使用controls.getDirection()来获取世界空间中相机的方向。然后，您需要标准化其 x 和 z 分量，以便垂直旋转不会影响您的移动。

对于侧向移动，您应该使用垂直于 d 的其他向量(只需交换其分量并将 y 乘以 -1)。

替换

controls.getObject().translateZ(Number( moveBackward ) - Number( moveForward ));
controls.getObject().translateX(Number( moveRight ) - Number( moveLeft ));

与

var cameraDirection = new THREE.Vector3();
controls.getDirection(cameraDirection);

var d = new THREE.Vector2(
    cameraDirection.x,
    cameraDirection.z
);

d.normalize();

controls.getObject().position.x -= d.x * (Number(moveBackward) - Number(moveForward));
controls.getObject().position.z -= d.y * (Number(moveBackward) - Number(moveForward));

controls.getObject().position.x -= d.y * (Number(moveRight) - Number(moveLeft));
controls.getObject().position.z += d.x * (Number(moveRight) - Number(moveLeft));