Question

我正在使用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>

Answer 1

就目前而言，你的问题有太多的未知因素，任何没有你目前正在使用的所有剧本的人都要对其进行适当的调试，但无论如何我都会在黑暗中拍摄。

你正在实例化裂缝效应：

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

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

renderer = new THREE.CanvasRenderer();

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

canvas渲染器和WebGL渲染器似乎都支持setClearColor方法，因此我不知道为什么你会在上出现错误，除非你的画布渲染器不是'当你将它传递给Rift效果对象时，实际上正在创建并且是undef。

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

Noob，Oculus Rift启用了网页问题

1 个答案: