Skip to main content

理解光源及应用

Demo查看

首选，在 Threejs 中 所有光源都是基于 THREE.Light 对象扩展而成的。

基本光源包含：

  • THREE.AmbientLight
  • THREE.PointLight
  • THREE.SpotLight
  • THREE.DirectinalLight

THREE.AmbientLight

THREE.AmbientLight 创建时，颜色将会应用到全局，该光源并没有特别的来源方向，而且它不会生成阴影， 所以，不能将 THREE.AmbientLight 作为场景中唯一的光源，因为它会把场景中的物体渲染为相同的颜色，无论什么形状。

在使用其它光源的时候同时使用它，目的是弱化阴影或给场景添加一些额外的颜色。

AmbientLight( color, intensity )

  • color -- 光源颜色的RGB数值。
  • intensity -- 光源强度的数值。

使用方法

var ambientLight = new THREE.AmbientLight('#ff00ff');
scene.add(ambientLight);

THREE.PointLight

THREE.PointLight 是一种单发光点、照射所有方向的光源，比如：夜空中的照明弹。该光源不会产生阴影（因为朝所有方向发散光线，在这种情况计算阴影对GPU负担太大）。

点光源照到不同物体表面的亮度是线性递减的，因此，离点光源距离越远的物体会显得越暗。

构造函数

PointLight( color : Integer, intensity : Float, distance : Number, decay : Float )

  • color -- 颜色的RBG数值。
  • intensity -- 光强的数值。
  • distance - 光强为0处到光源的距离，0表示无穷大。
  • decay - 沿着光照距离的衰退量。

使用方法

var pointLight = new THREE.PointLight( 0xff0000, 1, 100 );
light.position.set( 50, 50, 50 );
scene.add( light );

THREE.SpotLight

THREE.SpotLight 聚光灯光源，是一种锥形效果光源，属于常见光源，在产生阴影的时候比较有用。实例：手电筒。

构造函数

SpotLight( color : Integer, intensity : Float, distance : Float, angle : Radians, penumbra : Float, decay : Float )

  • 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; // 设置生成阴影

scene.add( spotLight );

特有属性

target 将聚光灯的焦点位于 target.position 处。

THREE.DirectinalLight

THREE.DirectinalLight 方向光可以看做是距离很远的光源，所发出的光线都是平行的，比如太阳。

方向光和聚光灯光源的区别：

  • 方向光不像聚焦光那样离目标越远越暗淡
  • 被方向光光源照亮整个区域接收到的光强是一样的

构造函数

DirectionalLight( color : Integer, intensity : Float )

  • color -- 光源颜色的RGB数值。
  • intensity -- 光源强度的数值。

使用特殊光源生成高级光照效果

特殊光源：

  • THREE.HemisphereLight
  • THREE.AreaLight

THREE.HemisphereLight​

THREE.AreaLight 半球光光源，这种光源可以为室外场景创建更加自然点光照效果。

应用场景

当你在室外的时候，并不是所有光都来自上方，很多空气的散射、地面的反射，以及其它物体的反射，THREE.AreaLight 就是为这种情形创建的。

构造函数

HemisphereLight( skyColor : Integer, groundColor : Integer, intensity : Float )

  • skyColor -- 从天空发出光的颜色
  • groundColor -- 从地面发出光的颜色
  • intensity -- 光线照射的强度。默认值为1。

THREE.AreaLight​

THREE.AreaLight 平面光光源，可以从很大的平面发射光线，而不是单个点。

如果要使用 THREE.AreaLight 光源，就不能用我们之前一直使用的 THREE.WebGLRenderer 对象，因为平面光光源氏一种非常复杂的光源，会对 THREE.WebGLRenderer 造成非常严重的性能损失， 可以用 THREE.WebGLDeferredRenderer （WebGL的延迟渲染器）对象在渲染场景时，可以处理复杂光照或者是光源很多的情况。

需要引入额外的代码文件：

<script type="text/javascript" src="../libs/WebGLDeferredRenderer.js"></script>
<script type="text/javascript" src="../libs/ShaderDeferred.js"></script>
<script type="text/javascript" src="../libs/RenderPass.js"></script>
<script type="text/javascript" src="../libs/EffectComposer.js"></script>
<script type="text/javascript" src="../libs/CopyShader.js"></script>
<script type="text/javascript" src="../libs/ShaderPass.js"></script>
<script type="text/javascript" src="../libs/FXAAShader.js"></script>
<script type="text/javascript" src="../libs/MaskPass.js"></script>

镜头眩光效果

THREE.LensFlare 创建镜头光晕。

LensflareElement( texture : Texture, size : Float, distance : Float, color : Color, blending : Materials )

  • texture -- THREE.Texture （可选）
  • size -- 像素尺寸 (-1 = 使用 texture.width)
  • distance -- 介于 (0-1) 的光源距离（0 = 在光源处）
  • blending -- 混合模式 - 缺省为 THREE.NormalBlending
  • color -- 镜头光晕的颜色。