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. 在專案目錄下執行：

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