我使用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集成到现有项目中吗?如果您有更新代码(我真的不知道四元数...),它将非常有帮助。
谢谢
最佳答案
编辑:有关更好的方法,请参见my other answer。
您可以通过创建一个对假相机起作用的VRControls实例来组合这两个控件,然后将变换应用于轨道控件的顶部:
相关摘要:
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 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);
};
完整示例:
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>
关于three.js - Three.js-VRControls集成-如何在场景中移动?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30511524/