three.js学习4_光源

  • A+
所属分类：Web前端
摘要

首先展示的是使用半球光引用的效果, 光源直接放置于场景之上，光照颜色从天空光线颜色颜色渐变到地面光线颜色。光照主要有
便宜好用的国外VPS推荐

Three.Light

three.js学习4_光源

首先展示的是使用半球光引用的效果, 光源直接放置于场景之上，光照颜色从天空光线颜色颜色渐变到地面光线颜色。光照主要有

  • AmbientLight 环境光
  • DirectionalLight 平行光
  • HemisphereLight 半球光
  • PointLight 点光源
  • RectAreaLight 平面光光源
  • SpotLight 聚光灯

由于three.js可视化还是不够完善, 因此有了众多光源的辅助对象, 每一种灯光都有自己的特性以及共性, 大量的灯光可以产生阴影, 后面一一介绍

灯光

Light有很多相关内容, 首先先看下众多灯光的效果

1. Light

光源的基类 - 所有其他的光类型都继承了该类描述的属性和方法

Light属性

  • color : Color
    • 光源的颜色。
    • 如果构造的时候没有传递，默认会创建一个新的 Color 并设置为白色。
  • intensity : Float
    • 光照的强度，或者说能量。
    • 在 physically correct 模式下, color 和强度 的乘积被解析为以坎德拉（candela）为单位的发光强度。 默认值 - 1.0

方法

  • copy ( source : Light ) : Light
    • 从source复制 color, intensity 的值到当前光源对象中。

2. AmbientLight

环境光会均匀的照亮场景中的所有物体

注意: 环境光不能用来投射阴影，因为它没有方向

构造函数

AmbientLight( color : Integer, intensity : Float )

  • color - (参数可选）颜色的rgb数值。缺省值为 0xffffff。
  • intensity - (参数可选)光照的强度。缺省值为 1。

属性

  • castShadow : 这个参数在对象构造的时候就被设置成了 undefined 。因为环境光不能投射阴影。

方法与Light相同

示例

无环境光样式

three.js学习4_光源

有环境光样式

three.js学习4_光源

有了环境光, 那么到处都会有光, 简单比喻, 白天, 在家里一个房间, 没开灯, 太阳光通过地板等物质反射光到房间, 那么房间也是亮的, 这就是环境光

3. DirectionalLight

平行光是沿着特定方向发射的光。这种光的表现像是无限远,从它发出的光线都是平行的。常常用平行光来模拟太阳光 的效果; 太阳足够远，因此我们可以认为太阳的位置是无限远，所以我们认为从太阳发出的光线也都是平行的。

注意 : 平行光设置旋转没有效果, 它的方向是从一个平行光的位置 position 到 target的位置。 (而不是一个只有旋转分量的'自由平行光')。

需要注意的属性

  1. position : Vector3

    假如这个值设置等于 Object3D.DefaultUp (0, 1, 0),那么光线将会从上往下照射。

  2. target : Object3D

    平行光的方向是从它的位置到目标位置。默认的目标位置为原点 (0,0,0)。
    注意: 对于目标的位置，要将其更改为除缺省值之外的任何位置,它必须被添加到 scene 场景中去。

4. HemisphereLight

光源直接放置于场景之上，光照颜色从天空光线颜色颜色渐变到地面光线颜色

注意 : 半球光不能投射阴影

构造函数

HemisphereLight( skyColor : Integer, groundColor : Integer, intensity : Float )

  • skyColor - (可选参数) 天空中发出光线的颜色。 缺省值 0xffffff。
  • groundColor - (可选参数) 地面发出光线的颜色。 缺省值 0xffffff。
  • intensity - (可选参数) 光照强度。 缺省值 1。

属性中需要注意的

  • color : Float

    在构造时传递的天空发出光线的颜色。 默认会创建 Color 并设置为白色（0xffffff）。

  • groundColor : Float

    在构造时传递的地面发出光线的颜色。 默认会创建 Color 并设置为白色（0xffffff）。

效果

带有HemisphereLight, 天空发出红色光

three.js学习4_光源

物体本来的颜色在AmbientLight有说明, 棕色光, 两种相乘, 得到上述颜色

5. PointLight

从一个点向各个方向发射的光源。一个常见的例子是模拟一个灯泡发出的光

构造函数

PointLight( color : Integer, intensity : Float, distance : Number, decay : Float )

  • color - (可选参数)) 十六进制光照颜色。 缺省值 0xffffff (白色)
  • intensity - (可选参数) 光照强度。 缺省值 1
  • distance - 这个距离表示从光源到光照强度为0的位置。 当设置为0时，光永远不会消失(距离无穷大)。缺省值 0.
  • decay - 沿着光照距离的衰退量。缺省值 1。 在 physically correct 模式中，decay = 2。

需要注意的属性

  1. decay : Float

    沿着光照距离的衰减量
    在 physically correct 模式下，decay 设置为等于2将实现现实世界的光衰减。
    缺省值为 1

  2. distance : Float

    如果非零，那么光强度将会从最大值当前灯光位置处按照距离线性衰减到0。 缺省值为 0.0

  3. power : Float

    光功率
    在 physically correct 模式中, 表示以"流明（光通量单位）"为单位的光功率。 缺省值 - 4Math.PI

