0

我正在使用 Three.js-oculus 和 Cupola.js 创建一个 VR 页面（three.js-oculus 中地球几何示例的 mod）。使用 Oculus Rift 查看网页是否需要 OculusRiftEffect 功能？如果是这样，是否有一个不会引发诸如“没有方法 SetClearColor”之类的错误的可用方法？

html代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js canvas - geometry - earth</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-`enter code here`scale=1.0, maximum-scale=1.0">
    <style>
        body {
            color: #808080;
            font-family:Monospace;
            font-size:13px;
            text-align:center;
            background-color: #ffffff;
            margin: 0px;
            overflow: hidden;
        }

        #info {
        position: absolute;
        top: 0px; width: 100%;
        padding: 5px;
        }

        a {

        color: #0080ff;
        }

    </style>
    </head>
    <body>
        <div id="container"></div>
    <div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - earth demo</div>
    <script src="./scripts/three.min.js"></script>
    <script src="./scripts/stats.min.js"></script>
    <script src="./scripts/OculusRiftEffect.js"></script>
    <script>
        var riftCam; //TS
        var container, stats;
        var camera, scene, renderer;
        var group;
        var mouseX = 0, mouseY = 0;

        var windowHalfX = window.innerWidth / 2;
        var windowHalfY = window.innerHeight / 2;

        init();
        animate();

        function init() {

            container = document.getElementById( 'container' );
        camera = new THREE.PerspectiveCamera( 60, window.innerWidth /      window.innerHeight, 1, 2000 );
        camera.position.z = 500;
        scene = new THREE.Scene();
        group = new THREE.Object3D();
        scene.add( group );
        // earth

        var loader = new THREE.TextureLoader();
        loader.load( './textures/land_ocean_ice_cloud_2048.jpg', function ( texture ) {

        var geometry = new THREE.SphereGeometry( 200, 20, 20 );

        var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: true } );
        var mesh = new THREE.Mesh( geometry, material );
        group.add( mesh );
        } );

        // shadow

        var canvas = document.createElement( 'canvas' );
        canvas.width = 128;
        canvas.height = 128;
        var context = canvas.getContext( '2d' );
        var gradient = context.createRadialGradient(
        canvas.width / 2,
        canvas.height / 2,
        0,
        canvas.width / 2,
        canvas.height / 2,
        canvas.width / 2
        );
        gradient.addColorStop( 0.1, 'rgba(210,210,210,1)' );
        gradient.addColorStop( 1, 'rgba(255,255,255,1)' );

        context.fillStyle = gradient;
        context.fillRect( 0, 0, canvas.width, canvas.height );

        var texture = new THREE.Texture( canvas );
        texture.needsUpdate = true;

        var geometry = new THREE.PlaneGeometry( 300, 300, 3, 3 );
        var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: true } );

        var mesh = new THREE.Mesh( geometry, material );
        mesh.position.y = - 250;
        mesh.rotation.x = - Math.PI / 2;
        group.add( mesh );

        renderer = new THREE.CanvasRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        container.appendChild( renderer.domElement );

        stats = new Stats();
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.top = '0px';
        container.appendChild( stats.domElement );
        document.addEventListener( 'mousemove', onDocumentMouseMove, false );

                //
        window.addEventListener( 'resize', onWindowResize, false );
        riftCam = new THREE.OculusRiftEffect(renderer); //TS
    }

    function onWindowResize() {

        windowHalfX = window.innerWidth / 2;
        windowHalfY = window.innerHeight / 2;
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );

    }

    function onDocumentMouseMove( event ) {
        mouseX = ( event.clientX - windowHalfX );
        mouseY = ( event.clientY - windowHalfY );
    }
    //

    function animate() {
        requestAnimationFrame( animate );
        render();
        stats.update();
    }

    function render() {
        camera.position.x += ( mouseX - camera.position.x ) * 0.05;
        camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
        camera.lookAt( scene.position );
        group.rotation.y -= 0.005;

        //renderer.render( scene, camera );
        riftCam.render(scene, camera); //TS
    }
    </script>

</body>
</html>
4

1 回答 1

0

就目前而言，您的问题有太多未知数，无法由没有您当前正在使用的所有脚本的任何人正确调试，但无论如何我都会在黑暗中试一试。

您正在像这样实例化裂痕效果：

riftCam = new THREE.OculusRiftEffect(renderer); //TS

但是，您的渲染器被声明为：

renderer = new THREE.CanvasRenderer();

我不确定您是否可以将非 WebGL 渲染器与 OculusRiftEffect 一起使用。

画布渲染器和 WebGL 渲染器似乎都支持该setClearColor方法，所以我不知道为什么你会收到错误，除非你的画布渲染器实际上没有被创建并且当你将它传递给 Rift 效果时它是 undef目的。

我建议尝试从一个像这样的工作示例开始，并进行增量更改以获得所需的输出。

于 2013-12-06T00:38:57.393 回答