加载JSON对象时有三个JS白屏

时间:2013-03-08 10:57:31

标签: javascript three.js webgl

我下载了threejs,现在尝试创建一个3D environment,您可以在某种“自我视角”中自由移动。我使用了pointlock-control示例作为提交,现在我正在添加我自己的东西,从在Blender中创建的汽车开始并导出为JSON,但每次我尝试加载它时,我只得到一个白色屏幕。我希望你们能帮助我。

代码:

    <style>
        html, body {
            width: 100%;
            height: 100%;
        }

        body {
            background-color: #ffffff;
            margin: 0;
            overflow: hidden;
            font-family: arial;
        }

        #blocker {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }

        #instructions {
            width: 100%;
            height: 100%;
            display: -webkit-box;
            display: -moz-box;
            display: box;
            -webkit-box-orient: horizontal;
            -moz-box-orient: horizontal;
            box-orient: horizontal;
            -webkit-box-pack: center;
            -moz-box-pack: center;
            box-pack: center;
            -webkit-box-align: center;
            -moz-box-align: center;
            box-align: center;
            color: #ffffff;
            text-align: center;
            cursor: pointer;
        }

    </style>
</head>
<body>
    <script src="../build/three.min.js"></script>
    <script src="js/controls/PointerLockControls.js"></script>
    <div id="blocker">
        <div id="instructions">
            <span style="font-size:40px">Click to move</span>
            <br />
            (WASD or Arrow Keys = Move, SPACE = Jump, MOUSE = Look around)
        </div>
    </div>
    <script>
        var camera, scene, renderer;
        var geometry, material, mesh;
        var loader;
        var auto;
        var loadModel;
        var controls,time = Date.now();
        var objects = [];
        var ray;
        var blocker = document.getElementById( 'blocker' );
        var instructions = document.getElementById( 'instructions' );

        // http://www.html5rocks.com/en/tutorials/pointerlock/intro/
        var havePointerLock = 'pointerLockElement' in document || 'mozPointerLockElement' in document || 'webkitPointerLockElement' in document;

        if ( havePointerLock ) {
            var element = document.body;
            var pointerlockchange = function ( event ) {
                if ( document.pointerLockElement === element || document.mozPointerLockElement === element || document.webkitPointerLockElement === element ) {
                    controls.enabled = true;
                    blocker.style.display = 'none';
                } else {
                    controls.enabled = false;
                    blocker.style.display  = '-webkit-box';
                    blocker.style.display = '-moz-box';
                    blocker.style.display = 'box';
                    instructions.style.display = '';
                }
            }

            var pointerlockerror = function ( event ) {
                instructions.style.display = '';
            }

            // Hook pointer lock state change events
            document.addEventListener( 'pointerlockchange', pointerlockchange, false );
            document.addEventListener( 'mozpointerlockchange', pointerlockchange, false );
            document.addEventListener( 'webkitpointerlockchange', pointerlockchange, false );
            document.addEventListener( 'pointerlockerror', pointerlockerror, false );
            document.addEventListener( 'mozpointerlockerror', pointerlockerror, false );
            document.addEventListener( 'webkitpointerlockerror', pointerlockerror, false );
            instructions.addEventListener( 'click', function ( event ) {
                instructions.style.display = 'none';
                // Ask the browser to lock the pointer
                element.requestPointerLock = element.requestPointerLock || element.mozRequestPointerLock || element.webkitRequestPointerLock;

                if ( /Firefox/i.test( navigator.userAgent ) ) {
                    var fullscreenchange = function ( event ) {
                        if ( document.fullscreenElement === element || document.mozFullscreenElement === element || document.mozFullScreenElement === element ) {
                            document.removeEventListener( 'fullscreenchange', fullscreenchange );
                            document.removeEventListener( 'mozfullscreenchange', fullscreenchange );
                            element.requestPointerLock();
                        }
                    }
                    document.addEventListener( 'fullscreenchange', fullscreenchange, false );
                    document.addEventListener( 'mozfullscreenchange', fullscreenchange, false );
                    element.requestFullscreen = element.requestFullscreen || element.mozRequestFullscreen || element.mozRequestFullScreen || element.webkitRequestFullscreen;
                    element.requestFullscreen();
                } else {
                    element.requestPointerLock();
                }
            }, false );
        } else {
            instructions.innerHTML = 'Your browser doesn\'t seem to support Pointer Lock API';
        }
        init();
        animate();
        function init() {
            camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
            scene = new THREE.Scene();
            scene.fog = new THREE.Fog( 0xffffff, 0, 750 );
            var light = new THREE.DirectionalLight( 0xffffff, 1.5 );
            light.position.set( 1, 1, 1 );
            scene.add( light );
            var light = new THREE.DirectionalLight( 0xffffff, 0.75 );
            light.position.set( -1, - 0.5, -1 );
            scene.add( light );
            controls = new THREE.PointerLockControls( camera );
            scene.add( controls.getObject() );
            ray = new THREE.Raycaster();
            ray.ray.direction.set( 0, -1, 0 );

            // floor
            geometry = new THREE.PlaneGeometry( 2000, 2000, 100, 100 );
            geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );

            for ( var i = 0, l = geometry.vertices.length; i < l; i ++ ) {
                var vertex = geometry.vertices[ i ];
                vertex.x += Math.random() * 20 - 10;
                vertex.y += Math.random() * 2;
                vertex.z += Math.random() * 20 - 10;
            }

            for ( var i = 0, l = geometry.faces.length; i < l; i ++ ) {
                var face = geometry.faces[ i ];
                face.vertexColors[ 0 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
                face.vertexColors[ 1 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
                face.vertexColors[ 2 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
                face.vertexColors[ 3 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
            }

            material = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors } );
            mesh = new THREE.Mesh( geometry, material );
            scene.add( mesh );

            // objects
                    loader = new THREE.JSONLoader(  );
    loadModel = function(geometry) 
        {                        
            auto = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { envMap: THREE.ImageUtils.loadTexture( 'textures/metal.jpg', new THREE.SphericalReflectionMapping() ), overdraw: true, shading: THREE.SmoothShading } ) );
            mesh.scale.set(1, 1, 1);
            mesh.position.set(0, 150, 0);
            //mesh.rotation.set(Math.PI/2, Mat.PI/2, Math.PI/2);
            //mesh.matrix.setRotationFromEuler(mesh.rotation);
            scene.add( auto );
        };
    loader.load('blender.js/auto.js', loadModel );
    setInterval(render, 50);

        renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );
        window.addEventListener( 'resize', onWindowResize, false );
        }

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize( window.innerWidth, window.innerHeight );
        }

        function animate() {
            requestAnimationFrame( animate );
            controls.isOnObject( false );
            ray.ray.origin.copy( controls.getObject().position );
            ray.ray.origin.y -= 10;
            var intersections = ray.intersectObjects( objects );
            if ( intersections.length > 0 ) {
                var distance = intersections[ 0 ].distance;
                if ( distance > 0 && distance < 10 ) {
                    controls.isOnObject( true );
                }
            }
            controls.update( Date.now() - time );
            renderer.render( scene, camera );
            time = Date.now();
        }
    </script>
