three.js中的平行光与环境光，你知道多少？

本节通过

• 平行光DirectionalLight
• 环境光AmbientLight

进一步了解光照对应模型Mesh表面的影响。

点光源辅助观察PointLightHelper

通过点光源辅助观察对象PointLightHelper 可视化点光源。

预览观察：可以借助相机控件OrbitControls 旋转缩放三维场景便于预览点光源位置

构造函数

PointLightHelper( light : PointLight, sphereSize : Float, color : Hex )

• light – 要模拟的光源.
• sphereSize – (可选的) 球形辅助对象的尺寸. 默认为 1.
• color – (可选的) 如果没有赋值辅助对象将使用光源的颜色.

代码示例

// 定义的点光源
const pointLight = new THREE.PointLight( 0xff0000, 1, 100 );
pointLight.position.set( 10, 10, 10 );
scene.add( pointLight );

// 定义的点光源辅助观察PointLightHelper
const sphereSize = 1;
const pointLightHelper = new THREE.PointLightHelper( pointLight, sphereSize );
scene.add( pointLightHelper );

改变点光源位置，观察光照效果变化。

directionalLight.position.set(100, 60, 50);

// 改变点光源位置，使用OrbitControls辅助观察
pointLight.position.set(-400, -200, -300);

环境光设置

环境光AmbientLight 没有特定方向，只是整体改变场景的光照明暗。

环境光会均匀的照亮场景中的所有物体。

环境光不能用来投射阴影，因为它没有方向。

构造函数

AmbientLight( color : Integer, intensity : Float )

• color - (参数可选）颜色的rgb数值。缺省值为 0xffffff。
• intensity - (参数可选)光照的强度。缺省值为 1。

创建一个环境光对象。

代码示例

const light = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light );

平行光设置

平行光是沿着特定方向发射的光。

这种光的表现像是无限远,从它发出的光线都是平行的。

常常用平行光来模拟太阳光 的效果; 太阳足够远，因此我们可以认为太阳的位置是无限远，所以我们认为从太阳发出的光线也都是平行的。

构造器

DirectionalLight( color : Integer, intensity : Float )

• color - (可选参数) 16进制表示光的颜色。 缺省值为 0xffffff (白色)。
• intensity - (可选参数) 光照的强度。缺省值为1。

代码示例

// White directional light at half intensity shining from the top.
const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
scene.add( directionalLight );

// 平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);

// 设置光源的方向：通过光源position属性和目标指向对象的position属性计算
directionalLight.position.set(80, 100, 50);

// 方向光指向对象网格模型mesh，可以不设置，默认的位置是0,0,0
directionalLight.target = mesh;
scene.add(directionalLight);

平行光辅助观察DirectionalLightHelper

通过点光源辅助观察对象DirectionalLightHelper 可视化点光源。

构造函数

DirectionalLightHelper( light : DirectionalLight, size : Number, color : Hex )

• light-- 被模拟的光源.
• size – (可选的) 平面的尺寸. 默认为 1.
• color – (可选的) 如果没有设置颜色将使用光源的颜色.

代码示例

const light = new THREE.DirectionalLight( 0xFFFFFF );
const helper = new THREE.DirectionalLightHelper( light, 5 );
scene.add( helper );

平行光与Mesh表面光线反射规律

平行光照射到网格模型Mesh表面，光线和模型表面构成一个入射角度，入射角度不同，对光照的反射能力不同。

光线照射到漫反射网格材质MeshLambertMaterial应Mesh表面，Mesh表面对光线反射程度与入射角大小有关。

构造函数(Constructor)

MeshLambertMaterial( parameters : Object )

• parameters - (可选)用于定义材质外观的对象，具有一个或多个属性。 材质的任何属性都可以从此处传入(包括从Material继承的任何属性)。
• 属性color例外，其可以作为十六进制字符串传递，默认情况下为 0xffffff（白色），内部调用Color.set(color)。

// 对比不同入射角，mesh表面对光照的反射效果
directionalLight.position.set(100, 0, 0);
directionalLight.position.set(0, 100, 0);
directionalLight.position.set(100, 100, 100);
directionalLight.position.set(100, 60, 50);
//directionalLight.target默认指向坐标原点

参考文档

• http://www.yanhuangxueyuan.com/doc/Three.js/AxesHelper.html