6.光源
  • 1) 环境光(AmbientLight它的颜色会添加到整个场景和所有对象的当前颜色上),
  • 2) 点光源(PointLight空间中的一点,朝所有的方向发射光线),
  • 3) 聚光灯光源(SpotLight这种光源有聚光的效果,类似于台灯,吊灯,手电筒),
  • 4) 方向光(DirectionalLight也称无限光,从这种光源发出的光线可以看作是平行的,例如太阳光)
  • 5) 半球光光源(HemisphereLight,可以为室内场景创建更加自然的光照效果,模拟反光面和光线微弱的天气)
  • 6) 面光源(AreaLight使用这种光源可以指定散发光线的平面,而不是空间的一个点)
  • 7) 镜头炫光(LensFlare这不是一种光源,但是通过该炫光可以为场景中的光源添加炫目的效果)

前4种是比较常用的光源。

1 环境光——AmbientLight

  • 环境光的颜色会影响到整个场景,没有特定的光源,是模拟漫反射的一种光源,因此不需要指定位置。
  • 它能将灯光均匀地照射在场景中每个物体上面,一般情况下用来弱化阴影或者添加一些颜色到环境中,因此不能将AmbientLight作为场景中的唯一光源。
  • 注意一下AmbientLight会将颜色应用于整个场景,因此使用AmbientLight的时候,用色应该尽量的保守,如果颜色过于明亮,画面颜色就会饱和。
var ambientLight = new THREE.AmbientLight(‘#0c0c0c’); // ( color : Integer, intensity : Float )
scene.add(ambientLight);

还应该将物体材质换为对光照有反应的材质:

  • MeshBasicMaterial:对光照无感,给几何体一种简单的颜色或显示线框
  • MeshLambertMaterial:这种材质对光照有反应,用于创建暗淡的不发光的物体
  • MeshPhongMaterial:这种材质对光照也有反应,用于创建金属类明亮的物体

属性

  • castShadow: Boolean 被设置为undefined,在构造函数中环境光不能投下阴影
demo: AmbientLight.html

2 点光源——PointLight

点光源是一种单点发光,照射全部方向的光源,例如生活中的照明弹就属于点光源,由于点光源是向所有方向发射光线,因此不会产生阴影,

它有颜色color,强度intensity,距离distance,位置position,是否可见visible等几个属性,

PointLight光源的distance属性决定的是光线可以照射多远,值为0时,表示光线的亮度不会随着距离的增加而递减

var pointColor = "#ccffcc";
var pointLight = new THREE.PointLight(pointColor); // ( color : Integer, intensity : Float, distance : Number, decay : Float )
pointLight.distance = 100;//距离,决定了光线可以照射多远
pointLight.intensity = 1;//强度
scene.add(pointLight);

属性

  • decay 沿着光的距离减弱的量,默认1,物理照明可以设为2
  • distance
  • isPointLight
  • power: Float 在physically correct模式,光的强度,默认4Math.PI
  • shadow: LightShadow 计算灯光下的阴影,

方法

  • copy(source: PointLight)
demo: PointLight.html

3 聚光灯光源——SpotLight

聚光灯光源有一种锥形的效果,例如日常生活中的手电筒,灯笼等,该光源具有下面的属性

// white spotlight shining from the side, casting a shadow

var spotLight = new THREE.SpotLight( 0xffffff ); //( color : Integer, intensity : Float, distance : Float, angle : Radians, penumbra : Float, decay : Float )
spotLight.position.set( 100, 1000, 100 );

spotLight.castShadow = true;

spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.height = 1024;

spotLight.shadow.camera.near = 500;
spotLight.shadow.camera.far = 4000;
spotLight.shadow.camera.fov = 30;

scene.add( spotLight );

属性

  • castShadow(投影) 设置为true,则该光源可以产生阴影
  • target 决定了光源的方向,如果target属性的值出现移动的情况,那么光源也会跟着该target进行移动,该值必须为Object3D类型,因此可以是geom,也可以是具体的某一个点,这个代码中会有体现
  • angle 光线散射角度(锥形的顶角视宽),最大Math.PI/2.默认Math.PI/3
  • penumber: 设置半影的衰减,取值0~1,默认0.0,光锥中心向边缘递减的过程
  • decay: 衰减光的强度
  • distance 距离target的距离
  • shadow: SpotLightShadow 用来计算阴影 ####
  • shadowCameraNear 从距离光源的哪一点开始生成阴影
  • shadowCameraFar 从距离光源哪一点开始停止生成阴影
  • shadowCameraFov 形成阴影的视场
  • exponent 光强衰减指数,距离光源越远,光照强度越弱,但是减弱的速度是由该值控制
  • shadowCameraVisible 通过设置此值,可以看到光源在哪里,以及如何产生阴影,即该值主要用于调试
  • shadowDarkness 阴影强度,即阴影有多黑,场景渲染后该值不可以再修改了
  • shadowMapWidth 多少像素用来生成阴影,如果阴影的边缘看起来不够光滑参差不齐,那么可以考虑加大该值,该值同shadowDarkness,场景渲染后不可修改

方法

  • copy(source: SpotLight)

    点光源光线角度

demo: SpotLight.html
demo: 官方demo

4.方向光——DirectionalLight

方向光也称无限光(类似于太阳光的一种光源)

该光源可以看做是距离很远很远的光源,以至于该光源所发出的所有光线都是相互平行的,方向光光源的一个范例就是太阳,方向光光源不像聚焦光那样离目标越远越暗淡,被方向光光源照亮的整个区域接收到的光强是一样的

方向光光源的shadowCameraNear,far,left,right,top,bottom六个属性构成了一个方块的范围, 在这个方块的范围内的所有对象都可以投影或者接收投影,包围对象的方块范围定义的越紧密,投影的效果越好

var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 ) //( color : Integer, intensity : Float );
directionalLight.position.set(-40, 60, -10);
directionalLight.castShadow = true;
directionalLight.shadowCameraNear = 10;
directionalLight.shadowCameraFar = 40;
directionalLight.shadowCameraLeft = -10;
directionalLight.shadowCameraRight = 10;
directionalLight.shadowCameraTop = 10;
directionalLight.shadowCameraBottom = -10;

