前言

踩坑记录:
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').offsetWidthvar height = document.getElementById('threecanvas').offsetHeightrenderer = new THREE.WebGLRenderer({antialias: true,})renderer.setPixelRatio(window.devicePixelRatio)// 设置分辨率与电脑的分辨率相同renderer.setSize(width, height)renderer.toneMapping = THREE.ReinhardToneMappingrenderer.autoClear = falsedocument.getElementById('threecanvas').appendChild(renderer.domElement)
}
addBloomPass () {var width = document.getElementById('threecanvas').offsetWidthvar height = document.getElementById('threecanvas').offsetHeightconst renderScene = new RenderPass(scene, camera)const bloomPass = new UnrealBloomPass(new THREE.Vector2(width, height),1.5,0.4,0.85)bloomPass.renderToScreen = truebloomPass.threshold = params.bloomThresholdbloomPass.strength = params.bloomStrengthbloomPass.radius = params.bloomRadiuscomposer = 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分层会出现不确定性问题
下篇继续

threejs辉光通道01（UnrealBloomPass layers）相关推荐

threejs 辉光的使用在vue
引入插件 import {EffectComposer} from "three/examples/jsm/postprocessing/EffectComposer.js";im ...
THREEJS辉光与景深特效
效果预览辉光效果: 景深效果: 核心代码辉光和景深尽量把场景背景设置为黑色,要不影响效果. // 设置场景背景色为黑色 scene.background = new THREE.Color(0, ...
基于THREEJS场景中模型局部辉光效果
背景之前写过一个关于辉光的文章,全场景辉光(传送门),但是有些时候,我们的场景只需要一部分模型辉光,这就是本文的背景.还是基于ThreeJS实现. 原理简单来说,就是做两个合成器(Composer ...
threejs 局部辉光
首先看一下局部辉光的效果. 困扰很久的问题,终于解决了!!! 具体找到解决的方法是看了这里和这里2.也是看了这两个帖子之后才找到解决方法. 这种辉光效果也是用后期处理方法,大家可以先看官网上的这个例子 ...
使用threejs实现辉光大气层效果
最近想使用threejs实现辉光的特效,在查阅了一些资料之后,不仅实现了辉光的特效,还顺带实现了大气层特效,在写着色器的过程中有了一些理解~ 首要目标:为了实现辉光的着色器,我们把辉光分为几个步骤来实 ...
使用threejs实现地球辉光和大气层效果
使用threejs实现地球辉光和大气层效果使用插件方式在github上有glow的插件可以使用,效果不错. 地址:https://github.com/jeromeetienne/threex.g ...
threejs postprocessing-后处理通道效果使用详解
threejs的后期处理通道包提供了各种强大的效果,有了这些效果会大大降低代码难度,并且可以直接使用内置的着色器包,避免了复杂的着色器代码编写.后期处理通道一般都按顺序执行,后加入的会覆盖前面的通道. ...
Three.js实现分区Bloom辉光效果
一.效果展示辉光效果二.如何实现 1.基于EffectComposer后期渲染器. 2.借助UnrealBloomPass渲染通道,实现辉光效果. 3.了解three.js中 layers 分层的 ...
three.js 实现辉光（原生JS）
在three.js后期处理中,实现通道辉光效果,效果图如下: 一.模型创建在三维场景中,创建了两个对象mesh(正方体)bmesh(球体) //创建模型//正方体var geometry = new ...

threejs辉光通道01（UnrealBloomPass layers）

文章目录

前言