維度引擎 Dimension
用 Three.js 把課堂報告、專題成果與作品集放進同一個可捲動的 3D 空間。 物件旋轉、鏡頭推進都由捲動進度驅動，敘事節奏由讀者自己控制。
3D
SCENE
0ms
LATENCY
∞
LAYERS
Three.js
ScrollTrigger
GLSL
Dimension Studio
LSSH ×
VIBE CODING
探索維度與科技的起點 —— 向下捲動，背景的 3D 核心會隨著你的閱讀角度持續旋轉、推進。
單一頁面，三層維度
滾動進度直接驅動 3D 場景：物件旋轉、攝影機推拉、鏡頭視差一次到位， 手機與桌機共用同一套 GPU 管線，維持順暢幀率。
WebGL
Scroll-Driven
Lerp Smoothing
Single File
SCROLL — 3D 聯動中
scene.log
$ init three.js r128
✓ renderer online · icosahedron loaded
✓ 1500 star particles bound
✓ lights: amber #F0AA54 / cyan #6FC1D6
✓ satellites · halo · wave grid online
$ bind scroll → rotation
08
SECTIONS
60
FPS TARGET
1
FILE
// core dimension
核心維度 學校特色
捲動到這裡，背景的科技晶體正好轉到側面。前方是社團的兩條主軸： 把想法立體化，以及和 AI 一起把程式寫出來。
協作創作 Vibe Coding
與 AI 並肩寫程式：用自然語言描述需求，快速長出可運行的網頁原型， 再逐步雕出細節。一個人也能走完「發想 → 原型 → 上線」的完整流程。
10×
SPEED
24/7
PAIR
0
SETUP
AI Pair
Prototype
Open Source
// metrics
量化的成果
從社課到競賽，從一個人寫第一行 code 到整組做出可上線的專案—— 這些數字是累積出來的，不是一次到位。
PROJECTS
120+
完成專案
AWARDS
45
競賽獎項
MEMBERS
300+
社團成員
3D 場景敘事
攝影機沿路徑推進，物件依劇本旋轉，把簡報變成可以走進去的空間。
效能與行動裝置
DPR 上限、粒子數量與過場複雜度都依裝置降載，維持穩定幀率。
可讀性優先
毛玻璃層與暗角確保文字對比，3D 只當背景，不搶走內容的注意力。
WEBGL ✦ SCROLL-LINKED ✦ LERP SMOOTHING ✦ DIMENSION STUDIO ✦ VIBE CODING ✦ LSSH ✦
WEBGL ✦ SCROLL-LINKED ✦ LERP SMOOTHING ✦ DIMENSION STUDIO ✦ VIBE CODING ✦ LSSH ✦
// showcase
成員作品牆
每一件都是社課時間寫出來的：從第一行 code 到可分享的成品， 全部留有 Git 版本紀錄與開發日誌。
FEATURED
《維度展場》互動式作品集
把專題成果做成可以捲動的 3D 展場：攝影機沿路徑推進、作品卡依捲動浮現， 一台手機就能逛完全場——就是你現在看到的這套技術。
6 週
DEV TIME
60
FPS
1 檔
SINGLE FILE
Three.js
ScrollTrigger
Vite
《課表機器人》
用一句話查今天第幾節、誰在值班，自動同步學校行事曆。
Python
Discord.py
《校園地圖》
捲動式導覽頁，社團教室、飲水機、隱藏美食一頁看完。
Leaflet
GeoJSON
《AI 週報》
每週自動摘要社團動態與競賽資訊，直接寄進信箱。
LLM
Prompt
《直播計分板》
體育祭即時比分推播，全班手機同步更新不卡頓。
WebSocket
React
// roadmap
一學期的四段路徑
每兩週一個階段，從空白檔案走到可分享的成品，全部在社課時間內完成。
-
STEP 01
發想 Ideate
拆解題目、找痛點，用一小時把想法畫成可以講給別人聽的故事線。
-
STEP 02
原型 Prototype
跟 AI 對話長出第一版可點的畫面，先求能跑，再求好看。
-
STEP 03
測試 Test
找同學實際操作、錄下卡關點，用一輪迭代把體驗補齊。
-
STEP 04
發佈 Ship
部署上線、寫好說明，在社課成果發表會上展示你的作品。
每兩週一次
階段成果回顧
桌機 / 手機
雙裝置同步驗收
Git 版本控管
從第一行就開始
// voices
成員怎麼說
不是招生文宣，是大家寫完程式之後真的留下來的話。
以前看到 3D 網站都覺得是別人的事，結果第六週我自己的作品就在裡面轉給別人看。 其實只要把大目標切成四段，每段都來得及做完。
陳思宇
高二 · 前端組長
跟 AI 對話最難的不是下指令，是把想法講清楚。練到後來我連報告的大綱都是先跟它聊出來的。
林妤安
高一 · AI 組
我是完全沒寫過程式才進來的。第一次 code 跑起來那天，我在教室多留了二十分鐘。 現在換我在帶新人。
張柏維
高三 · 社長
// faq
常見問題
加入之前最常被問到的五題，先在這裡講清楚。
完全沒寫過程式，可以加入嗎？
可以，而且這是最常見的起點。第一階段就是從環境架設與第一行 code 開始， 全組進度以「能跑起來」為準，不會假設你已經會什麼。
需要自己帶電腦嗎？
建議帶，沒有也能先用教室機完成。作品的 Git 紀錄會綁在你的帳號， 换到哪台機器都能接著寫。
社課會占用很多時間嗎？
固定每週三 16:30–18:00，其餘是自己排的實作時間。 四段路徑都在社課內完成，不另加硬性作業。
一定要用 AI 寫程式嗎？
不強制。我們的做法是「先自己想、再問 AI、最後自己讀懂」—— AI 負責加速，理解還是要留在你腦子裡。
作品最後會被拿去商用嗎？
不會。作品著作權屬於創作者，社團只在取得你同意後用於成果發表與展示。
// join us
加入 LSSH
加入 LSSH
× VIBE CODING
捲到最底部，3D 核心縮小並升到畫面上方守護著這段資訊。 帶一台電腦來就好，剩下的從社課開始。
聚會時間
每週三 16:30 – 18:00
活動地點
資訊大樓 B-203 電腦教室
聯絡信箱
hello@lssh-vibe.club