threejs后期处理的基本使用方法之加特效
前言
后期处理:简单的说就是先渲染一张图存起来,在这张图上面"添油加醋",处理完后再渲染到屏幕上。这一过程three进行了封装,使用现成的可以更快实现需求
基本代码
// 引入后期处理基本的对象 import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js' import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js' ... // 因为是介绍后期渲染,省略场景初始化等代码 // 初始化效果组合器 this.EffectComposer = new EffectComposer(this.renderer) // 添加基本的渲染通道 this.RenderPass = new RenderPass(this.scene, this.camera) // 把通道加入到组合器 this.EffectComposer.addPass(this.RenderPass) // 渲染方法,不断调用render() _animate() { requestAnimationFrame(this._animate.bind(this)) // 组合器执行渲染 this.EffectComposer.render() }
基本流程
- 初始化一个效果组合器
- 把需要用的若干通道(也就是要进行的操作)依次添加到组合器中
- 组合器会按顺序执行各通道内的操作,上一通道的操作结果会传递给下一通道,直至最后都操作完,然后渲染到屏幕上
核心函数介绍
EffectComposer 效果组合器
作用:管理了后期处理的过程,根据通道的插入顺序,来执行通道内的代码(主要为着色器代码)
构造函数
需要传入平时初始化three场景时的渲染器WebGLRenderer, 用来后续渲染场景
// 引入 import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js' this.EffectComposer = new EffectComposer(渲染器)
重要方法:
addPass
this.EffectComposer.addPass(通道)
给EffectComposer添加后期处理通道,可以添加多个,依次执行
render
this.EffectComposer.render()
渲染,循环调用通道的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
官方案例
链接
threejs.org/examples/?q…
官方有很多封装好的通道,可以拿来直接使用
通道相关代码位置
three/examples/jsm/postprocessing/
案例演示
电脉冲故障风效果
代码
// 引入 import { GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass.js' // 初始化通道 const Pass = new GlitchPass() // 将此通道结果渲染到屏幕 Pass.renderToScreen = true // 把通道加入到组合器 this.EffectComposer.addPass(Pass)
描边效果
代码
// 传入长宽、场景、相机 const Pass = new OutlinePass(new THREE.Vector2(this.width, this.height), this.scene, this.camera) // 将此通道结果渲染到屏幕 Pass.renderToScreen = true // 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) effectCopyPass.renderToScreen = true // 加入到组合器 this.EffectComposer.addPass(effectCopyPass)
总结
此文只介绍了几个案例的基本使用,只要掌握使用的流程,其他的案例也可以很好的上手
到此这篇关于threejs后期处理的基本使用方法之加特效的文章就介绍到这了,更多相关threejs后期加特效内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://juejin.cn/post/7056255333596921892
相关文章
- 用PS将人像脸部打造成打散颗粒的效果,成品出来后很美,过程略复杂,需要耐心和细心。现在跟着步骤来做吧! 1、首先在PS里面打开这张图。 2、选择快速选择工具的增加...2016-12-21
使用 React 和 Threejs 创建一个VR全景项目的过程详解
这篇文章主要介绍了使用 React 和 Threejs 创建一个VR全景项目的过程详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06- 这篇文章主要为大家详细介绍了js实现可爱的气泡特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-09-05
- 在做3D项目时,我们经常需要模拟下雨,下雪的天气,有时也会模拟喷泉、着火等效果。这些效果需要使用名为粒子系统(particle)的技术来实现。使用ThingJS可以快速编写粒子效果,本文就来看看如何实现...2021-05-29
- 这篇文章主要为大家详细介绍了原生js轮播特效,简单实用的代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-05-22
- 本教程的目的当然不是让你欣赏楚楚动人落雁沉鱼的异国美女,而是教你如何用看起来很糟糕的笔刷、一系列图片以及图层调整制作生化大片中的场景。 本教程难度三颗星,...2016-09-14
- 这篇文章主要介绍了基于javascript html5实现翻书特效的实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-03-18
React + Threejs + Swiper 实现全景图效果的完整代码
全景图效果非常漂亮给人带来极好的用户体验效果,那么基于前端开发如何实现这种效果呢,下面小编给大家带来了React + Threejs + Swiper 实现全景图效果,感兴趣的朋友一起看看吧...2021-06-28- 这篇文章主要给大家介绍了关于利用Opencv实现图片的油画特效的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-02-28
- 常用HTML特效代码 1。忽视右键 <body oncontextmenu="return false"> 或 <body style="overflow-y:hidden"> 2。加入背景音乐 IE:<bgsound s...2016-09-20
- 这篇文章主要介绍了Winform下实现图片切换特效的方法,包括百叶窗、淡入、旋转等多种效果,需要的朋友可以参考下...2020-06-25
- 在动漫中有很多下雨的场景。这些场景都是怎么做到得呢?不难哦,用PS就能把它做出来。下面就是制作步骤。小编简单为大家介绍了一种方法:滤镜大法! 第一步,如下图操作所...2016-12-21
- 这篇文章主要介绍了如何用threejs实现实时多边形折射,对three.js库感兴趣的同学,可以参考下...2021-05-08
- 本教程主要是详细介绍渲染类滤镜做特效的方法,步骤很简单,大家可以试试看,也能够加深对滤镜的理解。 1、ctrl+n中新建图像,填充黑色背景,用默认颜色使用【滤镜_渲染_分...2016-12-31
新海诚(你的名字)滤镜特效如何实现?巧用代码实现新海诚滤镜效果的教程
最近新海诚滤镜特效很火,很多软件都制作了相关滤镜。那么,如何自己实现呢,小编分享的这篇文章教大家利用代码轻松实现新海诚特效的滤镜效果 最近新海诚滤镜特效很火,C...2016-12-21- 本次为大家带来了5种好看的CSS3动画特效,效果都还不错,想要学习的同学快来看看是如何制作的吧。 1、HTML5 3D旋转图片相册 可鼠标悬停 图片特效在HTML5应用中...2017-01-22
- 禁止屏蔽类 1.禁止右键 <body oncontextmenu=return(false)> 2.禁止选择 <body onselectstart="return false"> 3.禁止粘贴 <body onpa...2016-11-25
- 这篇文章主要介绍了Python实现了电视里的5毛特效,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-05-15
php_imagick实现图片剪切、旋转、锐化、减色或增加特效
一个可以供PHP调用ImageMagick功能的PHP扩展。使用这个扩展可以使PHP具备和ImageMagick相同的功能。 ImageMagick是一套功能强大、稳定而且免费的工具集和开发...2016-11-25- 这篇文章主要为大家介绍了threeJs实现波纹扩散及光标浮动效果详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪...2023-03-17