用于在three.js中实现后期处理效果。该类管理了产生最终视觉效果的后期处理过程链。后期处理过程根据它们添加/插入的顺序来执行，最后一个过程会被自动渲染到屏幕上。

构造函数
EffectComposer( renderer

例子

outlinePass

outlinePass

需要引入：

<script src="./js/postprocessing/EffectComposer.js"></script>
<script src="./js/postprocessing/OutlinePass.js"></script>
<script src="./js/postprocessing/RenderPass.js"></script><script src="./js/postprocessing/ShaderPass.js"></script>
<script src="./js/shaders/CopyShader.js"></script>

方法如下：

function initEffectComposer(){composer = new THREE.EffectComposer( renderer );const renderPass = new THREE.RenderPass( scene, camera );composer.addPass( renderPass );outlinePass = new THREE.OutlinePass( new THREE.Vector2( window.innerWidth, window.innerHeight ), scene, camera );composer.addPass( outlinePass );outlinePass.edgeStrength = Number( 5 );//边缘长度outlinePass.edgeGlow = Number( 1 );//边缘辉光outlinePass.edgeThickness = Number( 3.6 );//边缘厚度 值越小越明显outlinePass.pulsePeriod = Number( 2.9 ); //一闪一闪周期outlinePass.visibleEdgeColor.set( 0xffff00 );//没有被遮挡的outline的颜色outlinePass.hiddenEdgeColor.set( 0xff0000 );//被遮挡的outline的颜色}

在render方法中添加：

composer.render();

对于需要使用outlinePass 的mesh对象，以数组的形式传入，如：

 outlinePass.selectedObjects = [intersects[0].object];

效果图：

threejs 效果合成器（EffectComposer）相关推荐

Threejs系列--13游戏开发--沙漠赛车游戏【使用效果合成器添加高级效果】
Threejs系列--13游戏开发--沙漠赛车游戏[使用效果合成器添加高级效果] 序言目录结构代码一览 Blur.js代码 Glows.js代码 Application.js代码代码解读运行结 ...
【Threejs效果：挖空几何体】ThreeBSP实现墙体挖洞
1 效果如下 2 代码如下基本思路: (1) 创建两个mesh,一个墙体,一个窗户 (2) 然后取墙体和窗户的差集,将差集转换成几何体 (3) 根据几何体新建mesh,并贴纹理依赖库有三个: im ...
【threejs效果:模型炸开】以钢铁侠obj模型为例
1 效果如下: 2 基本原理首先加载一个obj模型:然后遍历obj模型的所有children mesh:按一定比例改变每个子mesh的中心点位置即可: 爆炸代码: function modelExp ...
threejs效果比较好的天空和水面
threejs效果比较好的天空和水面目录前言一.引入水二.引入天空总结前言本文使用的是threejs提供的 Water 和 Sky 实现天空与水面.水的着色器代码比较复杂,threejs ...
three.js学习笔记(十九)——后期处理
介绍后期处理是指在最终图像(渲染)上添加效果.人们大多在电影制作中使用这种技术,但我们也可以在WebGL中使用. 后期处理可以是略微改善图像或者产生巨大影响效果. 下面链接是Three.js官方文档 ...
超详细——手把手教你用threejs实现一个酷炫的模型发光扫描效果(三)
上一篇文章 voidjay,公众号:web前端可视化超详细--手把手教你用threejs实现一个酷炫的模型发光扫描效果(二) 上一篇文章已完成基本效果的实现,本文则完成整个项目的灵魂:发光效果以及模型 ...
THREEJS辉光与景深特效
效果预览辉光效果: 景深效果: 核心代码辉光和景深尽量把场景背景设置为黑色,要不影响效果. // 设置场景背景色为黑色 scene.background = new THREE.Color(0, ...
WEB端三维可视化（threejs）02
前言(大部分解释都在代码注释上边) 上一个主要说自己选择的web引擎和前置安装步骤,接着直接开荤,进入正文. 本人的代码大部分都很简单,方便自己看,也方便各位同学们学习,所以不要吐槽. 个人认为:th ...
ThreeJS进阶之使用后期处理
什么是后期处理? 很多three.js应用程序是直接将三维物体渲染到屏幕上的. 有时,你或许希望应用一个或多个图形效果,例如景深.发光.胶片微粒或是各种类型的抗锯齿. 后期处理是一种被广泛使用.用于来 ...
three.js-EffectComposer辉光使用展示
three.js辉光 EffectComposer – 效果合成器 import { EffectComposer } from 'three/examples/jsm/postprocessing/ ...

threejs 效果合成器（EffectComposer）

例子

outlinePass

threejs 效果合成器（EffectComposer）相关推荐

最新文章

热门文章