效果预览

辉光效果：

景深效果：

核心代码

辉光和景深尽量把场景背景设置为黑色，要不影响效果。

// 设置场景背景色为黑色
scene.background = new THREE.Color(0, 0, 0)// 创建渲染通道
const renderPass= new RenderPass(scene, camera)// 创建辉光bloom通道， 强度1.5，半径0，阈值0
const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0, 0)// 创建景深参数
const params = {focus: 0, // 聚焦aspect: ts.camera.aspect,aperture: 0.000005, // 孔径maxblur: 1, width: window.innerWidth,height: window.innerHeight
}// 创建景深通道
const bokehPass = new BokehPass(scene, camera, params)// 创建效果合成器
const composer = new EffectComposer(renderer)// 添加通道，注意顺序
composer.addPass(renderPass)
composer.addPass(bloomPass)
composer.addPass(bokehPass)// 别忘记在render中添加composer
function render() {renderer.render(scene, camera)composer.render()requestAnimationFrame(render)}

在向composer添加通道时，要注意顺序，如果辉光和景深共存的情况下，景深要添加在辉光后面，否则先设置景深再设置辉光后，景深效果就没了。

THREEJS辉光与景深特效相关推荐

threejs 辉光的使用在vue
引入插件 import {EffectComposer} from "three/examples/jsm/postprocessing/EffectComposer.js";im ...
threejs辉光通道01（UnrealBloomPass layers）
文章目录前言一.辉光 1.引入库: 2.注意事项: 主要注意渲染器中添加通道添加渲染使用合成渲染部分代码二.layers分层渲染总结前言踩坑记录: 1.UnrealBloomPass ...
基于THREEJS场景中模型局部辉光效果
背景之前写过一个关于辉光的文章,全场景辉光(传送门),但是有些时候,我们的场景只需要一部分模型辉光,这就是本文的背景.还是基于ThreeJS实现. 原理简单来说,就是做两个合成器(Composer ...
使用threejs实现辉光大气层效果
最近想使用threejs实现辉光的特效,在查阅了一些资料之后,不仅实现了辉光的特效,还顺带实现了大气层特效,在写着色器的过程中有了一些理解~ 首要目标:为了实现辉光的着色器,我们把辉光分为几个步骤来实 ...
使用threejs实现地球辉光和大气层效果
使用threejs实现地球辉光和大气层效果使用插件方式在github上有glow的插件可以使用,效果不错. 地址:https://github.com/jeromeetienne/threex.g ...
Deep Glow for mac，AE辉光特效插件
Deep Glow插件是一款强大的辉光特效插件,它可以帮助用户创建高质量的辉光效果.Deep Glow提供了多种调节选项,包括颜色.透明度.亮度.模糊程度等,可以让用户更加精细地控制辉光效果.同时,D ...
threejs 局部辉光
首先看一下局部辉光的效果. 困扰很久的问题,终于解决了!!! 具体找到解决的方法是看了这里和这里2.也是看了这两个帖子之后才找到解决方法. 这种辉光效果也是用后期处理方法,大家可以先看官网上的这个例子 ...
GPU Gems1 - 21 实时辉光（Real-Time Glow）
这章浅墨的文章讲的很细了,这里基本照扒一遍加深印象,原文链接:https://zhuanlan.zhihu.com/p/36499291 [章节概览] 这章讲到2D光照效果中的辉光(Glow)和光晕( ...
ps发光插件_PS插件自定义区域发光真实辉光插件 Oniric Glow Generator for Photoshop【资源分享1444】...
AE特效PR剪辑C4D影视后期全世界只有不到1%的人关注了你是个很特别的人 AE影视后期定期推送「AE+PR+C4D 影视特效合成婚庆剪辑调色电视广告包装微电影制作 SpeedGrade达芬 ...

THREEJS辉光与景深特效

效果预览

核心代码

THREEJS辉光与景深特效相关推荐

最新文章

热门文章