Three.js后期處理效果(發(fā)光描邊OutlinePass)
Three.js后處理(發(fā)光描邊OutlinePass)
參考資料:Threejs中文網(wǎng)
查看threejs文件包目錄examples/jsm/postprocessing/
,你可以看到Three.js提供了一個擴展庫EffectComposer.js
,通過EffectComposer可以實現(xiàn)一些后期處理效果。
所謂threejs后期處理,就像ps一樣,對threejs的渲染結果進行后期處理,比如添加發(fā)光效果。
不同功能后處理通道
查看threejs文件包目錄examples/jsm/postprocessing/
,你可以看到threejs提供了很多后處理通道,想實現(xiàn)什么樣的后期處理效果,需要調(diào)用threejs對應的后處理通道擴展庫。
OutlinePass.js
:高亮發(fā)光描邊UnrealBloomPass.js
:Bloom發(fā)光GlitchPass.js
:畫面抖動效果
比如OutlinePass.js
擴展庫提供的類OutlinePass
就可以給一個模型添加一個高亮發(fā)光描邊,下面就給大家演示下如何實現(xiàn)。
引入EffectComposer.js
你可以在threejs文件包目錄examples/jsm/postprocessing/
找到擴展庫EffectComposer.js。
代碼中引入后處理擴展庫EffectComposer.js
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
大家都知道three.js WebGL渲染器執(zhí)行渲染方法.render()
會得到一張圖像,如果你需要對一個webgl渲染器的渲染結果進行后期處理,就把它作為EffectComposer
的參數(shù)。
// 創(chuàng)建后處理對象EffectComposer,WebGL渲染器作為參數(shù) const composer = new EffectComposer(renderer);
渲染器通道RenderPass
RenderPass.js擴展庫目錄:examples/jsm/postprocessing/
// 引入渲染器通道RenderPass import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
通過EffectComposer(renderer)
指定了需要后處理的渲染器WebGLRenderer
,渲染器通道RenderPass
的作用是指定后處理對應的相機camera
和場景scene
。
// 創(chuàng)建一個渲染器通道,場景和相機作為參數(shù) const renderPass = new RenderPass(scene, camera);
給EffectComposer
添加一個渲染器通道RenderPass
。
// 設置renderPass通道 composer.addPass(renderPass);
OutlinePass通道
OutlinePass
可以給指定的某個模型對象添加一個高亮發(fā)光描邊效果。
OutlinePass.js擴展庫目錄:examples/jsm/postprocessing/
// 引入OutlinePass通道 import { OutlinePass } from 'three/addons/postprocessing/OutlinePass.js';
創(chuàng)建OutlinePass通道
// OutlinePass第一個參數(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場景中有多個模型的話,你希望給哪個模型對象設置發(fā)光描邊效果,就可以通過OutlinePass的選擇對象屬性.selectedObjects
設置。
// 一個模型對象 outlinePass.selectedObjects = [mesh]; // 多個模型對象 outlinePass.selectedObjects = [mesh1,mesh2,group];
設置OutlinePass通道
最后把創(chuàng)建好的OutlinePass通道添加到后處理composer中。
// 設置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默認描邊效果
參考下節(jié)課具體講解
總結
到此這篇關于Three.js后期處理效果(發(fā)光描邊OutlinePass)的文章就介紹到這了,更多相關Three.js發(fā)光描邊OutlinePass內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
微信小程序?qū)崿F(xiàn)富文本圖片寬度自適應的方法
小程序里圖片會顯示不全,這時就應該做相應的處理,使小程序里圖片顯示正確,這篇文章主要介紹了微信小程序?qū)崿F(xiàn)富文本圖片寬度自適應的方法,感興趣的小伙伴們可以參考一下2019-01-01JavaScript將對象數(shù)組按字母順序排序的方法詳解
這篇文章主要介紹了JavaScript如何將對象數(shù)組按字母順序排序,本文介紹了三種解決方案,if條件語句 + sort(),localeCompare() + sort(),Collator() + sort(),有感興趣的同學可以跟著小編一起來看看2023-07-07在table中插入多行的js代碼(與insertAdjacentHTML相似的功能)
在table中插入多行,能使用與insertAdjacentHTML相似的功能2010-06-06詳解JavaScript如何控制并發(fā)請求數(shù)量
某些情況下,我們可能需要對需要執(zhí)行的多個異步任務進行異步數(shù)量控制,只允許固定數(shù)量的任務執(zhí)行,本文為大家整理了JS控制并發(fā)請求數(shù)量的相關代碼,希望對大家有所幫助2024-01-01cnblogs csdn 代碼運行框?qū)崿F(xiàn)代碼
大家用cnblogs,csdn博客發(fā)布技術文檔的時候,可以用下面的代碼實現(xiàn)運行功能。當然大家看了源碼就會發(fā)現(xiàn)其實方法還有很多。有更好的方法就發(fā)布一下啊。2009-11-11