1

Three.js でビルドしたプロジェクトに WebVR を実装しようとしていますが、正しく機能させるのに苦労しています。

その光景を眺めていると、さまざまな問題が発生します。

  1. VRMode が false の場合、シーンはレンダリングされますが、VR モードに切り替えると、シーンのレンダリングが突然停止します。2 つの立体視ウィンドウが表示されますが、他には何も表示されません。

  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 の下部にあるフルスクリーン ボタンをクリックすると、画面が 2 つに分割されます。上半分は黒 (私の体の背景と 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);
        }

    }

私のライブラリは今朝、bower から届いたばかりなので、すべて最新の状態です。

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 に答える