證交所政策島 TWSE Policy Isles

把臺灣證券交易所（TWSE）公開的市場制度與政策專區，做成一座由 12 座六角形小島拼成的黏土風 3D「資本市場城」。點島、點建物、點路上的小人，就能看到白話說明、重點事實和官網連結。

線上看： https://garfieldhuang.github.io/twse-policy-isles/

非官方示範。 本專案是教育導覽，與臺灣證券交易所無隸屬關係，未使用證交所 logo、官方配色或版型。所有資料以證交所官網公告為準；無法確認的數字標示「待查證」。不提供即時行情、個股推薦或任何投資建議。

內容

• 12 個政策主題、50 個細項：交易制度、指數資訊、上市與 IPO、臺灣創新板、ETF 與 e添富、公司治理、提升企業價值、ESG 與永續、結算服務、市場資訊與統計、投資人保護、市場數據與科技。
• 10 條協作線：小人把公開說明書、成交單、成分股清單等「搬運物」從一座島送到另一座島。線型代表制度狀態：實線＝已實施、虛線＝推動中、點線＝研議／規劃中。
• 臺股的一天：時鐘從 08:30 開始走（每秒 10 分鐘），盤前、開盤、盤中、收盤、盤後、夜間各時段亮起對應的建物；開盤和收盤時交易所大鐘會擺動。
• 市場日誌：小人到站時記錄出發、交接、返回事件，可依協作線篩選。
• 中英雙語（左上 EN／中 按鈕，或網址加 ?lang=en）、手機 bottom sheet、prefers-reduced-motion 支援。

操作

動作	方式
旋轉／平移／縮放	左鍵拖曳旋轉、右鍵（或雙指）拖曳平移、滾輪或雙指縮放；方向鍵也能轉鏡頭
看說明	點島、建物、小人或協作線；右側清單可搜尋
切時段	下方時間列：盤前 08:30、開盤 09:00、收盤 13:30、夜晚 21:00
關閉卡片	Esc 或卡片右上 ✕

技術

• 單一 HTML 檔，原生 ES Modules，Three.js 0.160.0 以 importmap 從 jsDelivr 載入；不需要建置工具。
• 不載入任何圖片、模型或字型檔：幾何全部程式產生，貼圖用 canvas 即時畫。
• 所有隨機都用 mulberry32 固定種子，每次載入的場景完全一樣。
• 建物用「零件庫」：模型函式只送出 {kind, matrix, color}，最後每種幾何建一個 InstancedMesh。
• 整座城市由 src/p1_data.html 裡的 DATA 物件驅動；每個細項的 model 欄位決定模型種類。

檔案結構

src/p1_data.html   標題與 DATA（島、細項、協作線、一天時段）
src/p2_ui.html     CSS 與介面 DOM、importmap
src/p3_core.js     3D 引擎：場景、日夜、零件庫、24 種建物模型、路網、遠景
src/p4_app.js      小人、協作線、標籤、卡片、側欄、HUD、互動與主迴圈
build.sh           合成 index.html（完整網頁）與 artifact.html

修改 src/ 後執行：

sh build.sh

授權

程式碼以 MIT 授權釋出。「臺灣證券交易所」及各專區名稱屬其權利人所有，本專案僅作文字引用與連結。