Skip to main content

Three.js 之 光影之谜

Demo查看

基础知识

常识,发光到物体即光源,有光,就有影。要想体现物体的3D真实性,光影就是很重要的效果。 在threejs的世界里,也为光源提供了很多选择。

Light 光源基类

Light 是 Threejs 里所有光源的基类

Light( color : Integer, intensity : float )

  • color -- 光源颜色的RGB数值, 接受一个16进制的颜色值 如: 0xffffff 表示白色
  • intensity -- 光源强度的数值

各种派生类

基础光源:

  • AmbientLight 环境光 - 它的颜色会添加到整个场景和所有对象的当前颜色上
  • DirectionalLight 平行光 -- 例如:太阳光
  • PointLight 点光源 -- 空间中的一点,朝所有的方向发射光线
  • SpotLight 聚光源 - 聚光灯是由点光源发出,这种类型的光也可以产生投影,有聚光的效果

特殊光源:

  • HemisphereLight 半球光 - 可以为室内场景创建更加自然的光照效果,模拟反光面和光线微弱的天气
  • RectAreaLight 矩形区域光源 - 这种光从一个矩形面均匀地发射,可以用来模拟明亮的窗户或者带状的照明;可以产生投影 -

1、AmbientLight 环境光

环境光故名思意,是光线经过周围环境多次反射而来的光,没有确定的方向。

AmbientLight

AmbientLight( color, intensity )

  • color -- 光源颜色的RGB数值。
  • intensity -- 光源强度的数值。
var amblight = new THREE.AmbientLight( 0x404040 );
scene.add( amblight );

2、DirectionalLight 平行光

从一个特定的方向,而不是从一个特定的位置。这个光看起来就像光源位于无限远处,因此它产生的光线都是平行的。 比如太阳,因为太阳很遥远,看起来所有的阳光照射到物体上都几乎来自同一个角度。

AmbientLight

irectionalLight( hex, intensity )

  • hex -- 光源颜色的RGB数值。
  • intensity -- 光源强度的数值。
var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
directionalLight.position.set( 0, 1, 0 );
scene.add( directionalLight );

3、PointLight 点光源

点光源:某个位置特定的发光点,比如灯泡、蜡烛、萤火虫等

AmbientLight

PointLight( color, intensity, distance, decay )

  • color -- 颜色的RBG数值。
  • intensity -- 光强的数值。
  • distance -- 光强为0处到光源的距离,0表示无穷大。
  • decay -- 沿着光照距离的衰退量。
var light = new THREE.PointLight( 0xff0000, 1, 100 );
light.position.set( 50, 50, 50 );
scene.add( light );

4、SpotLight 聚光源

一种能投射锥形阴影区域的点光源,比如探照灯。

AmbientLight

SpotLight( color, intensity, distance, angle, penumbra, decay )

  • color -- 颜色的RBG数值。
  • intensity -- 光强的数值。
  • distance -- 光强为0处到光源的距离,0表示无穷大。
  • angle -- 光线散射角度,最大为Math.PI/2。
  • penumbra -- 聚光锥的半影衰减百分比。在0和1之间的值。默认为0。
  • decay -- 沿着光照距离的衰退量。
// 白色聚光灯从侧面发光,投射阴影
var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( 100, 1000, 100 );

spotLight.castShadow = true;

spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.height = 1024;

spotLight.shadow.camera.near = 500;
spotLight.shadow.camera.far = 4000;
spotLight.shadow.camera.fov = 30;

scene.add( spotLight );

材质与光源

物体的材质在渲染的时候,和光源有很重要的关系。比如,物体的纹理、色彩、透明度、光滑度、折射率、反光率等。

要想体现材质等真实性,光体现了很主要的效果,如果没有光,都是黑漆漆的,我们眼睛估计无法分辨物体的形态。

走夜路,打手电,通过光我们能分辨路上的石头、树枝、坑洞等。

B站视频讲解


本文部分内容参照及引用:

three.js docs