Three.js (二) 光源、投影、光晕

光源

• 光的通用属性
  • fex：光的颜色，用16进制颜色表示(如0x00FF00)
  • intensity：光的强度，默认为1
  • castShadow：是否启用阴影 默认为false。
    环境光与半球光不能投射阴影。
    产生投影的光线需配置投影区域属性限制投影范围(节省性能)
• 每种光都有辅助线，将光源作为参数传入辅助线构造函数即可生成实例

var helper = new THREE.HemisphereLightHelper(hemiLight);
scene.add(helper);

环境光

THREE.AmbientLight( fex )
环境光是经过多次反射而来的光，无处不在，会照射到场景内的任何一个物体的任何一面，且具有相同的明暗程度，因此不会产生阴影。（这是因为，反射光可以从各个方向进入您的眼睛）

点光源

PointLight( fex, intensity, distance, decay )
由这种光源放出的光线来自同一点，且方向辐射自四面八方，光强度可随着距离衰减。例如萤火虫放出的光。

• distance：光强衰减为0处到光源的距离。 默认情况下，这个值为0，表示光源强度不衰减。
• decay： 沿着光照距离的强度衰退速度，默认为1。
• 阴影边界属性
  阴影区域类似透视投影相机的视野，为一个锥体
  • light.shadow.camera.near 默认值：50
  • light.shadow.camera.far 默认值：5000
  • light.shadow.camera.fov 默认值：50
• position： 光的位置，默认为(0,1,0)。

平行光

DirectionalLight( hex, intensity )
平行光又称为方向光，是一组来自无限远处的没有衰减的平行光线，类似太阳光的效果(太阳是如此遥远，所有的阳光照射到物体上都几乎来自同一个角度)。

平行光的方向总是为从光的位置position照向target的一个向量(因此对平行光实例做旋转没有效果)，其效果只与方向有关，与离物体的远近无关，其位置仅用于决定方向。

• position： 光的位置，默认为(0,1,0)，仅用于配合target决定光的方向，与离物体的远近无关。如位置从(0,0,100)，(0,0,50)，(0,0,1)分别照向(0,0,0)时， 效果完全一致。
• target： 目标位置，默认为原点(0,0,0)。
  注意: 对于目标的位置，要将其更改为除缺省值之外的任何位置，必须被添加到 scene 场景中去，这使得属性target中的 matrixWorld 会每帧自动更新。
  可以是一个已有对象，也可以新建一个Object3D实例。

var targetObject =  new THREE.Object3D(); 
targetObject.position.set(8, 0, 5);
scene.add(targetObject); 
light.target = targetObject;

• 阴影边界属性
  因光线都是平行的，阴影区域类似正投影相机的视野
  • shadow.camera.near：(0.5)投影近点。表示距离光源的哪一个位置开始生成阴影。
  • shadow.camera.far：(500)投影远点。表示到距离光源的哪一个位置可以生成阴影。
  • shadow.camera.left：(-5)投影左边界。
  • shadow.camera.right：(5)投影右边界。
  • shadow.camera.top：(5)投影上边界。
  • shadow.camera.bottom：(-5)投影下边界。

聚光灯

THREE.SpotLight( color, intensity, distance, angle, penumbra, decay )
从一个方向上的一个点发出，覆盖一个圆锥体范围，它离光越远，它的尺寸就越大。

• distance：光强衰减为0处到光源的距离。 默认情况下，这个值为0，表示光源强度不衰减。
• angle：光线散射角度，最大为Math.PI/2。
• penumbra：聚光锥的半影衰减百分比。在0和1之间的值。默认为0。
• decay： 沿着光照距离的强度衰退速度，默认为1。
• position：同点光源
• target：同平行光
• 阴影区域属性：同点光源

半球光

HemisphereLight( skyColor , groundColor , intensity )
光源具有上下两种不同的颜色，从天空光线颜色颜色渐变到地面光线颜色。 通常用于模拟户外光照，比起THREE.DirectionalLight模拟太阳光+THREE.AmbientLight为场景提供基础色的方案，HemisphereLight更为自然(因为在户外，并不是所有的光源都来自上方，很多是来自大气散射和地面以及其他物体的反射)。

• position： 同平行光仅用于设置方向，具体位置无意义。但无法设置target。
• visible：设为 ture（默认值），光源就会打开。

---

投影

投影需要以下配置

1. 为渲染器开启投影 renderer.shadowMap.enabled = true;
2. 存在允许投影的光源 light.castShadow = true;
3. 存在允许投影的物体 cube.castShadow = true;
4. 存在允许显示投影的物体 floor.receiveShadow= true;

可以配置渲染器的shadowMap.type属性变更投影样式

• THREE.BasicShadowMap：普通阴影映射
• THREE.PCFShadowMap：柔化边缘的阴影映射(默认)
• THREE.PCFSoftShadowMap：柔化边缘的软阴影映射

配置以下属性限制阴影质量，默认值为512,512

• light.shadow.mapSize.width
• light.shadow.mapSize.height

开启投影辅助线

scene.add(new THREE.CameraHelper( light.shadow.camera ))

---

光晕

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

• texture - 用于光晕的THREE.Texture（贴图）
• size - （可选）光晕尺寸（单位为像素）
• distance - （可选）和光源的距离值在0到1之间（值为0时在光源的位置）
• color - （可选）光晕的（Color）颜色(需使用THREE.Color封装，不能直接使用16进制颜色)

1. 要使用光晕，首先需要设置渲染器允许透明
2. 光晕必须和一个已有光源绑定
3. 同一光源的其他光晕/光斑可以通过.add(texture，size，distance，blendingType)添加到已有光晕上

var renderer = new THREE.WebGLRenderer({
       
       
  alpha: true
});
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/2, 0.6, THREE.AdditiveBlending);
lensFlare.add(textureFlare3, 70/2, 0.7, THREE.AdditiveBlending);
lensFlare.add(textureFlare3, 120/2, 0.9, THREE.AdditiveBlending);
lensFlare.add(textureFlare3, 70/2, 1.0, THREE.AdditiveBlending);
lensFlare.position.copy(light.position);
scene.add(lensFlare);

---

转载：https://www.jianshu.com/p/15f83fd6fd3f