Three.js Collada模型显示黑色,没有灯光,直到鼠标移动

Three.js Collada model displayed black with no lights till a mouse movement

本文关键字:移动 鼠标 Collada js 模型 显示 黑色 Three      更新时间:2023-09-26

我在three.js中显示collada模型时遇到了一个奇怪的问题我怀疑剧本的逻辑出了问题,但我想不出来。问题是Collada模型显示为黑色,直到用户移动鼠标(轨道控制)。只有在这之后,模型才会被点亮。所以,最初,当页面加载时,模型是黑色的,这让用户感到困惑。代码有什么问题?错误可能在哪里?

脚本代码如下:

<script>
        if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
        var container, stats;
        var camera, controls, scene, renderer;
        var pointLight;
        init();
        render();

        function animate() 
        {
            pointLight.position.copy( camera.position );
            requestAnimationFrame(animate);
            controls.update();
        }
        function init() {
            camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
            camera.position.set( -40, 70, 70 );

            controls = new THREE.OrbitControls( camera );
            controls.damping = 0.2;
            controls.addEventListener( 'change', render );
            scene = new THREE.Scene();

            // world
            var mesh;
            var loader = new THREE.ColladaLoader();
            loader.load('./models/collada/test.dae', function (result) {
                mesh = result.scene;
                mesh.scale.set(0.3, 0.3, 0.3);
                scene.add(mesh);
                render();
                 });

            // lights
          var hemLight = new THREE.HemisphereLight(0x000000, 0x303030, 0.8);
           scene.add(hemLight);
           pointLight = new THREE.PointLight( 0xffffff, 1.1 );
           pointLight.position.copy( camera.position );
           scene.add( pointLight );

            // renderer
           renderer = new THREE.WebGLRenderer({antialias:true, alpha:true});
           renderer.setClearColor(0xEEEEEE, 1);
           renderer.shadowMapType = THREE.PCFSoftShadowMap;
           renderer.setPixelRatio( window.devicePixelRatio );
           renderer.setSize( window.innerWidth, window.innerHeight );
            container = document.getElementById( 'container' );
            container.appendChild( renderer.domElement );

          window.addEventListener( 'resize', onWindowResize, false );
          animate();
        }
        function onWindowResize() 
        {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize( window.innerWidth, window.innerHeight );
            render();
        }
        function render() 
        {
            renderer.render( scene, camera );
        }

     </script>

你没有从animate()函数中调用render(),所以场景只能通过OrbitControls onChange事件进行渲染。在animate()的末尾添加render(),它就可以工作了。您还可以删除onChange回调,因为您将稳定地呈现。