乐趣区

关于javascript:详解Threejs中的光源对象

jiezi

光源的分类

  1. AmbientLight（环境光），PointLight（点光源），SpotLight（聚光源）和 DirectionalLight（平行光）是根底光源
  2. HemisphereLight（半球光源），AreaLight（区域光源），LensFlare（镜头光晕）是有非凡用处的光源

半球光源 HemisphereLight

  • 半球光间接搁置于场景之上，光照色彩从天空光线色彩色彩突变到高空光线色彩
  • 半球光不能投射暗影
  • 半球光能够创立出更加贴近天然的户外光照成果，就是为了模仿在户外场景中的反光成果

半球光源的利用

如果不应用 THREE.HemisphereLight，要模仿户外光照，通常是创立一个 THREE.DirectionalLight 来模仿太阳光，并且可能再增加一个 THREE.AmbientLight 来为场景提供根底色

半球光源的罕用属性

  • color：从天空收回的光线的色彩
  • groundColor：从高空收回的光线的色彩
  • intensity：光源照耀的强度。默认值为：1。
  • position：光源在场景中的地位。默认值为：(0, 100, 0)
  • visible：设为 ture（默认值），光源就会关上。设为 false，光源就会敞开。

半球光源的代码示例

var hemiLight = new THREE.HemisphereLight(天空的反光色彩, 高空的反光色彩, 光的强度)
// 这个也是默认地位
hemiLight.position.set(0, 100, 0)
scene.add(hemiLight)

环境光 AmbientLight

  • 环境光是没有特定方向的光源，会平均的照亮场景中的所有物体，次要是平均整体扭转 Threejs 物体外表的明暗成果，这一点和具备方向的光源不同，比方点光源能够让物体外表不同区域明暗水平不同
  • 环境光影响整个场景，它的光线没有特定起源然而又无处不在，它不能影响暗影生成，因为它没有方向，并且不能作为惟一光源，应用其余光源的同时应用 THREE.AmbientLight，目标是弱化暗影和增加一些色彩

环境光的代码示例

// THREE.AmbientLight 不须要指定地位，只须要指定色彩（十六进制）var ambientLight = new THREE.AmbientLight(0x0c0c0c)
scene.add(ambientLight)

环境光和半球光源的区别

  • 环境光分为 THREE.AmbientLight & THREE.HemisphereLight
  • THREE.AmbientLight 物体明暗比照无奈出现
  • THREE.HemisphereLight 物体明暗比照比拟显著
  • 如果想模仿真实世界，倡议用THREE.HemisphereLight，如果对三维的展示不是特地刻薄，能够用 THREE.AmbientLight 和 THREE.DirectionalLight

点光源 PointLight

  • 点光源就像生存中的白炽灯，光线沿着发光外围向外发散，同一立体的不同地位与点光源光线入射角是不同的，点光源照耀下，同一个立体不同区域是呈现出不同的明暗成果
  • 和环境光不同，环境光不须要设置光源地位，而点光源须要设置地位属性.position，光源地位不同，物体外表被照亮的面不同，远近不同因为衰减明暗水平不同

点光源的代码示例

var point = new THREE.PointLight(0xffffff)
// 设置点光源地位，扭转光源的地位
point.position.set(400, 200, 300)
scene.add(point)

平行光 DirectionalLight

  • 平行光顾名思义光线平行，对于一个立体而言，立体不同区域接管到平行光的入射角一样
  • 点光源因为是向周围发散，所以设置好地位属性 .position 就能够确定光线和物体外表的夹角
  • 对于平行光而言，次要是确定光线的方向，光线方向设定好了，光线的与物体外表入射角就确定了，仅仅设置光线地位是不起作用的
  • 在三维空间中为了确定一条直线的方向只须要确定直线上两个点的坐标即可，所以平行光提供了地位 .position 和指标 .target 两个属性来一起确定平行光方向
  • 指标 .target 的属性值能够是场景中任何一个三维模型对象，比方一个网格模型 Mesh，平行光会通过本身地位属性 .position 和.target示意的物体的地位属性 .position 计算出来
  • 平行光如果不设置 .position 和.target属性，光线默认从上往下照耀，也就是能够认为 (0,1,0) 和(0,0,0)两个坐标确定的光线方向
  • 留神一点平行光光源的地位属性 .position 并不示意平行光从这个地位向远处照耀，.position属性只是用来确定平行光的照耀方向，平行光你能够了解为太阳光，从有限远处照耀过去

平行光的代码示例

