Three.js后處理(發(fā)光描邊OutlinePass)

參考資料：Threejs中文網(wǎng)

查看threejs文件包目錄examples/jsm/postprocessing/，你可以看到Three.js提供了一個(gè)擴(kuò)展庫EffectComposer.js,通過EffectComposer可以實(shí)現(xiàn)一些后期處理效果。

所謂threejs后期處理，就像ps一樣，對threejs的渲染結(jié)果進(jìn)行后期處理，比如添加發(fā)光效果。

不同功能后處理通道

查看threejs文件包目錄examples/jsm/postprocessing/，你可以看到threejs提供了很多后處理通道，想實(shí)現(xiàn)什么樣的后期處理效果，需要調(diào)用threejs對應(yīng)的后處理通道擴(kuò)展庫。

• OutlinePass.js：高亮發(fā)光描邊
• UnrealBloomPass.js：Bloom發(fā)光
• GlitchPass.js：畫面抖動(dòng)效果

比如OutlinePass.js擴(kuò)展庫提供的類OutlinePass就可以給一個(gè)模型添加一個(gè)高亮發(fā)光描邊，下面就給大家演示下如何實(shí)現(xiàn)。

引入EffectComposer.js

你可以在threejs文件包目錄examples/jsm/postprocessing/找到擴(kuò)展庫EffectComposer.js。

代碼中引入后處理擴(kuò)展庫EffectComposer.js

import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';

大家都知道three.js WebGL渲染器執(zhí)行渲染方法.render()會得到一張圖像，如果你需要對一個(gè)webgl渲染器的渲染結(jié)果進(jìn)行后期處理，就把它作為EffectComposer的參數(shù)。

// 創(chuàng)建后處理對象EffectComposer，WebGL渲染器作為參數(shù)
const composer = new EffectComposer(renderer);

渲染器通道RenderPass

RenderPass.js擴(kuò)展庫目錄：examples/jsm/postprocessing/

// 引入渲染器通道RenderPass
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';

通過EffectComposer(renderer)指定了需要后處理的渲染器WebGLRenderer，渲染器通道RenderPass的作用是指定后處理對應(yīng)的相機(jī)camera和場景scene。

// 創(chuàng)建一個(gè)渲染器通道，場景和相機(jī)作為參數(shù)
const renderPass = new RenderPass(scene, camera);

給EffectComposer添加一個(gè)渲染器通道RenderPass。

// 設(shè)置renderPass通道
composer.addPass(renderPass);

OutlinePass通道

OutlinePass可以給指定的某個(gè)模型對象添加一個(gè)高亮發(fā)光描邊效果。

OutlinePass.js擴(kuò)展庫目錄：examples/jsm/postprocessing/

// 引入OutlinePass通道
import { OutlinePass } from 'three/addons/postprocessing/OutlinePass.js';

創(chuàng)建OutlinePass通道

// OutlinePass第一個(gè)參數(shù)v2的尺寸和canvas畫布保持一致
const v2 = new THREE.Vector2(window.innerWidth, window.innerHeight);
// const v2 = new THREE.Vector2(800, 600);
const outlinePass = new OutlinePass(v2, scene, camera);

OutlinePass屬性.selectedObjects

three.js場景中有多個(gè)模型的話，你希望給哪個(gè)模型對象設(shè)置發(fā)光描邊效果，就可以通過OutlinePass的選擇對象屬性.selectedObjects設(shè)置。

// 一個(gè)模型對象
outlinePass.selectedObjects = [mesh];
// 多個(gè)模型對象
outlinePass.selectedObjects = [mesh1,mesh2,group];

設(shè)置OutlinePass通道

最后把創(chuàng)建好的OutlinePass通道添加到后處理composer中。

// 設(shè)置OutlinePass通道
composer.addPass(outlinePass);

渲染循環(huán)執(zhí)行EffectComposer.render()

渲染循環(huán)中后處理EffectComposer執(zhí)行.render()，會調(diào)用webgl渲染器執(zhí)行.render()，也就是說renderer.render(scene, camera)不用再執(zhí)行。

// 渲染循環(huán)
function render() {
    composer.render();
    // renderer.render(scene, camera);
    requestAnimationFrame(render);
}
render();

修改OutlinePass默認(rèn)描邊效果

參考下節(jié)課具體講解

總結(jié)

到此這篇關(guān)于Three.js后期處理效果(發(fā)光描邊OutlinePass)的文章就介紹到這了,更多相關(guān)Three.js發(fā)光描邊OutlinePass內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論