directionalLight.distance = 0;
directionalLight.intensity = 0.5;
directionalLight.shadowMapHeight = 1024;
directionalLight.shadowMapWidth = 1024;

属性

  • castShadow: Boolean 默认false。设置为true,灯光将投下动态的阴影,代价比较高
  • position: Vector3 Object3D.DefaultUp设为(0,1,0),以便光从上到下发光
  • shadow: DirectionalLightShadow DirectionalLightShadow 来计算光的投影方向的光影
  • target: Object3D DirectionalLight从它位置指向target位置,默认(0,0,0),场景中的默认位置需要发生变化时light.target = newObj;

方法

  • copy(source: DirectionLight)

光源示意图: 方向光源示意图

demo: DirectionalLight.html

HemisphereLight半球光源

一种直接位于场景上方的的光源,颜色从天空颜色逐渐褪色到地面颜色 ,不能用于投射阴影

我们模拟室外光照的时候,可以使用方向光源来模拟太阳,再添加一个环境光源,为场景添加基础色, 但是这样看起来不太自然,因为室外的光并不都是来自于上方,很多是来自于空气的散射和地面的反射,以及其他物体的反射,所以在使用方向光源来模拟太阳的情况下再添加一个半球光就自然多了.

构造函数

HemisphereLight(天空的反光颜色,地面的反光颜色,光的强度);

特性

  • castShadow/color/groundColor/position/isHemisphereLight

方法

copy(source: HemisphereLight)

demo: HemisphereLight.html

镜头眩光----LensFlare

当我们直接朝着太阳拍照时就会出现镜头眩光,对于游戏或者三维图像来说,镜头眩光会使得场景看起来更真实

构造函数

LensflareElement( texture : Texture, size : Float, distance : Float, color : Color, blending : Materials ) // 除了第一个参数其余均为可选

blending 默认THREE.NormalBlending

demo: LensFlare.html

RectAreaLight

在一个矩形平面上均匀的发出光,模拟照明的窗户或条形照明

不支持阴影,仅仅MeshStandardMaterial和MeshPhysicalMaterial支持

还需要RectAreaLightUniformsLib.js

构造函数

ReactAreaLight(color: Integer,intensity: Float,width: Float,height: Float)

方法

  • copy(source: RectAreaLight)
demo: AreaLight.html
[官方demo](总结

1) 环境光源没有位置概念,会将颜色应用到场景的每一个物体上,主要作用是弱化阴影,给场景添加颜色 2) 点光源类似于照明弹,朝所有的方向发光,因此不产生阴影 3) 聚光灯光源类似于手电筒,形成锥形的光束,随着距离的增加而变弱,可以设定生成阴影 4) 方向光光源类似于太阳,从很远的地方发出的平行光束,距离越远,衰减的越多 5) 想要一个自然的室外效果,除了添加环境光弱化阴影,添加聚光灯为场景增加光线,还需要使用半球光光源将天空和空气以及地面的散射计算进去,使得更自然,更真实 6) 平面光光源定义了一个发光的发光体,需要使用webgl的延迟渲染机制 7) 眩光效果,在有太阳的时候使用眩光光源,会使得场景更真实 )


总结

  • 1) 环境光源没有位置概念,会将颜色应用到场景的每一个物体上,主要作用是弱化阴影,给场景添加颜色
  • 2) 点光源类似于照明弹,朝所有的方向发光,因此不产生阴影
  • 3) 聚光灯光源类似于手电筒,形成锥形的光束,随着距离的增加而变弱,可以设定生成阴影
  • 4) 方向光光源类似于太阳,从很远的地方发出的平行光束,距离越远,衰减的越多
  • 5) 想要一个自然的室外效果,除了添加环境光弱化阴影,添加聚光灯为场景增加光线,还需要使用半球光光源将天空和空气以及地面的散射计算进去,使得更自然,更真实
  • 6) 平面光光源定义了一个发光的发光体,需要使用webgl的延迟渲染机制
  • 7) 眩光效果,在有太阳的时候使用眩光光源,会使得场景更真实

threejs
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里只属于前端工程师。