Chapter 01
Every Idea Deserves a Universe of Its Own
捲動時鏡頭會靠近,中央的多面體物件同步旋轉、放大 — 用 GSAP ScrollTrigger 把滾動進度直接綁定到 3D 場景參數。
背景是即時運算的自訂 GLSL Shader,中央物件是可互動的 Three.js 3D 模型,往下捲動鏡頭會跟著故事推進。
捲動時鏡頭會靠近,中央的多面體物件同步旋轉、放大 — 用 GSAP ScrollTrigger 把滾動進度直接綁定到 3D 場景參數。
物件材質是金屬感 Standard Material,外層包一層線框,隨場景色相緩慢偏移,營造玻璃與金屬並存的高級感。
這一段鏡頭拉遠、物件回到原始角度,剛好對應下方功能區塊登場 — 完整的一鏡到底捲動敘事。
對應影片裡 Design Rocket / 21st.dev Magic MCP 展示的技術層級,這裡用的是真正的引擎與函式庫,而不是漸層 + transform 的錯覺。
背景是一顆包住鏡頭的球體,內壁貼自訂 Fragment Shader,用多層噪聲即時算出流動的星雲色彩,每一幀都在 GPU 上重新運算。
中央的線框多面體 + 金屬球是真正的 WebGL 3D 網格,會隨滑鼠位置產生視差旋轉,不是 2D 圖片模擬。
三段章節文字對應三段鏡頭關鍵影格,捲動位置直接驅動 camera 的 z 軸與物件旋轉/縮放,做出「一鏡到底」的太空探索感。