朝我正在寻找的方向移动（webvr、三个 js、Oculus Rift）答案

【问题标题】：Move in the direction I am looking (webvr, three js, Oculus Rift)朝我正在寻找的方向移动（webvr、三个 js、Oculus Rift）
【发布时间】：2015-09-07 22:35:41
【问题描述】：

在我的 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。

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

【问题讨论】：

标签： javascript three.js oculus virtual-reality webvr

【解决方案1】：

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

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>

【讨论】：

感谢您的代码和链接！它对我不起作用（也许我遗漏了一些东西），我不得不承认我是一个新手，当谈到向量和threejs。但也许我没有以正确的方式问我的问题。我想问的是如何使用我的相机（HMD）的旋转信息（仅偏航）来旋转我的角色网格？如果我能做到这一点，那么通过按前进键前进（现在朝着正确的方向）应该可以工作。基本上我想实现导航概念，就像在我非常喜欢的 AltspaceVR 中实现的那样......
@ChrisC 我已经更新了代码以满足您的要求，但这也取决于您如何将相机连接到角色。也许您最好将 Three.js 的 FirstPersonControls 与 VRControls 结合使用，类似于：stackoverflow.com/questions/30511524/…
我查看了 FirstPersonControls，但它不是我想要的。您更新的示例也对我不起作用。嗯……我在Unity3D论坛找到了类似的问题和解决方法，尝试在threejs中实现，到现在都没有成功。 answers.unity3d.com/questions/498094/…answers.unity3d.com/questions/1028940/…
@ChrisC 我很确定我的解决方案可以满足您的要求。不过，将它集成到您现有的代码中可能是一个不同的问题。我必须查看更多您的代码才能弄清楚发生了什么。我已经用完整的源代码编辑了我的答案。你可以在这里看到一个工作示例：output.jsbin.com/coboqis/1
再次感谢！正如您所说，您的示例效果很好。我会看看我的代码有什么问题...