虎尾科大資工系特色島 · NFU CSIE Island

國立虎尾科技大學資訊工程系的 3D 互動特色島（單一 index.html，Three.js 0.160.0，原生 ES Modules，不需建置）。

• 12 座六角島：五專一～五年級、四技一～四年級、碩士班，加上「綜三館」（師資與系辦）與「榮譽殿堂」（競賽成果）。
• 6 座以橋相連的特色領域島：機器人、無人機、資料庫、電子學、演算法、人工智慧。學生來做專題，展示台上的成品會動（機械手臂、ROS 自走車、無人機與編隊、分散式資料庫、即時儀表板、示波器、LED 矩陣、排序動畫、最短路徑、神經網路、影像辨識）。
• 171 位島民：上課、做專題、休閒、把作品帶去比賽；15 條交流線（實線＝正式制度、虛線＝社群交流、點線＝籌備中）。
• 20 位專任教師頭上都有名牌，點選後老師會自我介紹專業（打字機文字＋瀏覽器語音）。
• 大四、專五、碩士班（研二）島上有碼頭，三艘輪船定期載同學到外海 12 座科技公司外島（鴻海、華碩、廣達、台達電、台積電、聯發科、聯詠、瑞昱、聯電、力積電、日月光、研華）參訪，主管會稱讚本系學生（24 種讚美）；聯詠外島有兩位騎重機繞島的學長：穿黑西裝、戴眼鏡騎銀藍色 Hayabusa 的崔勤遠，和穿灰藍西裝、紅領帶騎紅黑重機的陳泓潁。他們會翹孤輪，不時停車飛遙控飛機或跳進海裡玩動力滑板，各有各的作息，有時一起玩、有時各玩各的，學弟妹搭船抵達時會熱情歡迎；系友偶爾搭直升機降落綜三館屋頂分享就業經驗。公司所在地與產業為公開資訊，參訪情節與評語為示意。
• 系辦三位行政人員（林伯俊技佐、蔡明靜行政專員、洪瑛君行政助理）在綜三館系辦與常去幫忙的島之間走動，路上親切招呼同學、幫忙處理事情；點名牌可看職稱、電話、辦公室與業務（資料取自系網「行政人員」頁），老師分頁也列出他們。
• 資工飛天車（示意的未來交通工具，四個涵道風扇垂直起降）：老師或同學不定期搭乘，從一座島起飛、飛到另一座島降落，途中滾轉耍帥；颱風天停飛。
• 活動選單的「哥吉拉來襲」（原創巨大海怪造型）：怪獸從外海慢慢浮現、一步步走向機器人島；同學看到後衝去機器人島打造巨大機器人「資工號」，在怪獸接近時出擊，用鐵拳與能量護盾把怪獸打回海裡，最後飛回島上接受歡呼，約兩分鐘循環一次。
• 活動選單的「ID4 外星人來襲」（原創圓盤飛船造型）：巨大飛船慢慢飛進來、停在綜三館上方；同學在無人機島打造 16 架無人戰鬥機，飛船底部亮紅光準備向下發射雷射時全員出擊，雷射圍攻讓飛船冒煙墜海，無人機返航後大家慶祝保護了資工島，約兩分鐘循環一次。
• 親身參戰：上述兩個事件進行中按「🚶 漫步」，會改成駕駛模式。哥吉拉事件坐進資工號（越肩視角），用 WASD／搖桿移動轉向，按「出拳」「雷射」攻擊、按住「護盾」擋怪獸的光束與爪擊，把怪獸血量打光就獲勝；外星人事件駕駛一架無人戰鬥機（機身後上方的第三人稱視角），拖曳瞄準、按「雷射」或直接點飛船開火，擊中飛船底部紅色弱點 8 次就能打爆它，還要閃避飛船的反擊。打贏後自動回到觀戰視角。
• 招生導覽：一鍵自動飛行 11 站，字幕加語音解說。
• 下方 bar 可選季節（櫻花瓣、夏夜螢火蟲、落葉、寒流細雪）、校園活動（開學週、期中考週、校慶、畢業典禮：相關島上搭起帳篷、舞台、彩球，校慶放煙火、畢業拋帽，活動結束就收起來）與天氣（下雨島民撐傘；颱風停課、島民回宿舍、輪船直升機停航；夜晚偶有流星、可開流星雨）。預設依台灣日期自動判斷；活動日期取自虎科大 115 學年度行事曆（開學、期中考、11/16–11/21 校慶週、6/5 畢業典禮），寫在 DATA.calendar，換新學年時更新。
• 小任務：島上藏 10 隻虎科吉祥物、系所問答（題目由 DATA 自動出題）、10 種徽章，進度存在瀏覽器。
• 專題展示牆：專題卡片連到系網的專題驗收與下載頁；大四島新增「專題作品藝廊」。
• 選擇我的路：選學制與興趣，推薦特色島、老師、課程與可參訪公司，並在地圖上畫出路線。
• 第一人稱漫步：WASD／搖桿走路、過橋，走到碼頭可搭輪船到科技公司外島。
• 留言瓶：訪客留言變成漂在海上的瓶子（api/bottles.js，Upstash 清單 nfucsie:bottles，保留最新 200 則；每位訪客 45 秒限一則，擋網址與常見髒話）。要刪除不當留言，可在 Upstash Console 對該清單用 LREM。
• 日夜循環（每秒 10 分鐘）、不同時段亮起不同建物；?lang=en 切換英文。
• 手機：一指平移、兩指拖曳或扭轉旋轉、捏合縮放；側欄與卡片變成 bottom sheet。
• 所有資料與圖片來自 https://csie.nfu.edu.tw/（老師照片與系徽以網址直接載入），寫在 index.html 頂端的 DATA 物件。

參訪紀錄（Vercel + Upstash Redis）

api/track.js 記錄造訪、不重複訪客（HyperLogLog）、停留時間（離開頁面時 sendBeacon），以台灣時間分日統計； api/stats.js 回傳總數、平均停留時間與近 30 天每日人數。網頁右上「說明 → 參訪紀錄」可查看。

在 Vercel 專案 nfucsie → Settings → Environment Variables 設定（Upstash Console → 資料庫 → REST API 取得）：

變數	說明
UPSTASH_REDIS_REST_URL	例如 https://xxxx.upstash.io
UPSTASH_REDIS_REST_TOKEN	REST token（非唯讀那一組）

若是從 Vercel Marketplace 安裝 Upstash 整合，會自動注入 KV_REST_API_URL / KV_REST_API_TOKEN，程式也能直接使用。設定後重新部署即可。 資料鍵值都以 nfucsie: 開頭。

本機預覽

任何靜態伺服器都可以（例如 npx serve .）；API 需要 vercel dev 與上述環境變數，未設定時參訪紀錄會顯示「尚未設定」。

預覽圖 og.png 的網址寫成 https://nfucsie.vercel.app/og.png，如果正式網域不同，請改 index.html 的 og:url、og:image、twitter:image。