前言
踩坑记录:
1、UnrealBloomPass 辉光参照three官网示例
2、分层渲染分为两篇:本篇为最简单的layers分层渲染
一、辉光
1、引入库:
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass'
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass'
2、注意事项:
其他three组件都是常规的写法,开启炫光通道的时候如下注意点
主要注意渲染器中添加
renderer.autoClear = false
通道添加
bloomPass.renderToScreen = true
渲染使用合成渲染
composer.render()
部分代码
除去常规写法的【场景、相机、控制器、光源等】
只需要注意上述这部分代码
initrenderer () {
var width = document.getElementById('threecanvas').offsetWidth
var height = document.getElementById('threecanvas').offsetHeight
renderer = new THREE.WebGLRenderer({
antialias: true,
})
renderer.setPixelRatio(window.devicePixelRatio)// 设置分辨率与电脑的分辨率相同
renderer.setSize(width, height)
renderer.toneMapping = THREE.ReinhardToneMapping
renderer.autoClear = false
document.getElementById('threecanvas').appendChild(renderer.domElement)
}
addBloomPass () {
var width = document.getElementById('threecanvas').offsetWidth
var height = document.getElementById('threecanvas').offsetHeight
const renderScene = new RenderPass(scene, camera)
const bloomPass = new UnrealBloomPass(new THREE.Vector2(width, height),1.5,0.4,0.85)
bloomPass.renderToScreen = true
bloomPass.threshold = params.bloomThreshold
bloomPass.strength = params.bloomStrength
bloomPass.radius = params.bloomRadius
composer = new EffectComposer(renderer)
composer.setSize( width, height );
composer.addPass(renderScene)
composer.addPass(bloomPass)
}
function render () {
requestAnimationFrame(render)
update()
composer.render()
}
二、layers分层渲染
问题: 使用简单的layers分层渲染会出现深度遮挡问题,或者有其他物体在光晕后方,光晕不生效
注意事项和上述相同,然后给物体分层即可
我们只需要在渲染的时候设置好层级
注意合成的渲染通道在上,正常的渲染在下,相当于两个图层,然后把相机分给两个图层
图层0:正常渲染
图层1:使用通道渲染
function render () {
requestAnimationFrame(render)
update()
renderer.clear()
camera.layers.set(1)
composer.render()
renderer.clearDepth()
camera.layers.set(0)
renderer.render(scene, camera)
}
然后自己需要哪些物体使用炫光的通道,就把这个物体
object.layers.set(1)
正常渲染的话
object.layers.set(0)
或不设置,正常的图层默认为0
总结
由于这种简单的layers分层会出现不确定性问题
下篇继续