Three.js 主要支持四种光源模式,分别是 环境光、点光源、平行光 和 聚光灯。另外有半球光源、面光源等,本节暂不涉及。
一. 环境光
Ambient Light:所有对象的整体光照模型,控制整个场景的明暗。
- var ambientLight = new THREE.AmbientLight(ambiColor); // 环境光颜色
- scene.add(ambientLight);
二. 点光源
Point Light:所有方向发射光线,是应用最多的光源。
- var pointColor = "#ccffcc";
- var pointLight = new THREE.PointLight(pointColor);
- pointLight.distance = 100; // 距离,决定了光线可以照射多远
- pointLight.intensity = 1; // 强度
- scene.add(pointLight);
通常点光源不用来做阴影,主要是因为投射方向用阴影图来描述比较困难,我们看到的阴影主要是 Spot Light 来实现。
三. 平行光
Directional Light:又称方向光,通常用来模拟太阳光(近似平行光源)。
- var pointColor = "#FFFFFF";
- var directionalLight = new THREE.DirectionalLight(pointColor);
- directionalLight.position.set(-40, 60, -10);
- directionalLight.castShadow = true;
- directionalLight.shadowCameraNear = 2;
- directionalLight.shadowCameraFar = 200;
- directionalLight.shadowCameraLeft = -50;
- directionalLight.shadowCameraRight = 50;
- directionalLight.shadowCameraTop = 50;
- directionalLight.shadowCameraBottom = -50;
- directionalLight.distance = 0;
- directionalLight.intensity = 0.5; // 光强度,默认为1
- directionalLight.shadowMapHeight = 1024; // 阴影图尺寸
- directionalLight.shadowMapWidth = 1024;
四. 聚光灯
Spot Light:聚光灯与手电筒类似,与相机视角很接近,常用作阴影图的产生。
- var spotLight = new THREE.SpotLight(pointColor);
- spotLight.position.set(-40, 60, -10);
- spotLight.castShadow = true; // 产生阴影
- spotLight.shadowCameraNear = 2; // 从距离光源的哪一点开始生成阴影
- spotLight.shadowCameraFar = 200; // 从距离光源哪一点开始停止生成阴影
- spotLight.shadowCameraFov = 30; // 形成阴影的视场
- spotLight.target = plane; // 光照照向地面
- spotLight.distance = 0; // 距离target的距离
- spotLight.angle = 0.4; // 光源照射出来的光柱有多宽