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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。