</body>

3 个答案:

答案 0 :(得分:0)

正文中的正文和文字“颜色”的背景颜色与样式中的#ffffff相同。

请更改其中一个,然后尝试:)

它可能会放弃,但你可能看不到它,

更新

你在这里添加场景scene.add(mesh2);我认为我们应该按照工作代码(下面)重新绘制场景(使用循环或计时器,每次“0.05秒”),不要添加新场景,使用简单例如圆形移动然后继续复杂的汽车,有时可能会混淆..

工作代码:

loader = new THREE.JSONLoader();
loadModel = function (geometry) {
    mesh2 = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
                envMap : THREE.ImageUtils.loadTexture('textures/metal.refl.jpg', new THREE.SphericalReflectionMapping()),
                overdraw : true,
                shading : THREE.SmoothShading
            }));
    mesh2.scale.set(1, 1, 1);
    mesh2.position.set(0, 0, 0); 
    //mesh.rotation.set(Math.PI/2, Mat.PI/2, Math.PI/2); 
    //mesh.matrix.setRotationFromEuler(mesh.rotation); 
    scene.add( mesh2 ); 
};

如果没有使用此

解决注释

答案 1 :(得分:0)

您的相机没有位置也没有目标。

答案 2 :(得分:-1)

var intersections = ray.intersectObjects( objects );但您没有将网格添加到对象中。