跳至主要內容

光照

Emilia Zhen大约 5 分钟canvasthree.js

AmbientLight 环境全局光

环境光会照亮场景中所有的物体，在计算物体的颜色的时候，都会叠加上环境光的颜色。

var light = new THREE.AmbientLight(0x404040) // 创建一个灰色的环境光
scene.add(light)

由于环境光作用于所有的物体，所有的材质，所以环境光是没有方向的，也无法产生阴影效果

DirectionalLight 平行光

平行光是以特定的方向发射的光。它产生的光都是平行的状态，主要用于模拟太阳光线。 创建平行光也接受两个值，颜色和光线强度

var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5) //创建一个颜色为纯白色并且强度为默认的一半的平行光
scene.add(directionalLight)

平行光除了可以动态修改光的颜色和强度外，还可以通过设置它的位置和目标位置来确定平行光的照射方向（两点确定一条直线的概念）

var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5)
directionalLight.color.set(0x000000) //将光照颜色修改为黑色
directionalLight.intensity = 1.0 //将光照强度修改为默认
directionalLight.position.set(10, 10, 10) //设置平行光的位置
directionalLight.target.set(0, 0, 0) //设置当前的平行光的朝向位置
scene.add(directionalLight)

添加阴影效果

平行光是可以产生投影效果的

  1. 设置渲染器可以渲染阴影效果
renderer.shadowMap.enabled = true // 渲染器
  1. 实例化灯光时，需要设置灯光渲染阴影
directionalLight = new THREE.DirectionalLight('#ffffff')
directionalLight.castShadow = true // 设置平行光投射投影
scene.add(directionalLight)
  1. 还需要设置模型哪些可以产生阴影和哪些模型可以接收阴影
sphere.castShadow = true //开启阴影
scene.add(sphere)
cube.castShadow = true //开启阴影
scene.add(cube)
plane.receiveShadow = true //可以接收阴影
scene.add(plane)

由于设置阴影是一项十分耗性能的工作，所以我们需要尽量设置合适的阴影渲染范围和密度。平行光阴影的实现原理是通过正交相机OrthographicCamera来通过检测当前模型，也就是directionalLight.shadow.camera就是一个正交相机，只要在这个正交相机可视范围内的可以投影的物体才可以被设置投影。并且我们可以通过设置一些相机的属性属性来实现产生阴影的范围

directionalLight.shadow.camera.near = 20 //产生阴影的最近距离
directionalLight.shadow.camera.far = 100 //产生阴影的最远距离
directionalLight.shadow.camera.left = -50 //产生阴影距离位置的最左边位置
directionalLight.shadow.camera.right = 50 //最右边
directionalLight.shadow.camera.top = 50 //最上边
directionalLight.shadow.camera.bottom = -50 //最下面
//这两个值决定生成阴影密度 默认512
directionalLight.shadow.mapSize.height = 1024
directionalLight.shadow.mapSize.width = 1024

PointLight 点光源

点光源就是从一个点的位置向四面八方发射出去光，一个简单的例子就是一个裸露的灯泡
点光源支持四个参数配置，除了前两个颜色和光的强度外，另外两个是照射范围和衰减度。
第三个参数照射范围，如果物体距离点光源超过这个距离，将不会受到点光源的影响，默认是所有的物体会受到点光源的影响。如果设置了参数，将按照第四个参数，衰减度的值来慢慢减少影响，默认是1，如果需要模拟现实中的效果，这个参数可以设置为2。

var pointLight = new THREE.PointLight(0xff0000, 1, 100, 2) //白色点光源
pointLight.position.set(50, 50, 50)
scene.add(pointLight)

这些属性也可以通过动态修改

pointLight.color.set(0x000000) //修改光照颜色
pointLight.intensity = 0.5 //修改光的强度
pointLight.distance = 50 //修改光的照射范围
pointLight.decay = 1.0 //修改衰减度

实现点光源阴影效果和实现平行光的阴影效果的设置基本一样，而且由于点光源是散射，阴影效果会终止在点光源的影响范围内。我们可以仿照平行光的阴影实现过程进行实现，只是将平行光修改为了点光源

pointLight = new THREE.PointLight('#ffffff')
pointLight.position.set(40, 60, 10)
//告诉平行光需要开启阴影投射
pointLight.castShadow = true
scene.add(pointLight)

SpotLight 聚光灯光源

聚光灯光源的效果也是从一个点发出光线，然后沿着一个一个圆锥体进行照射，可以模仿手电筒，带有灯罩的灯泡等效果。 实现聚光灯的案例最简单是直接设置一个颜色即可，默认照射原点位置的光照
第二个参数光照强度；第三个参数照射范围；第四个参数聚光灯椎体角度；，第五个参数设置交接渐变得过渡效果，聚光灯智能照射一定的区域物体，所以会出现光亮和无法照射地方的交接；第六个参数设置聚光灯的衰减度，和点光源一样

var spotLight = new THREE.SpotLight(0xffffff, 2.0, 100, Math.PI / 4, 0.5, 2.0)
spotLight.position.set(100, 1000, 100)
scene.add(spotLight)

修改相关配置项

spotLight.color.set(0x000000) //修改光照颜色
spotLight.intensity = 0.5 //修改光的强度
spotLight.distance = 50 //修改光的照射范围
spotLight.angle = Math.PI / 3 //修改光的照射弧度
spotLight.penumbra = 1.0 //修改交界过渡
spotLight.decay = 1.0 //修改衰减度

修改聚光灯的 target 来修改光的照射方向

spotLight.target.set(0, 1, 1) //修改照射方向

实现聚光灯阴影和实现平行光和点光源的设置一样，聚光灯的设置也是将可以生成阴影设置打开，并将聚光灯添加到场景中即可

spotLight = new THREE.SpotLight('#ffffff')
spotLight.position.set(40, 60, 10)
//告诉平行光需要开启阴影投射
spotLight.castShadow = true
scene.add(spotLight)

HemisphereLight 室外光源

这个光源主要是为了模拟在户外的环境光效果，比如在蓝天绿地的户外，模型下面会显示出来绿色的环境光，而上方则会受到蓝天的影响而颜色偏蓝。 实例化室外光源支持三个参数：天空的颜色，地面的颜色，和光的强度

var hemisphereLight = new THREE.HemisphereLight(0xffffbb, 0x080820, 1)
scene.add(hemisphereLight)

配置属性修改

hemisphereLight.color.set(0xffffff) //将天空颜色修改为白色
hemisphereLight.groundColor.set(0x000000) //将地面颜色修改为黑色

修改 position 配置项修改渲染方向

hemisphereLight.position.set(0, -1, 0) //默认从上往下渲染，也就是天空在上方，当前修改为了，天空颜色从下往上渲染
EmiliaZhen
Copyright © 2024 Emilia Zhen