threejs后期处理的基本使⽤⽅法之加特效
⽬录
前⾔
基本代码
基本流程
核⼼函数介绍
EffectComposer 效果组合器
构造函数
重要⽅法：
RenderPass 渲染通道
构造函数
重要属性：
ShaderPass 着⾊器通道
官⽅案例
链接
通道相关代码位置
案例演⽰
电脉冲故障风效果
代码
描边效果
代码
泛光效果
BloomPass的参数
代码
总结
前⾔
后期处理：简单的说就是先渲染⼀张图存起来，在这张图上⾯"添油加醋"，处理完后再渲染到屏幕上。这⼀过程three进⾏了封装，使⽤现成的可以更快实现需求
基本代码
// 引⼊后期处理基本的对象
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'
...
// 因为是介绍后期渲染，省略场景初始化等代码
// 初始化效果组合器
this.EffectComposer = new derer)
// 添加基本的渲染通道
this.RenderPass = new RenderPass(this.scene, this.camera)
// 把通道加⼊到组合器
this.EffectComposer.addPass(this.RenderPass)
// 渲染⽅法，不断调⽤render()
_animate() {
requestAnimationFrame(this._animate.bind(this))
// 组合器执⾏渲染
der()
}
基本流程
初始化⼀个效果组合器
把需要⽤的若⼲通道（也就是要进⾏的操作）依次添加到组合器中
组合器会按顺序执⾏各通道内的操作，上⼀通道的操作结果会传递给下⼀通道，直⾄最后都操作完，然后渲染到屏幕上
核⼼函数介绍
EffectComposer 效果组合器
作⽤：管理了后期处理的过程，根据通道的插⼊顺序，来执⾏通道内的代码（主要为着⾊器代码）
构造函数
需要传⼊平时初始化three场景时的渲染器WebGLRenderer, ⽤来后续渲染场景
// 引⼊
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'
this.EffectComposer = new EffectComposer(渲染器)
重要⽅法：
addPass
this.EffectComposer.addPass(通道)
给EffectComposer添加后期处理通道，可以添加多个，依次执⾏
render
der()
渲染，循环调⽤通道的render()⽅法
RenderPass 渲染通道
构造函数
需要传⼊初始化场景时⽣成的场景对象跟相机对象
this.RenderPass = new RenderPass(this.scene, this.camera)
RenderPass通道的作⽤是把场景和相机作为参数传⼊，获得场景的渲染结果，不对渲染结果做特定处理。
简单说就是RenderPass⽤来⽣成第⼀张原始图，⽤来传给后⾯通道使⽤，所以⼀般RenderPass会作为第⼀个通道重要属性：
renderToScreen
默认值是false，true将处理的结果保存到帧缓冲区，false直接显⽰在canvas画布上⾯。
ShaderPass 着⾊器通道
需要传⼊⾃定义的着⾊器代码，控制渲染
const effectCopyPass = new ShaderPass(着⾊器代码)
着⾊器代码格式可以参照CopyShader.js three/examples/jsm/shaders/CopyShader.js
实现特效的代码js官⽅案例
链接
官⽅有很多封装好的通道，可以拿来直接使⽤
通道相关代码位置
three/examples/jsm/postprocessing/
案例演⽰
电脉冲故障风效果
代码
// 引⼊
import { GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass.js'
// 初始化通道
const Pass = new GlitchPass()
// 将此通道结果渲染到屏幕
// 把通道加⼊到组合器
this.EffectComposer.addPass(Pass)
描边效果
代码
// 传⼊长宽、场景、相机
const Pass = new OutlinePass(new THREE.Vector2(this.width, this.height), this.scene, this.camera) // 将此通道结果渲染到屏幕
// OutlinePass相关属性设置
Pass.visibleEdgeColor = new THREE.Color(76, 148, 156) // 可见边缘的颜⾊
Pass.hiddenEdgeColor = new THREE.Color(0, 1, 0) // 不可见边缘的颜⾊
Pass.edgeGlow = 1.0 // 发光强度
Pass.usePatternTexture = false // 是否使⽤纹理图案
Pass.edgeThickness = 2.0 // 边缘浓度
Pass.edgeStrength = 2.0 // 边缘的强度，值越⾼边框范围越⼤
Pass.pulsePeriod = 0 // 闪烁频率，值越⼤频率越低
// ⼀般⽣产环境中会配合⿏标事件，来改变selectedObjects，使选中的物体描边
Pass.selectedObjects = [需要添加外边框的⽹格模型]
// 将通道加⼊组合器
this.EffectComposer.addPass(Pass)
泛光效果
BloomPass的参数
strength 泛光效果的强度，值越⾼明亮区域越明显，较暗区域的亮度也会变⾼kernelSize 泛光效果的偏移量
sigma 锐利程度，值越⾼，泛光越模糊
resolution 泛光效果的解析图，值太低⽅块化就会加重
代码
// 引⼊
import { BloomPass } from 'three/examples/jsm/postprocessing/BloomPass.js'
import { CopyShader } from 'three/examples/jsm/shaders/CopyShader.js'
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js'
// 参数默认值strength = 1, kernelSize = 25, sigma = 4, resolution = 256
const Pass = new BloomPass(2.5, 25, 0.1, this.width)
// 加⼊到组合器
this.EffectComposer.addPass(Pass)
// BloomPass通道不能通过renderToScreen=true将结果渲染到屏幕上，
// 所以需要再加⼀个通道effectCopyPass来完成输出结果这⼀步
// effectCopyPass通道没有任何特殊效果, 只是输出结果
const effectCopyPass = new ShaderPass(CopyShader)
// 加⼊到组合器
this.EffectComposer.addPass(effectCopyPass)
总结
此⽂只介绍了⼏个案例的基本使⽤，只要掌握使⽤的流程，其他的案例也可以很好的上⼿
到此这篇关于threejs后期处理的基本使⽤⽅法之加特效的⽂章就介绍到这了，更多相关threejs后期加特效内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论