three.js strange light behaviour

Question

i am using threejs with my colladaLoader, and my model displays fine except for the fact that the ambient light or something related makes it dark sometimes.. the light comes and goes. with the following code, how can i disable this behavior and make is lighting constant and bright?

CODE:

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

var container, stats;
var camera, scene, renderer, objects;
var particleLight, pointLight;
var skin;

function load_model(el,model_url,type) {

            window.loader = new THREE.ColladaLoader();
            window.loader.options.convertUpAxis = true;

            window.imageReplace = [{"name":"stock.jpg","new_image":"colors/generated_color.png"}];

            window.loader.load( model_url, imageReplace, function ( collada ) {
                //console.log(collada);
                dae = collada.scene;
                skin = collada.skins[ 0 ];

                dae.scale.x = dae.scale.y = dae.scale.z = 0.040;
                dae.updateMatrix();

                //setMaterial(dae, new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( "/media/images/stock.jpg") } ));
                window.init(el);
                window.animate();

            } );

            window.init = function(el) {

                container = document.createElement( 'div' );
                el.append( container );

                camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
                camera.position.set( 2, 2, 3 );

                scene = new THREE.Scene();

                // Add the COLLADA

                scene.add( dae );

                particleLight = new THREE.Mesh( new THREE.SphereGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
                scene.add( particleLight );

                // Lights

              //  scene.add( new THREE.AmbientLight( 0xFFFFFF ) );

                var directionalLight = new THREE.DirectionalLight(/*Math.random() * 0xffffff*/0xeeeeee );
                directionalLight.position.x = Math.random() - 0.5;
                directionalLight.position.y = Math.random() - 0.5;
                directionalLight.position.z = Math.random() - 0.5;
                directionalLight.position.normalize();
                scene.add( directionalLight );

                // pointLight = new THREE.PointLight( 0xffffff, 4 );
                // pointLight.position = particleLight.position;
                // scene.add( pointLight );

                renderer = new THREE.WebGLRenderer();
                if ( type =='edit')
                    renderer.setSize( window.innerWidth/2, window.innerHeight/2 );
                else
                    renderer.setSize( window.innerWidth/3, window.innerHeight/3 );

                container.appendChild( renderer.domElement );

                // stats = new Stats();
                // stats.domElement.style.position = 'absolute';
                // stats.domElement.style.top = '0px';
                // container.appendChild( stats.domElement );

                window.addEventListener( 'resize', onWindowResize, false );

            }

            function onWindowResize() {

                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();

                if ( type =='edit')
                    renderer.setSize( window.innerWidth/2, window.innerHeight/2 );
                else
                    renderer.setSize( window.innerWidth/3, window.innerHeight/3 );

            }

            //

            var t = 0;
            var clock = new THREE.Clock();

            window.animate = function() {

                var delta = clock.getDelta();

                requestAnimationFrame( animate );

                if ( t > 1 ) t = 0;

                if ( skin ) {

                    // guess this can be done smarter...

                    // (Indeed, there are way more frames than needed and interpolation is not used at all
                    //  could be something like - one morph per each skinning pose keyframe, or even less,
                    //  animation could be resampled, morphing interpolation handles sparse keyframes quite well.
                    //  Simple animation cycles like this look ok with 10-15 frames instead of 100 ;)

                    for ( var i = 0; i < skin.morphTargetInfluences.length; i++ ) {

                        skin.morphTargetInfluences[ i ] = 0;

                    }

                    skin.morphTargetInfluences[ Math.floor( t * 30 ) ] = 1;

                    t += delta;

                }

                window.render();
                //stats.update();

            }

            window.render = function() {

                var timer = Date.now() * 0.0005;

                camera.position.x = Math.cos( timer ) * 10;
                camera.position.y = 2;
                camera.position.z = Math.sin( timer ) * 10;

                camera.lookAt( scene.position );

                particleLight.position.x = Math.sin( timer * 4 ) * 3009;
                particleLight.position.y = Math.cos( timer * 5 ) * 4000;
                particleLight.position.z = Math.cos( timer * 4 ) * 3009;

                renderer.render( scene, camera );

            }


}

Answer 1

Your main (?) light position is defined as random like this:

            directionalLight.position.x = Math.random() - 0.5;
            directionalLight.position.y = Math.random() - 0.5;
            directionalLight.position.z = Math.random() - 0.5;

Just use hardcoded, constant position there.

You can use ambient light too, that doesn't need position at all. You can uncomment that from your code, if you want.