THREE.js中的光源

THREE中的光源包含多种
其中基础光源有4种

光源	介绍
环境光	AmbientLight是一种基础光源，它的颜色会添加到整个场景和所有对象的当前颜色上
点光源	PointLight空间中的一点，朝所有的方向发射光线
聚光灯光源	SpotLight这种光源有聚光的效果，类似于台灯，吊灯，手电筒
方向光	DirectionalLight也称无限光，从这种光源发出的光线可以看作是平行的，例如太阳光

特殊光源有3种(这三种我们后面再详述)

光源	介绍
半球光光源	HemisphereLight，可以为室内场景创建更加自然的光照效果，模拟反光面和光线微弱的天气
面光源	AreaLight使用这种光源可以指定散发光线的平面，而不是空间的一个点
镜头炫光	LensFlare这不是一种光源，但是通过该炫光可以为场景中的光源添加炫目的效果

ambientLight

环境光光源会影响整个整个场景，该光线没有特定的来源，并且不会影响阴影的产生，不能将ambientLight作为场景的唯一光源，在使用其他光源的同时使用，可达到弱化阴影或者添加某种颜色的作用

var ambiColor = "#0c0c0c";
var ambientLight = new THREE.AmbientLight(ambiColor);
scene.add(ambientLight);

pointLight

点光源，如同环境光一样需要设置颜色即可生成一个点光源，但点光源可以设置位置、强度以及照射距离，大概代码如下：

var pointColor = "#ccffcc";
var pointLight = new THREE.PointLight(pointColor);
pointLight.distance = 100; // 光照距离
pointLight.position.set(-40, 60, -10);// 位置
pointLight.intensity  = 1;// 光照强度
pointLight.visible = true;// 点光源是否可见

白色部分为点光源效果，照射距离100，强度1.3，颜色#fcfcfc
白色部分为点光源效果，照射距离70，强度1.7，颜色#fcfcfc

spotLight

这个光源恐怕是自然界最常见但光源了，台灯，路灯等锥形光源均属于这一类

var spotLight0 = new THREE.SpotLight(0xcccccc);
spotLight0.position.set(-40, 30, -10);
spotLight0.lookAt(plane);
scene.add(spotLight0);

spotLight可设置但参数如下：

directionalLight

自然光源，类似太阳相对均为平行光照

       var pointColor = "#ff5808";
       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;
       directionalLight.shadowMapHeight = 1024;
       directionalLight.shadowMapWidth = 1024;


       scene.add(directionalLight);

其参数表如点光源相似，这里几个与阴影微调有关的属性暂且不表

hemisphereLight

半球光源，更加贴近自然光，自然界光源并不是如direcionalLight一样均来自于上方的平行光，而是包含了许多空气散射因素，半球光源就是弥补这个效果的。

var hemiLight = new THREE.HemisphereLight(0x0000ff, 0x00ff00, 0.6);
hemiLight.position.set(0, 500, 0);
scene.add(hemiLight);

其三个参数分别为：地面发出的光色、天空的光色、光照强度
对比只是用direcitonalLight和添加了hemisphereLight的效果之后，是不是添加了的更自然呢

添加前 添加后

AreaLight

平面光光源，不再标准THREE.js库而是扩展库中的光源，用来定义一个发光的矩形，不过该光源会对之前我们使用的webglRender造成较大的性能损失，需要在头里这样写：

 <script type="text/javascript" src="../libs/three.js"></script>

    <script type="text/javascript" src="../libs/stats.js"></script>
    <script type="text/javascript" src="../libs/dat.gui.js"></script>
    <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>

新的渲染方法：

var renderer = new THREE.WebGLDeferredRenderer({
            width: window.innerWidth,
            height: window.innerHeight,
            scale: 1, antialias: true,
            tonemapping: THREE.FilmicOperator, brightness: 2.5
});
//光源
var areaLight1 = new THREE.AreaLight(0xff0000, 3);
        areaLight1.position.set(-10, 10, -35);
        areaLight1.rotation.set(-Math.PI / 2, 0, 0);
        areaLight1.width = 4;
        areaLight1.height = 9.9;
        scene.add(areaLight1);

lensflares

镜头炫光，怎么说呢，就是一个炫光，先看效果

var lensFlare = new THREE.LensFlare(textureFlare0, 350, 0.0, THREE.AdditiveBlending, flareColor);