回作品列表 Side Project

Tori Art Portfolio

單屏 3D 體驗:24 件作品卡繞著一顆流動玻璃球旋轉

角色
藝術創作、3D 互動設計、前端實作
期間
2024.06 – 2026.06
範疇
Three.js、WebGL、藝術作品集
全螢幕 3D 場景:24 件作品卡繞著中央的流動玻璃球旋轉
1
全螢幕 3D 場景,整站不換頁
24
作品卡以 fibonacci 球面排列
12 + 12
插畫與立體創作

背景與挑戰

我的本業是 UI/UX 設計,但在那之前,我念的是雕塑。研究所那幾年留下了一批立體創作,加上這些年累積的插畫,一直散落在硬碟與社群帳號裡。我想為它們做一個值得被記住的容器——不是又一個格狀縮圖牆,而是一個本身就像作品的網站。

方向來自 cables.gl 的「Project Sphere」:整站只有一個全螢幕 3D 場景,沒有換頁、沒有長捲動,所有內容都在同一顆球上。對雕塑背景的我來說,這個想法格外親切——觀眾不是在翻型錄,而是繞著一件作品走動。挑戰在於,WebGL 與 shader 超出我原本的能力範圍,而這正是與 AI 協作的切入點。

設計決策

黑底全螢幕 3D 場景,插畫與立體作品卡以球面排列環繞中央流動玻璃球
Project Sphere 全景:24 件作品卡以 fibonacci 球面繞著中央流體旋轉
燈箱開啟中,顯示插畫作品 Star Tears 的原圖
燈箱模式:垂直捲動瀏覽單件作品的全部原圖

成果與反思

v3.1 已上線,部署在 Cloudflare Pages,由 GitHub Actions 自動發布。中央的玻璃流體後來抽成可重用模組 fluid-blob,提供 Embed 與 Standalone 兩種掛載模式並附繁中 README,整個資料夾可以直接搬去其他 side project 使用。

回頭看,這個專案對我有兩層意義。一是內容:插畫與立體創作終於有了一個像樣的家。二是過程:shader 與噪聲位移這些原本碰不到的技術,因為與 AI 協作而變成可以反覆嘗試的材料——我負責美感判斷與材質直覺,AI 負責把直覺翻譯成程式。某種程度上,這是我離開雕塑之後,又完成的一件雕塑。