携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第21天，点击查看活动详情 >
SpotLight
聚光灯是光线从一个点沿一个方向射出，随着光线照射的变远，光线圆锥体的尺寸也逐渐增大
SpotLight(color,intensity,distance,angle,penumbra,decay)
// color:聚光灯光照颜色,默认为0xffffff
// intensity:光照强度,默认为1;
// distance:光源发出光的最大距离,强度根据光源距离线性衰减;
// angle:光线散射角度,最大为Math.PI/2
// penumbra:聚光锥的半影衰减百分比 0-1取值,默认为0
// decay:沿着光照距离的衰减量。
const spotLight = new THREE.SpotLight(0x78ff00,0.5,10,Math.PI/4,0.25,1)
spotLight.position.set(0,2,3)
// 设置中心点后发现无效
spotLight.target.position.x = 5;
// 需要吧中心点加入scene中就成功了
scene.add(spotLight.target)
scene.add(spotLight)
关于性能消耗
各种光源可以满足我们的不同需求,但是为了预防灯光造成过多的性能消耗,因此我们需要尽可能少的添加光源或者使用消耗较小的光源
最小:AmbientLight & HemisphereLight
中等:DirectionalLight & PointLight
最高:SpotLight & RectAreaLight
Baking
通过烘焙支撑的光效损耗少,但移动光后光效不会随之变化,因为光的结果已经在纹理内部烘焙;
Helper
因为定位光是很困难的,我们无法明确光的具体位置,threejs为种光效添加了Helper,助于我们更好的定位光;类似线框的线性构图;
// 使用方法大同小异
// 点光源
const pointLight = new THREE.PointLight(0xff9000,0.5,1,1)
// 点光源辅助器
const pointLightHelper = new THREE.PointLightHelper(pointLight,2)
scene.add(pointLight)
scene.add(pointLightHelper)
半球光
点光源
聚光灯
// 平面光光源辅助器需要引入
import { RectAreaLightHelper } from 'three/examples/jsm/helpers/RectAreaLightHelper.js'
const rectAreaLightHelper = new RectAreaLightHelper(rectAreaLight)
scene.add(rectAreaLightHelper)
// 渲染时更新
window.requestAnimationFrame(()=>{
rectAreaLightHelper.position.copy(rectAreaLight.position)
rectAreaLightHelper.quaternion.copy(rectAreaLight.quaternion)
rectAreaLightHelper.update()
})
如果有哪里描述不准确或者有问题,欢迎大佬指正!
(≖ᴗ≖)✧
