線上博覽會的前端做法：289 所學校的 3D 世界地圖與資訊架構

海外教育博覽會原本是約 60 名學生參與的線下活動。臺大海外教育博覽會與開發團隊合作四年後，成為超過 12,000 名學生登入參與的線上博覽會。線上版的前端用 Three.js 在瀏覽器內繪製 3D 世界地圖，289 所交換學校以小屋的形式立在 10 個分區的島嶼上；學校的名額、介紹與城市資料放在點開後的資訊視窗，積分、排行榜與活動頁面則收在彈出視窗。

以下依序說明場景、鏡頭、資料、視窗、載入與積分的資料流。有獎活動的整體做法見有獎活動平台的做法，整體建置範圍見活動平台與後台。

展示形式的選擇

交換學校遍布全球各大洲，共 289 所，資訊量大且複雜，一般一頁式網站難以一次呈現，畫面也不易整齊。博覽會的核心訊息是每個人都有交換的機會，網頁需要讓學生進站就看出選擇之多，也要讓有興趣的學生讀到每所學校的細節。因此首頁用 3D 世界地圖呈現全貌，學校細節、報名時程與活動資訊放在一頁式網站和資訊視窗。

近年許多線上展覽採用 VR。VR 的臨場感強，完整逛完一個展覽卻不容易，使用者容易迷失，內容也多以圖片與影片為主，不適合放置大量文字。學校資訊偏偏是大量的文字與清單。

評斷展示形式的依據是可用性。ISO 9241-11:2018 的定義是：指定的使用者在指定的使用情境中，以有效性、效率與滿意度達成指定目標的程度（ISO，2018）。標準同時註明，可用性描述的是互動的結果，不是產品本身的屬性。

3D 場景的組成

場景以 Three.js 建立，整頁只有一個 WebGL 繪製器，地圖與入場頁的雲層共用同一個場景和鏡頭，這類先看全景、再逐步拉近的路徑屬於3D 互動網站的範圍。10 個分區的地面各是一個模型，位置記錄在一份排版檔中，並排在同一片海上。地面使用預先烘焙好光影的貼圖，以不受光照的材質繪製，場景裡沒有燈光、陰影貼圖與後製效果。

預烘焙把光影的運算移到製作階段，執行時只剩貼圖取樣。MDN 的 WebGL 建議把顯示記憶體當預算保守編列，並提供不同的畫質選項（MDN Web Docs，2026）。地面貼圖共 11 張，尺寸為 1024 x 1024，以 KTX2 格式壓縮，合計約 1.5 MB。繪製解析度分兩級，桌機最高 2 倍，觸控裝置最高 1.5 倍；2 倍時不開多重取樣抗鋸齒，邊緣已經夠細，可省下顯示記憶體。

學校建築有 22 種造型，在 Blender 以程式腳本建模，每種造型各有近看版與遠看版，近看版約 7 至 43 KB，遠看版約 7 至 11 KB。每所學校的位置、朝向與大小記錄在一份資料檔，同一種造型的建築用 instancing 一次繪製。光影在製作時預先算好四個斜擺朝向，畫面上再依每棟實際的朝向內插。

各洲的屋頂與外牆依該區的調色盤配色，相鄰兩所學校需要分得出來。每所學校最近的三所，以及距離在四棟寬以內的學校都算相鄰，相鄰兩棟的屋頂色差與外牆色差，以 CIELAB 色彩空間的直線距離計算，至少要有 20。配色採貪婪的圖著色法，可選顏色最少的學校先配，並以學校代碼的雜湊決定從哪一格開始挑，所以同一所學校每次載入都是同一組顏色。

海面與天空使用 Three.js 的 Water 與 Sky 元件，另加近岸淺水與浪花線。鏡頭靜止超過 1 秒後降低重繪頻率，海面倒影的更新頻率再降一級；入場頁往下捲時降到 30 fps，第一屏捲出畫面後停止繪製；資訊視窗開著且鏡頭靜止時約 10 fps。

鏡頭與手勢

操作支援滑鼠拖曳、滾輪、觸控板、單指拖曳與雙指縮放。縮放採指數曲線，每一格輸入造成的放大比例一致；拖曳速度會乘上目前的縮放，所以遠看時拖一下就能移動足夠的距離。鏡頭追隨的平滑以每幀經過的時間計算，在不同幀率的裝置上手感一致。

手勢的細節依真實裝置調整。觸控從螢幕左右 20 px 以內起手時不拖動鏡頭，留給系統的返回手勢；指標移動超過 6 px 才算拖曳，所以從地名標籤上開始拖曳，放開時不會被當成點選；滑鼠視差只在寬度 768 px 以上的桌面版啟用。

縮放分成階段。拉近的過程中，分區標籤在校徽出現之前逐漸淡出；滾輪或雙指縮放第一次經過分區標籤的層級時有輕微的阻尼，輸入只生效四成，繼續滾動就會穿過；雙擊與鍵盤的加減鍵則一次走一階，依序是全景、分區標籤、學校、最近。點選分區或學校時，鏡頭用 1 秒移動到目標，再用 0.4 秒拉近。起始畫面就是最遠的全景，鏡頭看的位置限制在世界外框之內。

