three.js - Three.js - VRControls の統合 - シーン内を移動するには?

Question

Three.js を使用して、小さなシーンでレンダリングと移動 (orbitControl が camera.position を変更) を行います。
今、私はオキュラスリフトを持っています。そこで、VRControls と VREffect を追加しました。
頭の動きも問題ありません。
しかし、VRControls がカメラパラメーターをオーバーライドするため、シーン内で移動することはできません。

object.quaternion.copy( state.orientation ); // object is the camera

私はそれを修正するのは簡単だと思った.カメラを上書きするのではなく、更新するだけでよい.

object.quaternion.copy(stateOrientationQuat.multiply(currentCameraQuat));

しかし、それは機能しません。動いているフリックシーンをレンダリングします。VRControls と orbitControl が競合しているようです...

VRControls を既存のプロジェクトに統合するにはどうすればよいか教えていただけますか? 更新コードをお持ちの場合 (四元数についてはよくわかりません...)、非常に役立ちます。

ありがとう

score 6 · Accepted Answer

編集:より良い方法については、他の回答を参照してください。

偽のカメラで動作する VRControls インスタンスを作成し、軌道コントロールの上に変換を適用することで、両方のコントロールを組み合わせることができます。

完全な例:

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 orbitControls = new THREE.OrbitControls(camera);

// Store the position of the VR HMD in a dummy camera.
var fakeCamera = new THREE.Object3D();
var vrControls = new THREE.VRControls(fakeCamera);

var scene;
var createScene = function () {
  scene = new THREE.Scene();

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

  var cube = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshLambertMaterial({
      color: 'green'
    })
  );
  cube.position.set(-1, -2, -5);
  scene.add(cube);
  orbitControls.target = cube.position;

  for (var i = 0; i < 10; i++) {
    cube = new THREE.Mesh(
      new THREE.BoxGeometry(1, 1, 1),
      new THREE.MeshLambertMaterial()
    );
    cube.position.set(
      (Math.random() - 0.5) * 20,
      (Math.random() - 0.5) * 20,
      (Math.random() - 0.5) * 20
    );
    scene.add(cube);
  }
};
createScene();

var render = function() {
  requestAnimationFrame(render);
  
  orbitControls.update();
  vrControls.update();
  
  // Temporarily save the orbited camera position
  var orbitPos = camera.position.clone();
  
  // Apply the VR HMD camera position and rotation
  // on top of the orbited camera.
  var rotatedPosition = fakeCamera.position.applyQuaternion(
    camera.quaternion);
  camera.position.add(rotatedPosition);
  camera.quaternion.multiply(fakeCamera.quaternion);
  
  vrEffect.render(scene, camera);
  
  // Restore the orbit position, so that the OrbitControls can
  // pickup where it left off.
  camera.position.copy(orbitPos);
};

render();

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

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/8125c7dac9bf0c7df19bd1d7d9695cbfc0425867/build/three.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/8125c7dac9bf0c7df19bd1d7d9695cbfc0425867/examples/js/effects/VREffect.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/8125c7dac9bf0c7df19bd1d7d9695cbfc0425867/examples/js/controls/VRControls.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/8125c7dac9bf0c7df19bd1d7d9695cbfc0425867/examples/js/controls/OrbitControls.js"></script>

score 3 · Accepted Answer

これを行うためのよりクリーンな方法があることに気付きました。「ドリー」カメラを作成し、VR カメラを子として追加できます。次に、複雑な計算に頼ることなく、OrbitControls でドリーを制御し、VRControls で実際のカメラを制御できます。

完全な例:

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

var vrEffect = new THREE.VREffect(renderer);

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

var scene;
var createScene = function () {
  scene = new THREE.Scene();

  // The dolly has to be a PerspectiveCamera, as opposed
  // to a simple Object3D, since that's what
  // OrbitControls expects.
  var dollyCam = new THREE.PerspectiveCamera();
  orbitControls = new THREE.OrbitControls(dollyCam);
  dollyCam.add(camera);
  scene.add(dollyCam);

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

  var cube = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshLambertMaterial({
      color: 'green'
    })
  );
  cube.position.set(-1, -2, -5);
  scene.add(cube);
  orbitControls.target.copy(cube.position);

  for (var i = 0; i < 10; i++) {
    cube = new THREE.Mesh(
      new THREE.BoxGeometry(1, 1, 1),
      new THREE.MeshLambertMaterial()
    );
    cube.position.set(
      (Math.random() - 0.5) * 20,
      (Math.random() - 0.5) * 20,
      (Math.random() - 0.5) * 20
    );
    scene.add(cube);
  }
};
createScene();

var render = function() {
  requestAnimationFrame(render);
  
  orbitControls.update();
  vrControls.update();
  
  vrEffect.render(scene, camera);
};

render();

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

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/r72/build/three.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/r72/examples/js/effects/VREffect.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/r72/examples/js/controls/VRControls.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/r72/examples/js/controls/OrbitControls.js"></script>

three.js - Three.js - VRControls の統合 - シーン内を移動するには?

2 に答える 2

関連スニペット:

完全な例:

関連スニペット:

完全な例:

three.js - Three.js - VRControls の統合 - シーン内を移動するには?

2 に答える 2

関連スニペット:

完全な例:

関連スニペット:

完全な例:

Related

Reference