THREE.JS中的光源

Three.js中有很多各式各样的光源,不同的光源可以产生不同的光照效果。这篇文章主要介绍他们的区别,以及各自的应用场景。

目录:

  • AmbientLight (环境光)
  • PointLight (点光源)
  • SpotLight (聚光灯光源)
  • DirectionalLight (平行光)
  • HemisphereLight (半球光)
  • AreaLight (面光源)
  • LensFlare (镜头眩光)
    这不是一种光源,但是通过LensFlare 可以为场景中的光源添加眩光效果。

1.AmbientLight

基础光源,颜色会添加到整个场景和所有对象的当前颜色上。不能作为场景中的唯一光源。一般作为辅助使用,目的是弱化阴影或者添加一些颜色。

2.PointLight

空间中的一点,朝所有的方向发射光线。就像夜空中的照明弹。点光源不产生阴影。
点光源的属性:
color:颜色
intensity: 光照强度,默认为1
distance:距离。决定光线可以照射多远。光线的亮度不会随着距离的增加而递减。
position:位置
visible:是否可见。true,光源打开,false,光源关闭

3.SpotLight

聚光的锥形效果,类似台灯、天花板的吊灯或者手电筒。可以产生阴影。


soptlight.png

4.DirectinalLight

也叫无限光。这种光源发出的光线是平行的,例如太阳光。
场景中对象接收到的都是相同光强的光。这种光只用direction,color,intensity属性计算颜色和阴影。
与聚光灯光源一样,也可以设置几个属性来控制光照强度和投影的方法,属性基本相同。如position,target,intensity,distance,castShadow,onlyShadow,shadowCameraNear.....

5.特殊光源

HemisphereLight 半球光光源

用以创建更贴近自然的光照效果。例如室外环境,并不是所有的光照都来自上方,很多来自空气散射,地面散射等等。这种光源就是为了这种情形创建的。
var hemiLight = new THREE.HemisphereLight(0x0000ff, 0x00ff00 , 0.6)
hemiLight.position.set(0,500,0);
scene.add(hemiLight);
groundColor:从地面发出的光的颜色。
Color:从天空发出的光的颜色。
intensity:光线照射强度。

AreaLight 平面光光源

即光源为矩形。AreaLight不在Three.js标准库中。因此需要额外引用文件。并且应该使用WebGL延迟渲染器(WebGLDeferredRenderer对象),而不是WebGLRenderer。

LensFlare 镜头眩光

通过实例化THREE.LensFlare对象来创建镜头眩光效果。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容