Why lighting isn't working in Three.js?

Question

I don't understand why the lighting does not work in my code. I downloaded a simple OBJ. file to test the OBJLoader but the model isn't affected. Before I edited the lighting more, at least the Ambient Lighting would work. Maybe the OBJ. model needs a texture?

            var container, stats;

        var camera, scene, renderer, controls;


        init();
        animate();


        function init() {

            container = document.createElement( 'div' );
            document.body.appendChild( container );

            scene = new THREE.Scene();

            camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
            camera.position.z = 2.5;
            scene.add( camera );

            controls = new THREE.TrackballControls( camera );

            controls.rotateSpeed = 2.0;
            controls.zoomSpeed = 1.2;
            controls.panSpeed = 0.0;

            controls.noZoom = false;
            controls.noPan = true;

            controls.staticMoving = true;
            controls.dynamicDampingFactor = 0.3;

            controls.keys = [ 65, 83, 68 ];

            controls.addEventListener( 'change', render );

            var ambient = new THREE.AmbientLight( 0x020202 );
            scene.add( ambient );

            directionalLight = new THREE.DirectionalLight( 0xffffff );
            directionalLight.position.set( 1, 1, 0.5 ).normalize();
            scene.add( directionalLight );

            pointLight = new THREE.PointLight( 0xffaa00 );
            pointLight.position.set( 0, 0, 0 );
            scene.add( pointLight );

            sphere = new THREE.SphereGeometry( 100, 16, 8 );
            lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
            lightMesh.scale.set( 0.05, 0.05, 0.05 );
            lightMesh.position = pointLight.position;
            scene.add( lightMesh );


            var loader = new THREE.OBJLoader();
            loader.load( "originalMeanModel.obj", function ( object ) {
                scene.add( object );
            } );

            renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            container.appendChild( renderer.domElement );

        }

        function animate() {

            requestAnimationFrame( animate );
            controls.update();

        }

        function render() {

            camera.lookAt( scene.position );

            renderer.render( scene, camera );

        }

Answer 1

MeshBasicMaterial in THREE.js is like a toon shader (good for silouhette, shadow drawing or wireframe) and and is not affected by lights.

Try MeshLambertMaterial or MeshPhongMaterial

Answer 2

I had similar problems when using the Three.js exporter for Blender, everything appeared dark even with diffuse colors set in the original blender model and an ambient light added to the scene in the Three.js code. It turns out the fix was to edit part of the converted model file, there was a line to the effect of:

"colorAmbient" : [0, 0, 0]

which I manually changed to

"colorAmbient" : [0.75, 0.75, 0.75]

everywhere it appeared, and that fixed the problem. I bring this up because my best guess is that you are experiencing a problem similar to this. Without seeing the *.obj file it is difficult to diagnose the problem exactly, but perhaps in your model settings you could try changing the ambient color value rather than, say, the diffuse color value, which is what we normally think of when assigning color to a model.