iT邦幫忙

鐵人檔案

2026 iThome 鐵人賽
回列表
Modern Web

前端互動視覺技術實作 LAB 系列

探索各種互動感強烈的網頁效果,實際拆解並實作背後的前端視覺技術。系列將從 Vue、GSAP 與瀏覽器 API 開始,逐步探索 Canvas、SVG、p5.js、Matter.js、WebGL、GLSL、WebGPU、Three.js 與 3D 資產整合,記錄不同工具的實作方式、踩坑過程與適用情境。最後將這些實驗整合進個人作品集,打造兼具設計感與互動性的 Modern Web 體驗。

參賽天數 22 天 | 共 22 篇文章 | 1 人訂閱 訂閱系列文 RSS系列文
DAY 21

Day 21|Three.js(4)材質:位移與凹凸貼圖

昨天透過 roughness 與 metalness,讓同一顆球呈現塑膠與金屬兩種不同的材質,但如果想呈現更粗糙的表面,或是不規則形狀,我們還可以怎麼做~ 今天...

2026-09-09 ‧ 由 mountainway54 分享
DAY 22

Day 22|Three.js(5)顏色貼圖與法線貼圖

昨天認識了 displacementMap 與 bumpMap,分別用來改變模型輪廓,以及模擬表面的凹凸光照。 今天繼續使用同一顆球體,再講解另外兩種貼圖:顏色...

2026-09-10 ‧ 由 mountainway54 分享