6. RectAreaLight

平面光光源从一个矩形平面上均匀地发射光线。这种光源可以用来模拟像明亮的窗户或者条状灯光光源

注意:

  • 不支持阴影。
  • 只支持 MeshStandardMaterial 和 MeshPhysicalMaterial 两种材质。
  • 你必须在你的场景中加入 不支持阴影。
    只支持 MeshStandardMaterial 和 MeshPhysicalMaterial 两种材质。
    你必须在你的场景中加入 RectAreaLightUniformsLib 。

构造函数

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

  • color - (可选参数) 十六进制数字表示的光照颜色。缺省值为 0xffffff (白色)
  • intensity - (可选参数) 光源强度／亮度 。缺省值为 1。
  • width - (可选参数) 光源宽度。缺省值为 10。
  • height - (可选参数) 光源高度。缺省值为 10。

示例

three.js学习4_光源

7. SpotLight

聚光灯是从一个方向上的一个点发出，沿着一个圆锥体，它离光越远，它的尺寸就越大

构造器

SpotLight( color : Integer, intensity : Float, distance : Float, angle : Radians, penumbra : Float, decay : Float )

  • color - (可选参数) 十六进制光照颜色。 缺省值 0xffffff (白色)。
    intensity - (可选参数) 光照强度。 缺省值 1。
  • distance - 从光源发出光的最大距离，其强度根据光源的距离线性衰减。
  • angle - 光线散射角度，最大为Math.PI/2。
  • penumbra - 聚光锥的半影衰减百分比。在0和1之间的值。默认为0。
  • decay - 沿着光照距离的衰减量。

需要注意的属性

  • penumbra : Float

    聚光锥的半影衰减百分比。在0和1之间的值。 默认值 — 0.0

  • power : Float

    光功率: 在 physically correct 模式中， 表示以"流明（光通量单位）"为单位的光功率。 缺省值 - 4Math.P

  • target : Object3D

    平行光的方向是从它的位置到目标位置.默认的目标位置为原点 (0,0,0)。
    注意: 对于目标的位置，要将其更改为除缺省值之外的任何位置，它必须被添加到 scene 场景中去

辅助对象

1. DirectionalLightHelper

用于模拟场景中平行光 DirectionalLight 的辅助对象. 其中包含了表示光位置的平面和表示光方向的线段.

构造函数

DirectionalLightHelper( light : DirectionalLight, size : Number, color : Hex )

  • light-- 被模拟的光源.
  • size -- (可选的) 平面的尺寸. 默认为 1.
  • color -- (可选的) 如果没有设置颜色将使用光源的颜色.

需要注意的属性

  • lightPlane : Line

    包含表示平行光方向的线网格

  • light : DirectionalLight

    被模拟的光源.

  • color : hex

    构造函数中传入的颜色值. 默认为 undefined. 如果改变该值, 辅助对象的颜色将在下一次 update 被调用时更新

需要注意的方法

  • dispose () : null

    销毁该平行光辅助对象.

  • update () : null

    更新辅助对象，与模拟的 directionalLight 光源的位置和方向保持一致

示例

three.js学习4_光源

2. HemisphereLightHelper

创建一个虚拟的球形网格 Mesh 的辅助对象来模拟 半球形光源 HemisphereLight

构造函数

HemisphereLightHelper( light : HemisphereLight, sphereSize : Number, color : Hex )

  • light -- 被模拟的光源.
  • size -- 用于模拟光源的网格尺寸.
  • color -- (可选的) 如果没有赋值辅助对象将使用光源的颜色.

其他属性和方法类似

示例

three.js学习4_光源

天空射下来的是红光, 地面射上去的是黑光

3. PointLightHelper

创建一个虚拟的球形网格 Mesh 的辅助对象来模拟 点光源 PointLight.

构造函数

PointLightHelper( light : PointLight, sphereSize : Float, color : Hex )

  • light -- 要模拟的光源.
  • sphereSize -- (可选的) 球形辅助对象的尺寸. 默认为 1.
  • color -- (可选的) 如果没有赋值辅助对象将使用光源的颜色.

其他属性方法类似

示例

three.js学习4_光源

4. RectAreaLightHelper

创建一个表示 RectAreaLight 的辅助对象.

构造函数

RectAreaLightHelper( light : RectAreaLight, color : Hex )

  • light -- 被模拟的光源.
  • color -- (可选) 如果没有赋值辅助对象将使用光源的颜色.

其他属性方法类似

示例

three.js学习4_光源

5. SpotLightHelper

用于模拟聚光灯 SpotLight 的锥形辅助对象.

构造函数

SpotLightHelper( light : SpotLight, color : Hex )

  • light -- 被模拟的聚光灯 SpotLight .
  • color -- (可选的) 如果没有赋值辅助对象将使用光源的颜色.

示例

three.js学习4_光源

阴影

1. DirectionalLightShadow

这是用于在DirectionalLights内部计算阴影

注意: 与其他阴影类不同，它是使用OrthographicCamera来计算阴影，而不是PerspectiveCamera。这是因为来自DirectionalLight的光线是平行的

示例

three.js学习4_光源

便宜好用的国外VPS推荐