Why doesn't my directional light affect the whole scene?

问题

Please see this fiddle - http://jsfiddle.net/vnr2v6mL/

            var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        var geometry = new THREE.BoxGeometry(100, 100, 1);
        var material = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
        var plane = new THREE.Mesh(geometry, material);
        scene.add(plane);
        camera.position.z = 5;

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

        var dl = new THREE.DirectionalLight(0x0000ff, 1.0);
        dl.position.set(0, 0, 10);
        scene.add(dl);

        scene.add( new THREE.DirectionalLightHelper(dl, 2.5) );

        function render() {
            requestAnimationFrame( render );
            renderer.render( scene, camera );
        }
        render();

        $(document).ready(function() {
            $(document).bind("mousewheel DOMMouseScroll", function(e) {
                var delta = e.type === 'DOMMouseScroll' ? -e.originalEvent.detail : e.originalEvent.wheelDelta;
                camera.position.z += delta / 120;
            });
        });

It is my understanding that the lighting should be infinite and parallel, so why does it only light up a circle in the middle of my scene?

Thanks in advance.

回答1:

You are using MeshPhongMaterial. What you are seeing is the specular highlight only.

Your light is blue. However, your material is green, so it reflects only green light. Therefore, there is no diffuse light reflected from the material.

The material specular reflectance is, by default, 0x111111. So all colors are reflected specularly. Since your light is blue, you get a blue light reflected specularly. In other words, a blue "hot spot".

Consider using a white light, 0xffffff, and adjust the light intensity.

Fiddle: http://jsfiddle.net/vnr2v6mL/1/

three.js r.70

来源：https://stackoverflow.com/questions/28219248/why-doesnt-my-directional-light-affect-the-whole-scene

标签

three.js