Three.js Collada模型显示黑色，没有灯光直到鼠标移动(Three.js Collada model displayed black with no lights till a mouse movement)

 我遇到了一个奇怪的问题，在三个显示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>

I've encountered one strange problem with displaying collada model in three.js I suspect that something wrong with the logic of the script but I can't figure out. The problem is that the Collada model is displayed black till a user moves a mouse (orbit controls). Only after this the model gets lighted. So, initially, when the page loads, the model is black and this is confusing a user. What's wrong with the code? Where could be the error?
 
The code of the script is the following:
 
<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>

原文：https://stackoverflow.com/questions/31649559