1

我正在尝试将 WebVR 实现到我在 Three.js 中构建的项目中，但我很难让它正常运行。

当我查看场景时，会出现许多问题。

  1. 当 VRMode 为 false 时，我的场景会渲染，但是当切换到 VR 模式时，场景会突然停止渲染。我可以看到两个立体窗口，但没有其他任何东西出现。

  2. 当我在桌面上加载场景时，相机指向正下方。在设备上加载时，场景会颠倒过来。我告诉相机看我图像的中心，它似乎没有任何效果。在我摆弄控件和渲染以支持 WebVR 管理器和 VRControls 之前，它工作得很好。 

        camera.position.set(-300, -800, 200);
    camera.up = new THREE.Vector3(0, 0, 1);
    camera.lookAt(new THREE.Vector3(0, 0, 0));

我能够很好地设置位置。

  1. 当我单击 GUI 底部的全屏按钮时，屏幕分成两半。上半部分是黑色（我的身体背景和 clearfix 颜色是蓝色），下半部分呈现我的场景。当我手动调整窗口大小时，我有一个可以正常工作的事件侦听器，因此这必须与 VR 管理器相关。

知道什么可能导致这些错误吗？

这是我定义渲染器的方式：

var width = window.innerWidth,
    height = window.innerHeight;

var renderer = new THREE.WebGLRenderer({
        antialias: true
});

renderer.setSize(width, height);
renderer.setClearColor(0x1D76BB, 1);

// Effect and Controls for VR
effect = new THREE.VREffect(renderer);
controls = new THREE.VRControls(camera);
effect.setSize(width, height);


var manager = new WebVRManager(renderer, effect);

这是我的动画功能：

function animate() {

        requestAnimationFrame(animate);

        if (controls) {
            controls.update();
        }

        if (manager.isVRMode()) {
            renderer.setRenderTarget(null); // add this line
            manager.render(scene, camera);
        } else {
            renderer.render(scene, camera);
        }

    }

我的图书馆今天早上刚从凉亭回来，所以我知道它们都是最新的。

4

1 回答 1

2

如果不查看其余代码，很难猜出发生了什么。

我不确定这是否相关，但最新版本的 WebVRManager 类会为您在 VR 和非 VR 模式之间切换，它会退回到 2D 模式下的普通渲染器。因此，您无需再检查，isVRMode也无需致电renderer.render. 只需使用manager.render它，它就会为您完成工作。经理现在还为您处理调整大小，因此您可能也不应该这样做。除此之外，您似乎正确使用了管理器。

VRControls（与 webvr-polyfill 一起使用，如果你正在使用它）会覆盖相机的位置和方向，所以你自己设置它不会有任何效果（除非你在之后覆盖它controls.update，在这种情况下，控件将没有效果）。如果要设置基本相机变换，可以将相机附加到“小车”并设置小车的变换：

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);
var dolly = new THREE.Object3D();
dolly.add(camera);
dolly.position.z = 200;
dolly.up = new THREE.Vector3(0, 0, 1);
dolly.lookAt(new THREE.Vector3(0, 0, 0));
dolly.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI);
scene.add(dolly);

function animate(timestamp) {
    var timer = new Date().getTime() * 0.0002;
    dolly.position.x = Math.floor(Math.cos(timer) * 600);
    dolly.position.y = Math.floor(Math.sin(timer) * 600);
    controls.update();
    manager.render(scene, camera, timestamp);
    requestAnimationFrame(animate);
}

请注意，您必须将小车添加到场景中，并且您必须在制作后在其 Y 轴上旋转小车，lookAt因为默认情况下相机会看到负 Z 方向。

将 AxisHelper 添加到场景中也可能会有所帮助，这样您可以在调试时更好地了解您的方位：

var axisHelper = new THREE.AxisHelper(200);
axisHelper.position.z = 100;
scene.add(axisHelper);

最后，如果您使用 webvr-polyfill，它有时可以根据您使用的设备渲染自己的桶形失真着色器通道。因此，如果您的项目涉及着色器，它们可能会与此着色器通道冲突并阻止您的场景正确渲染，或者根本无法在 VR 模式下渲染。如果是这种情况，您可以通过在调用之前渲染着色器来解决此问题，manager.render如我在此处所述：https ://stackoverflow.com/a/32549777/22417

于 2015-12-12T07:51:10.137 回答