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