Question

我试图将WebVR实现为我在Three.js中构建的项目，而且我很难让它正常运行。

观看场景时出现了许多问题。

当VRMode为false时，我的场景呈现但是当切换到VR模式时，场景突然停止渲染。我可以看到两个立体窗户，但没有其他东西出现。
当我在桌面上加载场景时，相机会直指向下。在通过设备加载时，场景被颠倒翻转。我告诉相机看我的图像的中心，它似乎没有任何影响。在摆弄控件和渲染以支持WebVR管理器和VRControls之前，它工作正常。
```
    camera.position.set(-300, -800, 200);
    camera.up = new THREE.Vector3(0, 0, 1);
    camera.lookAt(new THREE.Vector3(0, 0, 0));
```

我可以设置好位置。

当我点击GUI底部的全屏按钮时，屏幕会分成两半。上半部分是黑色（我的身体bg和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);
        }

    }

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

Answer 1

如果不查看其余的代码，很难猜到会发生什么。

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

VRControls（与webvr-polyfill一起使用，如果您正在使用它）会覆盖相机的位置和方向，因此自行设置将无效（除非您在{{1}之后重写它在这种情况下，控件将无效）。如果您想设置基本相机变换，您可以将相机连接到＆＃34;小车＆＃34;并改为设置小车变换：

controls.update

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

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

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);
}

最后，如果您正在使用webvr-polyfill，有时可能会根据您使用的设备呈现自己的桶形失真着色器通道。因此，如果您的项目涉及着色器，它们可能会与此着色器通道冲突并阻止您的场景在VR模式下正确渲染，或者根本无法渲染。如果是这种情况，您可以通过渲染着色器来解决此问题，然后再致电我lookAt

WebVR Boilerplate问题 - Manager无法在VRMode中渲染，Camera直接向下看，全屏只呈现窗口的一半

1 个答案: