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

Question

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>

Answer 1

You're not calling render() from your animate() function, so the scene is only rendered through the OrbitControls onChange event. Add render() at the end of animate() and it will work. You can also then remove the onChange callback, since you'll be rendering steadily.