Three.js - 光源使用详解3（环境光 HemisphereLight、镜头光晕 LensFlare）

Three.js - 光源使用详解3（环境光 HemisphereLight、镜头光晕 LensFlare）
1，基本介绍
使用 THREE.HemisphereLight 可以创建更加贴近自然的户外光照效果。
THREE.HemisphereLight 不会产生阴影。
THREE.HemisphereLight 的优势：
如果不使用 THREE.HemisphereLight，要模拟户外光照，通常是创建一个 THREE.DirectionalLight 来模拟太阳光，并且可能再添加一个 THREE.AmbientLight 来为场景提供基础色。
但是，这样的光照效果看起来并不怎么自然。因为在户外，并不是所有的光源都来自上方（很多是来自大气的散射和地面以及其他物体的反射）。
THREE.HemisphereLight 光源就是为这种情形创建的。它为获得更自然的户外光照效果提供了一个简单的方式。

2，属性介绍
color：从天空发出的光线的颜色
groundColor：从地面发出的光线的颜色
intensity：光源照射的强度。默认值为：1。
position：光源在场景中的位置。默认值为：(0, 100, 0)
visible：设为 ture（默认值），光源就会打开。设为 false，光源就会关闭。

3，使用样例
创建半球光源就像创建其他光源一样简单，只需要给它指定接收自天空的颜色，接收自地面的颜色，以及这些光线的关照强度即可。

var hemiLight = new THREE.HemisphereLight(0x0000ff, 0x00ff00, 0.6);
hemiLight.position.set(0, 100, 0); //这个也是默认位置
scene.add(hemiLight);

4，效果图
下面左右两个场景中环境光源使用的初始值分别是：(0x0000ff, 0x00ff00, 0.6)、(0xffffff, 0x000000, 1)

六、THREE.LensFlare（镜头光晕）
1，基本介绍
当我们直接朝着太阳或者另一个非常明亮的光源拍照时就会出现镜头光晕效果（lens flare）。
使用 THREE.LensFlare 可以很方便地在场景中添加一个镜头光晕，这样会让场景看上去更加真实。
THREE.LensFlare 自身不会产生任何光照效果，也不会产生阴影。

2，属性介绍
texture：纹理。纹理就是一个图片，用来决定光晕的形状。
size：尺寸。可以指定光晕多大。这个尺寸的单位是像素。如果将它指定为 -1，那么将使用纹理本身的尺寸。
distance：距离。即从光源（0）到摄像机的距离。使用这个参数将镜头光晕放置在正确的位置。
blending：混合。我们我们可以为光晕提供多种材质。混合模式决定了如何将它们混合在一起。镜头光晕默认的混合方式是 THREE.AdditiveBlending。
color：光晕的颜色。

3，准备工作
如果需要往场景中添加一个镜头光晕，首先我们需要将渲染器 THREE.WebGLRenderer 对象的 alpha 配置属性设置为 true。

var renderer = new THREE.WebGLRenderer({
  alpha: true
});

4，基本用法
（1）代码说明
由于镜头光晕并不会照亮物体，所以我们首先添加一个平行光源。
接着创建一个镜头光晕，将其放在光源处，这样看起来就像是光源产生的光晕。

//创建平行光源
var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(30, 10, -50);
directionalLight.castShadow = true;
directionalLight.target = plane;
directionalLight.intensity = 2;
directionalLight.distance = 0;
directionalLight.shadow.camera.left = -25;
directionalLight.shadow.camera.right = 25;
directionalLight.shadow.camera.top = 25;
directionalLight.shadow.camera.bottom = -25;
scene.add(directionalLight);
 
//创建镜头光晕
var loader = new THREE.TextureLoader()
var textureFlare0 = loader.load("./lensflare/lensflare0.png");
var flareColor = new THREE.Color(0xffaacc);
var lensFlare = new THREE.LensFlare(textureFlare0, 170, 0.0, THREE.AdditiveBlending,
   flareColor);
lensFlare.position.copy(directionalLight.position);
scene.add(lensFlare);

（2）效果图
原文:Three.js - 光源使用详解3（环境光 HemisphereLight、镜头光晕 LensFlare）

5，添加一些小光晕
（1）创建好主光晕后，我们还可以在页面中添加一些小的圆形失真图形。看起来像是光线照射过来时产生的光斑。
这里的小光晕并不是创建一个新的 THREE.LensFlare，而是使用刚创建的主光晕（THREE.LensFlare 对象）的 add 方法。这些新光晕使用的纹理是一个颜色很淡的圆。
add 方法介绍：
这个方法只需要指定纹理（texture）、尺寸（size）、距离（distance）和混合模式（blending）
通过该方法还可以接受两个额外的参数：新光晕的颜色（color）和不透明度（opacity）

//创建平行光源
//....
 
//创建镜头光晕
var loader = new THREE.TextureLoader()
var textureFlare0 = loader.load("./lensflare/lensflare0.png");
var textureFlare3 = loader.load("./lensflare/lensflare3.png");
var flareColor = new THREE.Color(0xffaacc);
var lensFlare = new THREE.LensFlare(textureFlare0, 170, 0.0, THREE.AdditiveBlending,
   flareColor);
lensFlare.add(textureFlare3, 60, 0.6, THREE.AdditiveBlending);
lensFlare.add(textureFlare3, 70, 0.7, THREE.AdditiveBlending);
lensFlare.add(textureFlare3, 120, 0.9, THREE.AdditiveBlending);
lensFlare.add(textureFlare3, 70, 1.0, THREE.AdditiveBlending);
lensFlare.position.copy(directionalLight.position);
scene.add(lensFlare);

（2）效果图
原文:Three.js - 光源使用详解3（环境光 HemisphereLight、镜头光晕 LensFlare）

原文出自：www.hangge.com 转载请保留原文链接：http://www.hangge.com/blog/cache/detail_1811.html