Lightapi
光源的基類。
Light( color, intensity )- color 光源色彩的RGB數值
- intensity 光源強度的數值。
看到的色彩
運用反光材料的物體，看到的色彩是由光的色彩和物體自身的色彩所決議（物理光）。
- 綠色光照在赤色物體上，看到為黑色。
- 顯現真正色彩運用白色光：0xffffff;
AmbientLight（環境光）
環境光是一種無處不在的光，就好像實際天下中的氛圍。環境光的光芒來自任何方向，因而，當你僅為場景指定環境光時，一切的物體不管向量怎樣，都將表現為一樣的明暗水平。
- 環境光的位置對顯現的結果無任何結果
環境光的組織函數THREE.AmbientLight只要一個參數——16進制的色彩值。
AmbientLight( hex )var light = new THREE.AmbientLight(0xff0000);
scene.add( light );
給場景增加赤色的環境光后，立方體和地面都顯現為赤色：AreaLight（地區光）
DirectionalLight（平行光）
平行光是一組具有方向的沒有衰減的平行光芒，它相似太陽光：雖然悠遠但打在物體上的光都來自統一個方向。
環境光的組織函數THREE.DirectionalLight有兩個參數——16進制的色彩值和光芒的強度（默以為1）。
DirectionalLight(hex, intensity)var light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.set(100, 150, 50);
scene.add(light);HemisphereLight（半球光）
PointLight（點光源）
點光源的光芒來自統一點，並向外發射。就好像燭炬發出的光和螢火蟲發出的光。
點光源的組織函數THREE. PointLight有三個參數，比平行光多了一個間隔參數，光會從光源經由distance的間隔一起衰減為0。
PointLight(hex, intensity, distance)var light = new THREE.PointLight(0xffffff, 1, 300);
light.position.set(50, 50, 50);
scene.add(light);SpotLight（聚光燈）
投影
Three.js的光源默許不會致使物體間的投影，翻開投影須要實行以下幾步：
- 翻開襯着器的輿圖暗影: renderer.shadowMapEnabled = true;
- 啟用光芒的投影：light.castShadow = true;
- 把模子設置為天生投影：mesh.castShadow = true;
- 把模子設置為吸收暗影：mesh.receiveShadow= true;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一個WebGL順序</title>
<style>body { margin: 0; overflow: hidden; }; canvas { width: 100%; height: 100%; }</style>
</head>
<body>
<script src="three.min.js"></script>
<script>
//建立場景
var scene = new THREE.Scene();
//建立攝影機
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(300, 300, 300);
//建立綠色立方體
var box = new THREE.Mesh(
new THREE.CubeGeometry(5, 5, 40),
new THREE.MeshLambertMaterial({
color: 0x00ff00
}));
box.position.set(0, 15, 0);
box.castShadow = true;
scene.add(box);
//建立赤色地面
var ground = new THREE.Mesh(
new THREE.CubeGeometry(200, 1, 200),
new THREE.MeshLambertMaterial({
color: 0xff0000,
}));
ground.receiveShadow = true;
scene.add(ground);
//建立襯着器並把設置背景為藍色
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x0000ff);
renderer.shadowMapEnabled = true;
document.body.appendChild(renderer.domElement);
//增加聚光燈
var light = new THREE.SpotLight( 0xffffff, 3 );
light.position.set( 100, 200, 50 );
light.castShadow = true;
light.shadowCameraNear = 50;
light.shadowCameraFar = 300;
light.shadowCameraFov = 30;
scene.add( light );
//襯着畫面
var render = function() {
requestAnimationFrame(render);
box.rotation.y += 0.01;
ground.rotation.y += 0.01;
camera.lookAt(scene.position);
renderer.render(scene, camera);
};
render();
</script>
</body>
</html>