Двигайтесь в том направлении, куда я смотрю (webvr, три js, Oculus Rift)

В моей функции 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);
  }

Камера является дочерним элементом characterMesh. Движение вперед и назад работает отлично. Но я хочу двигаться (на самолете) туда, куда я на самом деле смотрю (просто рыскать). Я нашел пример кода для Unity3D и попытался адаптировать его для three.js, что не сработало.

Любая помощь или подсказки будут очень признательны!


javascript three.js virtual-reality oculus webvr
person Chris C    schedule 07.09.2015    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Хм, я не уверен, куда вы клоните с этим расчетом, но я думаю, что ваше намерение лучше реализовать с скалярным произведением, а не с перекрестным произведением. Я адаптировал этот код Unity3D и нашел следующее решение. См. эту ссылку для другого потенциально более эффективного метода.

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>

person brianpeiris    schedule 08.09.2015
comment
Спасибо за код и ссылку! У меня это не сработало (и, возможно, я что-то упускаю), и я должен признать, что я новичок, когда дело доходит до векторов и трехмерных чисел. Но, возможно, я не так задал свой вопрос. Я пытался спросить, как я могу вращать свою сетку персонажа, используя информацию о вращении (только рыскание) моей камеры (HMD)? Если я смогу этого добиться, то движение вперед (теперь в правильном направлении) нажатием клавиши «вперед» должно сработать. По сути, я хочу реализовать концепцию навигации так, как она реализована в AltspaceVR, что мне очень нравится... - person Chris C; 08.09.2015
comment
@ChrisC Я обновил код в соответствии с вашими требованиями, но это также зависит от того, как вы прикрепляете камеру к персонажу. Возможно, вам было бы лучше использовать FirstPersonControls Three.js в сочетании с VRControls, например: move-in-the-scene" title="интеграция трех js vrcontrols, как перемещаться по сцене"> stackoverflow.com/questions/30511524/ - person brianpeiris; 08.09.2015
comment
Я посмотрел на FirstPersonControls, но это не то, что я ищу. Ваш обновленный пример у меня тоже не сработал. Хм... Я нашел похожие вопросы и решения на форуме Unity3D и пытался реализовать их в threejs, но пока безуспешно. answers.unity3d.com/questions/498094/ answers.unity3d.com/questions/1028940/ - person Chris C; 10.09.2015
comment
@ChrisC Я почти уверен, что мое решение делает то, что вы хотите. Однако интеграция его в существующий код может стать другой проблемой. Мне нужно увидеть больше вашего кода, чтобы понять, что происходит. Я отредактировал свой ответ с полным исходным кодом. Вы можете увидеть рабочий пример здесь: output.jsbin.com/coboqis/1. - person brianpeiris; 13.09.2015
comment
Еще раз спасибо! Ваш пример отлично работает, как вы сказали. Я посмотрю, что не так с моим кодом... - person Chris C; 14.09.2015
comment
Это работает и в моем коде! Деталь в моем коде имела значение: я добавил камеру в качестве дочернего элемента к персонажу, и это не сработало. В то время как в вашем коде вы копируете положение персонажа в положение камеры и не добавляете камеру к персонажу. - person Chris C; 14.09.2015