朝我看的方向移动（webvr、三个js、Oculus Rift）

Question

在我的 animate() 函数中，我有以下代码：

  if (this.controls.forward) {

    // move in direction we look at
    var cameraDirectionVector = new THREE.Vector3(0, 0, -1);
    cameraDirectionVector.applyQuaternion(this.camera.quaternion);

    var angle = cameraDirectionVector.angleTo(this.characterMesh.position);
    this.characterMesh.translateOnAxis(cameraDirectionVector.cross(this.characterMesh.position), moveDistance);

    this.characterMesh.translateZ(-moveDistance);
  }
  if (this.controls.backward) {
    this.characterMesh.translateZ(moveDistance);
  }

相机是角色网格的子项。向前和向后移动完美无缺。但我想（在飞机上）移动到我实际看到的地方（只是偏航）。我找到了 Unity3D 的代码示例，并尝试将其修改为 three.js，但没有用。

非常感谢任何帮助或提示！

Answer 1

嗯，我不确定你的计算目的是什么，但我认为用点积而不是叉积更好地实现你的意图。我改编了 this Unity3D code 并提出了以下解决方案。请参阅 link 了解另一种可能更有效的方法。

var YAXIS = new THREE.Vector3(0, 1, 0);
var ZAXIS = new THREE.Vector3(0, 0, 1);
var direction = ZAXIS.clone();
direction.applyQuaternion(camera.quaternion);
direction.sub(YAXIS.clone().multiplyScalar(direction.dot(YAXIS)));
direction.normalize();
character.quaternion.setFromUnitVectors(ZAXIS, direction);
character.translateZ(-moveDistance);

完整代码：

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

var vrEffect = new THREE.VREffect(renderer, function () {});

var camera = new THREE.PerspectiveCamera(
  75, window.innerWidth / window.innerHeight, 0.1, 1000);
var vrControls = new THREE.VRControls(camera);

var scene = new THREE.Scene();

scene.add(new THREE.PointLight());

var makeCube = function (color) {
  return new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshLambertMaterial({
      color: color
    })
  );
};

var spacing = 1.5;
for (var i = 0; i < 10; i++) {
  for (var j = 0; j < 10; j++) {
    var color = (
      (i % 2 === 0 || j %2 === 0) ? 'green' : 'red');
    var cube = makeCube(color);
    cube.position.z = -i * spacing;
    cube.position.x = j * spacing;
    cube.position.y = -2;
    scene.add(cube);
  }
}

var character = new THREE.Object3D();
var characterBody = makeCube('blue');
characterBody.position.y = -1.5;
character.add(characterBody);
scene.add(character);

var moving = false;

window.addEventListener('keydown', function () {
  moving = true;
});

window.addEventListener('keyup', function () {
  moving = false;
});

var moveDistance = 0.1;
var YAXIS = new THREE.Vector3(0, 1, 0);
var ZAXIS = new THREE.Vector3(0, 0, 1);

var render = function() {
  requestAnimationFrame(render);
  
  vrControls.update();
  camera.position.copy(character.position);
  
  if (moving) {
    // move in direction we look at
    var direction = ZAXIS.clone();
    direction.applyQuaternion(camera.quaternion);
    direction.sub(YAXIS.clone().multiplyScalar(direction.dot(YAXIS)));
    direction.normalize();
    character.quaternion.setFromUnitVectors(ZAXIS, direction);
    character.translateZ(-moveDistance);
  }
  
  vrEffect.render(scene, camera);
};

render();


window.addEventListener('resize',  function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  vrEffect.setSize( window.innerWidth, window.innerHeight );
});

<!DOCTYPE html>
<html>
<head>
  <script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
  <script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/VRControls.js"></script>
  <script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/effects/VREffect.js"></script>
  <meta charset="utf-8">
</head>
<body>
</body>
</html>

朝我看的方向移动（webvr、三个js、Oculus Rift）

Move in the direction I am looking (webvr, three js, Oculus Rift)

javascript

three.js

oculus

virtual-reality

webvr