Three.js 火焰效果實現艾爾登法環動態logo 🔥
聲明：本文涉及圖文和模型素材僅用於個人學習、研究和欣賞，請勿二次修改、非法傳播、轉載、出版、商用、及進行其他獲利行為。 背景 《艾爾登法環》是最近比較火的一款游戲，觀察可以發現它的 Logo 是由幾個圓弧和線段構成。本文使用 React + Three.js 技術棧，實現具有火焰 ...
原文：three.js使用卷積法實現物體描邊效果
法線延展法 網上使用法線延展法實現物體描邊效果的文章比較多，這里不再描述。 但是這種方法有個缺點：當兩個面的法線夾角差別較大時，兩個面的描邊無法完美連接。如下圖所示： 卷積法 這里使用另一種方法卷積法實現物體描邊效果，一般機器學習使用該方法比較多。先看效果圖： 使用three.js具體的實現方法如下： 創建着色器材質，隱藏不需要描邊的物體進行渲染，將需要描邊的位置渲染成白色，其他位置渲染成黑色。 ...
2019-11-24 20:07 0 1274 推薦指數：
相關推薦
three.js使用gpu選取物體並計算交點位置
光線投射法 使用three.js自帶的光線投射器(Raycaster)選取物體非常簡單，代碼如下所示： 它是采用包圍盒過濾，計算投射光線與每個三角面元是否相交實現的。 但是，當模型非常大，比如說有40萬個面，通過遍歷的方法選取物體和計算碰撞點位置將非常慢，用戶體驗不好 ...
three.js 火焰效果
、renderer、camera分別是three.js的Scene、WebGLRenderer和Perspecti ...
three.js 給物體添加圖片
var skyBoxGeometry = new THREE.BoxGeometry( 5000, 5000, 5000 ); var texture = new THREE.TextureLoader().load("images/sky.jpg ...
three.js 之 透明物體不能正常顯示
這幾天遇到一個需求，類似這個案例：http://www.hightopo.com/demo/FaultDetection/ 就是這個透明漸變呼吸光柱，看到之后就想着寫個shader材質實現透明度漸變，並隨着時間微弱變化就好了，但是寫完之后，透明部分的渲染卻出了問題。 請先無視頂部紋理 ...
使用three.js加載3dmax資源，以及實現場景中的陰影效果
使用three.js可以方便的讓我們在網頁中做出各種不同的3D效果。如果希望2D繪圖內容，建議使用canvas來進行。但很多小伙伴不清楚到底如何為我們繪制和導入的圖形添加陰影效果，更是不清楚到底如何導入我們已經制作好的3dmax資源。所以這篇教程將簡要介紹如何將我們用3dmax制作 ...
three.js粒子效果（分別基於CPU&GPU實現）
前段時間做了一個基於CPU和GPU對比的粒子效果丟在學習WebGL的群里，技術上沒有多作講解，有同學反饋看不太懂GPU版本，干脆開一篇文章，重點講解基於GPU開發的版本。 一、概況 廢話不多說，先丟上demo，用移動設備更能明顯感覺性能差異。 維護粒子位移、顏色、尺寸：GPU版本 ...
three.js利用shaderToy實現簡單的雨雪效果
先上效果圖 實現代碼 注意：所有實現的着色器代碼均來自於ShaderToy網站（代碼中已標明出處，請尊重原作者版權）， 這里只是想展示一下如何利用該網站結合three.js 的后期處理來實現一些特效 代碼 pass.html ...