107 lines
3.2 KiB
Markdown
107 lines
3.2 KiB
Markdown
# 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 專案的實作方式。本範例使用內嵌方式是為了保持簡單和獨立性。 |