學校資料與搜尋

學校資料來自後端公開的唯讀介面：入場後依 10 個分區各取一份學校清單，再取一份國家名稱，整個瀏覽期間只取一次，地圖校徽、學校列表、搜尋與學校頁共用。地圖上的校徽位置記錄在座標檔中，以學校代碼與清單對應；入場頁、輪播與使用指南顯示的學校數，也都讀這份清單，加總為 289 所。

搜尋在瀏覽器內比對，不呼叫後端。輸入以半形或全形空白分隔，最多取 5 個關鍵字，每個關鍵字都要出現在校名、學校代碼、簡稱、英文名、國家或分區名稱之中。分區晶片可篩選列表，選定後鏡頭飛到該校。

手機的搜尋列固定在畫面下方，點開後以底部抽屜列出學校，教學改以底部面板呈現，選單由右上展開。資訊視窗內另有學校答題，讓學生更了解各校。

入場頁、視窗與網址

入場頁放完整的活動資訊，按下開始後鏡頭穿過雲層飛入地圖。頁面由上而下依重要性排序：

1. 地圖入口，放在最上方。
2. 核心訊息：每個人都有交換的機會。
3. 報名時程，接在核心訊息之後，目的是提高報名轉換率。
4. 積分遊戲，排在最後。

版面最上方確實有分量。Nielsen Norman Group 針對一般網頁所做的眼動研究，受試者 120 位，約 57% 的瀏覽時間落在首屏，約 74% 落在前兩屏（Fessenden，2018）。該研究的頁面為新聞、電商與部落格等，並非展會網站，這裡只取其對版面順序的提示：最想讓人看到的內容，放在最上方。

資訊視窗、節目、活動、公告與積分頁面都做成疊在地圖上的覆蓋層，每一層有自己的網址。打開一層時瀏覽器的歷史多一筆，手機的返回手勢或上一頁會先關掉最上面那一層，不會直接離開網站；網址列顯示最上層的路徑，例如 /map/分區代碼、/school/學校代碼、/live/節目代碼。直接開這些網址時，頁面先載入世界，再由鏡頭飛到對應的分區或學校；舊版的網址參數仍可使用，進站後轉成同一種路徑。

載入順序

10 個分區的地面各有遠看與近看兩版模型。遠看版合計約 2.8 MB，近看版合計約 17.7 MB；平常只載遠看版，鏡頭拉近某一區才換近看版，同時最多保留 2 區。合作單位島、活動島、節目與直播島的模型各不到 1 MB，等入場頁可以按下開始之後才下載，再用 0.9 秒淡入。

雲層貼圖在桌機是 4096 x 2048，手機縮成 2048 x 1024。下載量與記憶體的預算怎麼訂，見Web 3D 效能工程；同樣的分層載入用在建案看屋，見建案 3D 看屋網站的做法。

積分與排行榜的資料流

學生登入後，每日登入、逛博覽會內容、觀看活動直播與填寫問卷都可以累積積分，並結合排行榜。每一項積分各有開關，次數、時間與獎項都記錄在每屆一份的規則 JSON 中，由資料庫保存，後台可以修改，程式不寫死數字。規則的預設值、欄位白名單檢查與公開版本由同一個模組處理。

排行榜依累計總積分排名，只計入學生帳號，同分時先達到該總分的排在前面，所以名次沒有並列，結算也不需要抽籤。公開榜單的回應中只有名次、暱稱與分數，學生可以自行決定是否顯示暱稱，未顯示的以「同學」代替。伺服器端把每份榜單快取 60 秒，個人的名次與總分則隨登入後的個人資料一併回傳，不需要另外查詢。

邀請制讓登入的學生替博覽會帶來下一批學生，成功邀請的人數越多，獎勵越多。積分把一次造訪拆成可以重複的小行為，實證研究對這類設計的結論有條件：Hamari 等人回顧 24 篇同儕審查的實證論文，認為遊戲化有正面效果，但效果高度取決於實施的情境與使用者（Hamari 等，2014）。檔期更長的全國活動，見全國活動的到場驗證與計分做法。

成果

合作四年，博覽會由約 60 名學生參與的線下活動，轉為超過 12,000 名學生登入參與的線上博覽會。其餘數字如下。

不適合的情況

• 參展單位只有十幾家、資訊量小的活動。一頁式網站加篩選器就能一次看完，3D 地圖的製作投入收不回來。
• 內容以圖片與影片為主、重點是臨場感的活動，例如場景導覽。這類內容用 VR 或場景式呈現比較合適。
• 單日或單場的說明會，或不需要留下登入資料的活動。積分與邀請依多日回訪才有意義。

開始前要準備什麼

• 活動要讓參與者完成的事，例如報名、登入、看直播、填問卷，以及先後順序
• 參展單位或學校的名單，與每一筆要呈現的資料項目
• 活動檔期，以及直播與節目的安排
• 登入資格，例如是否限定學生信箱
• 獎品與預算

備齊之後，可以說明活動規模與檔期，討論展會線上化的做法。