鐵人檔案
探索各種互動感強烈的網頁效果，實際拆解並實作背後的前端視覺技術。系列將從 Vue、GSAP 與瀏覽器 API 開始，逐步探索 Canvas、SVG、p5.js、Matter.js、WebGL、GLSL、WebGPU、Three.js 與 3D 資產整合，記錄不同工具的實作方式、踩坑過程與適用情境。最後將這些實驗整合進個人作品集，打造兼具設計感與互動性的 Modern Web 體驗。
昨天透過 roughness 與 metalness，讓同一顆球呈現塑膠與金屬兩種不同的材質，但如果想呈現更粗糙的表面，或是不規則形狀，我們還可以怎麼做~ 今天...
昨天認識了 displacementMap 與 bumpMap，分別用來改變模型輪廓，以及模擬表面的凹凸光照。 今天繼續使用同一顆球體，再講解另外兩種貼圖：顏色...
雖然這幾天我們自己建立了塑膠、金屬、岩石、木材等不同材質，但實際上網路上有現成的「開放授權材質庫」可以使用。素材通常會提供一整套貼圖，包含顏色、法線、粗糙度與高...
前幾天透過 Three.js 的材質、貼圖與光線，讓物件表面有了不同的質感。但假設今天的材質不是剛體，他的表面會隨著環境的影響、使用者的互動，產生不同的形變，三...
轉眼間鐵人賽剩下六天了，接下來的時間，我們就融合前面有學到的技術，來動手做一個產品展示的網站~~ 既然是產品網站，那當然要先有產品阿，那我們就用 PS5 的手把...
大家在瀏覽一些 3C 產品的介紹網站時，有沒有看過隨著頁面捲動，產品跟著旋轉、放大，旁邊的介紹文字也依序出現的效果？ 今天我們就用 Lenis 來做這類互動。它...
昨天看到了一個很酷的網站 Aether 1，今天就來嘗試復刻他的 shader 效果~~ 延續昨天的 Lenis 捲動與產品運鏡，今天讓游標移動的位置留下短暫的...
今天繼續復刻 Aether 1 的互動效果。仔細觀察後，我發現游標移到畫面不同位置時，產品會被推向不同方向，接著慢慢回彈，看起來就像物件漂在水面上。搭配昨天做的...
倒數第二天~~ 還是繼續來繼續復刻 aether1.ai 的視覺效果，它透過許多細小的氣泡呈現出水中的感覺 聰明的你應該會想到，那不就是我們在 day10 提過...
終於來到最後一天了～呼呼。 最後一天想回到 UI，研究一個我一直很感興趣的主，iOS 的液態玻璃。 👉🏿 Demo 連結 液態玻璃 Apple 在 iOS 26...
