探索各種互動感強烈的網頁效果,實際拆解並實作背後的前端視覺技術。系列將從 Vue、GSAP 與瀏覽器 API 開始,逐步探索 Canvas、SVG、p5.js、Matter.js、WebGL、GLSL、WebGPU、Three.js 與 3D 資產整合,記錄不同工具的實作方式、踩坑過程與適用情境。最後將這些實驗整合進個人作品集,打造兼具設計感與互動性的 Modern Web 體驗。
昨天透過 roughness 與 metalness,讓同一顆球呈現塑膠與金屬兩種不同的材質,但如果想呈現更粗糙的表面,或是不規則形狀,我們還可以怎麼做~ 今天...
昨天認識了 displacementMap 與 bumpMap,分別用來改變模型輪廓,以及模擬表面的凹凸光照。 今天繼續使用同一顆球體,再講解另外兩種貼圖:顏色...