THREE實戰3_理解光源

光源

光的三原色： 紅red、綠green、藍blue。

色彩模式： HSL、HSV。
色相Hue、飽和度Saturation、亮度Lightness、明度 Value。
白色反射所有光（白色的物體利於測試燈光）

Three.js 的光源類

1.環境光

把顏色添加到整個場景和對象的當前顏色上
maya環境光測試
一個藍色的環境光渲染灰色box

THREE代碼重構
環境光的特點：

• 光源顏色影響整個場景
• 沒有特定的光源，不需要指定位置
• 均勻照射，需要配和其它光源弱化陰影

構造函數聲明
THREE.AmbientLight( hex );

function initLight() {
            var light=new THREE.AmbientLight(0x0000ff);//藍色環境環境光
            var light_help=new THREE.SphereGeometry(16,16,16);
            light.add(new THREE.Mesh(light_help,new THREE.MeshBasicMaterial({color:0xffffff})));//藍色球體
            scene.add(light);
            }
function initObject() {
            var r=10;
            // var geometry = new THREE.SphereBufferGeometry( r,16,16);
            var geometry = new THREE.CubeGeometry(300,300,300,);
            //白色反射所有光線
            var material = new THREE.MeshLambertMaterial( { color:0xFFFFFF} );//白色
            var mesh = new THREE.Mesh( geometry,material);
            mesh.position = new THREE.Vector3(0,0,0);
            scene.add(mesh);
            }

2.點光源

點發散光，例如蠟燭、白熾燈
maya點光測試
maya創建點光源預覽

three代碼重構

點光源PolintLight的構造函數
PointLight(color,intensity,distance);

• color顏色，16進制
• intensity強度，默認1.0，100%強度
• distance距離光源的距離，超過這個距離越遠光的強度會減弱

        function initLight() {
            var light_point = new THREE.PointLight(0x0000FF,1,1000);//點光源，綠色，rgb
            light_point.position.set(20,80,200);
             var sphere = new THREE.SphereBufferGeometry( 10, 16, 16 );//添加一個球體
            light_point.add(new THREE.Mesh(sphere,new THREE.MeshBasicMaterial({color:0x0000ff})));//綠色球體
            scene.add(light_point);
        }

2.聚光燈

光源的光線從一個錐體射出，在被照射的物體上產生聚光效果。舞臺燈光
有一個頂角α
maya聚光燈測試

three代碼重構

聚光燈的構造函數
THREE.SpotLight(hex,intensity,distance,angle,exponent);
前三個通俗易懂

• angle：聚光燈的角度，以弧度爲單位，這個角度和光源方向形成的角度
• exponent：衰減參數，越大衰減越快

				var spotLight = new THREE.SpotLight( 0xffffff, 1 );
				spotLight.position.set( 15, 40, 35 );
				spotLight.angle = Math.PI / 4;
				spotLight.penumbra = 0.05;
				spotLight.decay = 2;
				spotLight.distance = 200;

				spotLight.castShadow = true;
				spotLight.shadow.mapSize.width = 1024;
				spotLight.shadow.mapSize.height = 1024;
				spotLight.shadow.camera.near = 10;
				spotLight.shadow.camera.far = 200;
				scene.add( spotLight );

				lightHelper = new THREE.SpotLightHelper( spotLight );
				scene.add( lightHelper );

				shadowCameraHelper = new THREE.CameraHelper( spotLight.shadow.camera );
				scene.add( shadowCameraHelper );

3.平行光源（方向光）

平行光束，太陽光進入地球變成生活中的平行光。
maya平行光測試

平行光構造函數
THREEE.DirectionalLight=function(hex,instensizty);
three代碼重構

            var light_direction=new THREE.DirectionalLight(0x0000FF,1);//方向光藍色
            light_direction.position.set(10,20,6);
            var ld_help=new THREE.DirectionalLightHelper(light_direction,20,0x0000FF);
            scene.add(light_direction);//方向光
            scene.add(ld_help);