JSR-184 3D 選單實戰：立方體材質動態切換技術打造沉浸式 UI

設計概念：六面選單與四面體幾何體的巧妙映射

傳統 2D 選單受限於螢幕空間，利用 JSR-184 將六個選單項目映射至立方體六個面，透過旋轉動畫實現直觀的空間導航。核心挑戰：立方體僅四個側面可見，需動態切換材質以呈現六項內容。

核心實現：Appearance 陣列管理六面材質

// 建立六個獨立 Appearance 物件，分別綁定網格體的六個面
Appearance[] appearances = new Appearance[6];
for (int i = 0; i < appearances.length; i++) {
    appearances[i] = new Appearance();
    appearances[i].setPolygonMode(polygonMode); // 共用多邊形模式 (如填充/線框)
    mesh.setAppearance(i, appearances[i]);      // 面索引 0-5 對應立方體六面
}

動態材質切換邏輯：三面可見區域管理

// 當前可見的三個面引用 (前、上、下)
Appearance frontFace, topFace, bottomFace;

// 旋轉動畫更新時，根據旋轉角度重新指派材質
frontFace = appearances[frontIndex];  // 正面
topFace   = appearances[topIndex];    // 頂面
bottomFace= appearances[bottomIndex]; // 底面

// 套用對應選單圖示紋理
frontFace.setTexture(0, menuTextures[frontMenuIndex]);
topFace.setTexture(0, menuTextures[topMenuIndex]);
bottomFace.setTexture(0, menuTextures[bottomMenuIndex]);

完整渲染管線關鍵點

1. Mesh 結構：單一 IndexedTriangleArray 定義立方體幾何體，六個面共用頂點資料
2. 紋理管理：預載六張選單圖示 Texture2D 至 menuTextures[] 陣列
3. 旋轉動畫：使用 Transform 物件控制立方體 Y 軸旋轉，配合 KeyframeSequence 實現緩動效果
4. 面索引映射：根據當前旋轉角度計算哪三個面索引在視野內 (前/左/右 或 前/上/下)

擴展應用場景

• 產品展示：立方體六面展示商品不同角度/規格
• 資訊儀表板：六面分別顯示 CPU/記憶體/網路/電池/儲存/溫度
• 遊戲關卡選擇：每面代表一個世界/章節，旋轉切換

效能優化建議

• 材質複用：相同視覺風格的面共用 Appearance，僅替換 Texture
• 紋理圖集：將六張小圖合併為單一大圖集，減少 setTexture() 呼叫與狀態切換
• 視錐剔除：僅更新可見三面的材質，隱藏面不處理

此技術展示了 JSR-184 除遊戲渲染外的創新 UI 應用潛力，以極低幾何體成本實現豐富的空間交互體驗。