var directionalLight = new THREE.DirectionalLight(0xffffff, 1)
// 设置光源的方向：通过光源 position 属性和指标指向对象的 position 属性计算
directionalLight.position.set(80, 100, 50)
// 方向光指向对象网格模型 mesh，能够不设置，默认的地位是 0,0,0
directionalLight.target = mesh
scene.add(directionalLight)

聚光源 SpotLight

  • 聚光源能够认为是一个沿着特定方会逐步发散的光源，照耀范畴在三维空间中形成一个圆锥体
  • 通过属性 .angle 能够设置聚光源发散角度，聚光源照耀方向设置和平行光光源一样是通过地位 .position 和指标 .target 两个属性来实现

聚光源的代码示例

var spotLight = new THREE.SpotLight(0xffffff)
spotLight.position.set(200, 200, 200)
spotLight.target = mesh
// 设置聚光光源发散角度
spotLight.angle = Math.PI / 6
scene.add(spotLight)// 光对象增加到 scene 场景中

什么是光投影

在具备方向光源的作用下，物体会造成暗影投影成果

如何光投影计算

Three.js 物体投影模拟计算次要设置三局部

  1. 一个是设置产生投影的模型对象
  2. 一个是设置接管投影成果的模型
  3. 最初一个是光源对象自身的设置，光源如何产生投影

平行光投影计算代码示例

// 创立方向光光源
var directionalLight = new THREE.DirectionalLight(0xffffff, 1)
directionalLight.position.set(60, 100, 40)
scene.add(directionalLight)

// 设置用于计算暗影的光源对象
directionalLight.castShadow = true

// 设置计算暗影的区域，最好刚好严密突围在对象四周，如果计算暗影的区域过大：含糊，如果过小：看不到或显示不残缺
directionalLight.shadow.camera.near = 0.5
directionalLight.shadow.camera.far = 300
directionalLight.shadow.camera.left = -50
directionalLight.shadow.camera.right = 50
directionalLight.shadow.camera.top = 200
directionalLight.shadow.camera.bottom = -100

// 设置 mapSize 属性能够使暗影更清晰，不那么含糊
// directionalLight.shadow.mapSize.set(1024,1024)

聚光源投影计算代码示例

// 创立聚光光源
var spotLight = new THREE.SpotLight(0xffffff)
spotLight.position.set(50, 90, 50)
spotLight.angle = Math.PI /6
scene.add(spotLight)


// 设置用于计算暗影的光源对象
spotLight.castShadow = true

// 设置计算暗影的区域，留神包裹对象的四周
spotLight.shadow.camera.near = 1
spotLight.shadow.camera.far = 300
spotLight.shadow.camera.fov = 20

光投影计算的罕用属性

  • 模型 .castShadow 属性，.castShadow属性值是布尔值，默认false，用来设置一个模型对象是否在光照下产生投影成果
  • 模型 .receiveShadow 属性，.receiveShadow属性值是布尔值，默认false，用来设置一个模型对象是否在光照下承受其它模型的投影成果
  • 光源 .castShadow 属性，如果属性设置为true，光源将投射动静暗影，正告: 这须要很多计算资源，须要调整以使暗影看起来正确

  • 光源 .shadow 属性

    平行光 DirectionalLight 的.shadow属性值是平行光暗影对象 DirectionalLightShadow
    聚光源 SpotLight 的.shadow属性值是聚光源暗影对象SpotLightShadow

  • 暗影对象基类LightShadow

    LightShadow属性 .camera，察看光源的相机对象，从光的角度来看，以相机对象的察看地位和方向来判断，其余物体背地的物体将处于暗影中
    LightShadow 属性 .mapSize，定义暗影纹理贴图宽高尺寸的一个二维向量 Vector2，
    较高的值会以计算工夫为代价提供更好的暗影品质，宽高分量值必须 是 2 的幂 直到 给定设施的 WebGLRenderer.capabilities.maxTextureSize
    只管宽度和高度不用雷同 (例如，(512, 1024)是无效的)，默认值为 (512, 512)
    LightShadow属性 .map，该属性的值是WebGL 渲染指标对象WebGLRenderTarget，应用内置摄像头生成的深度图，超出像素深度的地位在暗影中，在渲染期间外部计算

参考文档一 ———— Threejs 光源对象
参考文档二 ———— HemisphereLight 和 AmbientLight 区别
参考文档三 ———— Threejs 官网示例

我是 fx67ll.com，如果您发现本文有什么谬误，欢送在评论区探讨斧正，感谢您的浏览！
如果您喜爱这篇文章，欢送拜访我的 本文 github 仓库地址，为我点一颗 Star，Thanks~ :)
转发请注明参考文章地址，非常感谢！！！

退出移动版