溪口國小 3D 校園

臺北市文山區溪口國民小學的 3D 互動校園地圖：選角色、在校園裡走動、找教室、自動帶路、看 360° 實景導覽。

功能

• 方塊風 3D 校園（可切換簡約風），B1～4F 與頂樓
• 男學生 / 女學生角色，穿學校制服
• 找教室：輸入班級（503、五年三班）、教室號碼或名稱
• 帶我去：黃色路線導航，會自動經過樓梯
• 樓梯可以真的走上去（U 型折返樓梯，走到上半層自動換樓層），也可以按 ▲／▼ 讓角色自己走
• 家具、樹、遊樂器材、圍牆都有碰撞；第三人稱鏡頭會避開牆和天花板，滾輪／兩指可拉近拉遠
• 設施互動：操場和活動中心可以投籃（F 鍵或按鈕，抓綠色區域出手）、中庭和遊戲場可以溜滑梯
• 校園圍牆（石材矮牆、磚柱、鐵欄杆）與牆外的榕樹人行道
• 360° 實景導覽：19 個景點、32 張環景照，中英文介紹與語音

修改資料

要改的東西	檔案
教室名稱、位置、班級	js/campus-data.js
360° 景點、介紹文字、位置	js/pano-data.js
圍牆、人行道、榕樹	js/wall.js（位置在 campus-data.js 的 outdoor.wall）
小遊戲	js/games/（靠近老師才載入；新增互動種類要加到 app.js 的 GAME_FILE 和該檔案最後的 play）

更新版本號

改完程式或資料後，執行這個指令，瀏覽器才會讀到新版：

node tools/bump-version.mjs

它會把 index.html 和 js/ 底下所有 .js（包含 basement.js、extras.js、field.js、furniture.js、wall.js 裡的 blocks.js?v=）的 ?v=數字 一次換成同一個新數字。要指定數字可以寫 node tools/bump-version.mjs 300。

本機預覽

python -m http.server 5173

再打開 http://localhost:5173

素材與授權

• 3D 引擎：three.js（MIT）
• 像素字型：俐方體 11 號 Cubic 11（SIL OFL 1.1，見 fonts/Cubic_11-OFL.txt）
• 內文字型：Noto Sans TC（Google Fonts，SIL OFL）
• 360° 環景照、介紹文字與語音：溪口國小校園導覽網站原有素材
• 方塊材質皆為程式繪製，未使用任何遊戲的官方素材