init

2025-07-18 20:25:57 +08:00
commit 68c8096686
15 changed files with 2582 additions and 0 deletions
@@ -0,0 +1,107 @@
+# Hi.Sample.Webapi
+
+這是一個展示如何使用 Hi.Webapi 功能的範例專案。
+
+## 專案描述
+
+本專案示範了如何：
+- 使用 Hi.Webapi 的 RenderingService 和 RenderingHub
+- 建立自訂的 Controller 來創建測試 3D 物件
+- 整合 SignalR 進行即時渲染通訊
+- 實作 IDisplayee 介面來定義自訂的 3D 物件
+
+## 功能特點
+
+- **3D 物件渲染**：使用 Hi.Disp 引擎渲染 3D 圖形
+- **即時通訊**：透過 SignalR 實現客戶端與服務器的即時互動
+- **測試物件**：包含坐標軸、立方體和地面網格的示範物件
+- **WebGL 渲染**：使用 HTML5 Canvas 進行硬體加速渲染
+- **多種前端範例**：提供原生 JavaScript 和 Vue.js 兩種實作方式
+
+## 執行專案
+
+### 前置需求
+- .NET 9.0 SDK
+- Visual Studio 2022 或 VS Code
+
+### 啟動步驟
+
+1. 在專案目錄下執行：
+   ```bash
+   dotnet build
+   dotnet run
+   ```
+
+2. 開啟瀏覽器訪問：
+   - 原生 JavaScript 版本：http://localhost:5180/demo-native.html
+   - Vue.js 內嵌版本：http://localhost:5180/demo-vue-inline.html
+
+## 專案結構
+
+```
+Hi.Sample.Webapi/
+├── Controllers/
+│   └── RenderingController.cs    # 範例控制器，展示如何創建測試物件
+├── wwwroot/
+│   ├── demo-native.html         # 原生 JavaScript 範例頁面
+│   └── demo-vue-inline.html     # Vue.js 內嵌式範例頁面
+├── Program.cs                   # 應用程式進入點
+├── appsettings.json            # 應用程式設定
+├── Properties/
+│   └── launchSettings.json     # 啟動設定
+└── Hi.Sample.Webapi.csproj     # 專案檔案
+```
+
+## 使用說明
+
+### 鍵盤控制
+- **F1-F4**：切換不同視圖
+- **方向鍵**：旋轉視圖
+- **PageUp/PageDown**：縮放
+- **Home**：重置視圖
+
+### 滑鼠控制
+- **左鍵拖曳**：旋轉視圖
+- **右鍵拖曳**：平移視圖
+- **滾輪**：縮放
+
+## API 端點
+
+- `GET /api/rendering/engines/count` - 獲取活動的渲染引擎數量
+- `POST /api/rendering/test-objects/{sessionId}` - 為指定會話創建測試物件
+
+## 重要類別說明
+
+### TestDisplayee
+實作 IDisplayee 介面的範例類別，展示如何創建自訂的 3D 物件：
+- 使用 Drawing 類別創建圖形元素
+- 實作 Display 方法來渲染物件
+- 實作 ExpandToBox3d 方法來定義物件邊界
+
+## 前端實作比較
+
+### demo-native.html
+- 使用原生 JavaScript
+- 詳細的實作範例
+- 適合學習底層 API 使用
+
+### demo-vue-inline.html
+- 使用 Vue.js 3
+- 所有程式碼內嵌在單一 HTML 檔案中
+- 展示如何用 Vue.js 整合渲染功能
+- 無需外部依賴檔案，方便複製使用
+
+## 依賴項目
+
+- Hi.Webapi - 提供 Web API 和 SignalR 支援
+- HiNc - 核心 NC 功能
+- HiDisp - 顯示引擎
+- HiGeom - 幾何運算
+- 其他 HiAPI 相關專案
+
+## 注意事項
+
+這是一個範例專案，主要用於展示 Hi.Webapi 的使用方式。實際專案中可能需要根據具體需求進行調整和擴展。
+
+### 關於 Vue.js 元件
+如果您需要使用模組化的 Vue.js 元件（如 Hi.Webapi 專案中的 rendering-canvas.js），請參考 Hi.Webapi 專案的實作方式。本範例使用內嵌方式是為了保持簡單和獨立性。