快速開始

在開始前，建議您可以先查看技術概述，以簡要了解的體系結構和子組件。包描述提供了 SDK 內容的概述。

以下部分展示如何通過查看示例模型以及使用 HOOPS Communicator 轉換和查看 CAD 模型來快速入門。

               

查看示例頁面

導航到Quick_start目錄，確保您具有管理員權限，然后運行start_server.[bat|sh]。此腳本將在本地計算機上部署提供的HOOPS 服務器，該服務器是使用Node.js構建的（包含在 HOOPS Communicator 安裝程序中）。

打開//localhost:11180/index.html查看提供的各種示例模型，這些模型突出顯示了HOOPS Web 查看器的功能。這些示例的源代碼可以在HOOPS Communicator 安裝包的web_viewer/examples中找到。查看示例模型之一時，您會注意到您正在從hoops_web_viewer_example.html進行查看。該頁面由 服務器提供，該服務器通過start_server.[bat|sh]啟動。

每個查看的模型都會啟動一個Stream Cache Server實例，該實例負責通過WebSocket連接流式傳輸轉換后的 CAD 模型。HOOPS 服務器負責啟動和監視連接到客戶端中的 Web 查看器的流緩存服務器。HOOPS服務器有兩個主要功能：

1. 提供靜態資源，例如 HTML 文件
2. 為 HOOPS Web 查看器提供 API，以請求 CAD 模型通過流緩存服務器進行渲染

查看您的模型

您只需將 CAD 模型拖到Quick_start目錄中的Convert_file.[bat|sh]上即可轉換它們。如果 服務器當前正在運行，則轉換完成后模型將自動顯示在您的瀏覽器中。您可以通過打開quick_start目錄中的converted_files.html文檔來查看所有已轉換模型的列表。該文檔是在使用Convert_file.[bat|sh]轉換第一個模型后創建的，請在此處查看：//localhost:11180/converted_files.html

轉換過程完成后，您可以在/quick_start/converted_models/user/sc_models目錄中找到生成的.scz文件。此外，還會生成一個.scs文件并將其放入/quick_start/converted_models/user/scs_models目錄中，并在/quick_start/converted_models/user/images目錄中創建模型的圖像。

執行convert_file.[bat|sh]會啟動一個Python腳本，該腳本運行一個名為Converter的應用程序（Windows上為converter.exe ），其中包含一些預定義的設置，旨在處理CAD文件到流緩存格式（SC）的轉換。SC 格式是 Web 查看器組件可以解析的流優化內部格式。

轉換器應用

轉換器應用程序包含在中，用于將 CAD 模型轉換為流緩存格式以便在瀏覽器中查看。

1.查看 Converter 工作的最簡單方法是按照以下步驟操作：

在文件資源管理器中，導航到<HOOPS_Communicator_INSTALL_DIR>/authoring/converter/example

2.雙擊文件start_server.bat啟動流服務器。你會得到一個類似這樣的窗口：

保持此控制臺窗口打開并繼續下一步。

3.選擇要轉換的CAD文件，并將其拖放到同一目錄中另一個名為Convert_file.bat的批處理文件：

在上面的GIF中，CAD文件被拖到Convert_file.bat 的正上方，這將提示一條消息Open with Convert_file.bat。此時，只需松開鼠標左鍵即可開始轉換。

4.這將打開另一個控制臺窗口，顯示轉換的進度。轉換完成后，您可以關閉此控制臺窗口（但不要關閉步驟 #2 中的服務器窗口）。

5.您還會注意到 Web 瀏覽器將啟動一個網頁，在 Web 查看器中顯示現已轉換的模型。此時，您可以根據需要與模型進行交互。

6.為了跟蹤您完成的所有轉換，會在<HOOPS_Communicator_INSTALL_DIR>/quick_start中自動創建一個名為 returned_files.html 的 HTML 文件。

easy_convert.js

Convert_file.bat的配套腳本是easy_convert.js（位于HOOPS_Communicator_2022_SP2_U1quick_startscripts中）。此 JavaScript 文件包含converter.exe可執行文件的不同預定義命令行選項。

1.在您喜歡的文本編輯器中打開easy_convert.js并找到變量process_args：

列出了轉換器的預定義變量。您可以根據需要添加或刪除選項。

2.作為演示，讓我們修改easy_convert.js，以便轉換還生成模型信息文件（使用選項--model_info 。此選項將需要輸出文件的位置以及名稱。將輸出位置設置為與easy_convert.js并將文件命名為model_info.txt：

   const process_args = [
converter_path,
'--input', `"${abs_path}"`,
'--license', license_key,
'--output_sc', output_sc_path,
'--output_scs', output_scs_path,
'--sc_create_scz', '1',
'--sc_compress_scz', '1',
'--output_png', output_png_path,
'--background_color', png_background_str,
'--output_png_resolution', png_resolution_str,
'--load_all_configurations', load_all_configurations,
'--output_model_info', "./model_info.txt", //<-----------// '--sc_export_attributes', export_attributes ]; 

3.運行easy_convert.js并檢查是否生成了模型信息文件。

性能提示

對于大型 CAD 文件（> 50MB 左右），建議您不要生成 .png 文件，因為這會顯著增加轉換時間。

對于具有大量配置的 CAD 文件，請勿包含選項--load_all_configurations。

以編程方式運行轉換器

轉換器也可以通過編程方式使用。為此，請導航至Authoring/converter/example目錄。您將找到示例.[bat|sh]腳本，該腳本演示了各種 CAD 轉換場景。

讓我們修改example.[bat|sh]來執行 CAD 轉換。在文本編輯器中打開腳本并刪除（或注釋掉）調用 Converter 的第一行之后的所有內容。

結果：

IF NOT EXIST output mkdir output

set CONVERTER_LICENSE_KEY="your_license_key"
IF NOT EXIST output mkdir output
../bin//converter --input "_data/micro_engine/_micro engine.CATProduct" --output_scs "../../../quick_start/TestModel.scs" --output_png "../../../quick_start/TestModel.png" --output_png_resolution 320x240 --license %CONVERTER_LICENSE_KEY%

在上面的示例中，我們指定了示例 CAD 文件的相對路徑。您可以調整此路徑以指向硬盤驅動器上的有效模型。如果您沒有可用的 CAD 文件，您可以在 HOOPS Communicator SDK中找到其他示例模型，網址為authoring/converter/example/_data。此外，該命令已被修改為生成該模型的默認視圖的圖像文件，并帶有指定自定義圖像尺寸的選項。

運行腳本后，確保 服務器仍在運行并導航到//localhost:11180/hoops_web_viewer_sample.html?scs=TestModel.scs

HOOPS Converter 還有很多功能。請訪問我們的API 參考，了解有關其各種命令行選項的更多信息。HOOPS Converter 作為C++ 庫提供，其功能與安裝的 HOOPS Communicator 包中包含的獨立可執行文件相同。

查看流緩存文件

如果您對轉換 CAD 文件不感興趣，而只想在 Web 查看器中查看現成的流緩存模型，這也很容易做到。打開Quick_start目錄 ( <COMMUNICATOR_INSTALL_DIR>/quick_start ) 并通過雙擊server.bat啟動服務器。然后，在 Web 瀏覽器中打開index.html 。

頁面的上半部分專門用于預先轉換的示例模型，而下半部分則呈現開發人員示例。請隨意探索 Web 查看器中的不同模型 – 客戶端渲染 (CSR) 和服務器端渲染 (SSR)。對于更復雜的模型，您可能會注意到 CSR 模型加載速度較慢 - 但最終加載后渲染速度更快。SSR 模型可能加載速度更快，但流式傳輸的本質使性能響應速度稍差。

與示例模型交互

加載流緩存模型然后直接在 Web 瀏覽器控制臺中進行 Web 查看器函數調用是很常見的。對于index.html的“示例模型”部分中的所有模型，獲取 Web 查看器對象的變量是hwv– 您將在步驟 #4 中再次看到這一點。我們將在本例中使用 Chrome，但其他瀏覽器將使用略有不同的命令：

1.在index.html中，在 Chrome 的客戶端渲染 (SCS) 中啟動“bnc”模型。按 F12 查看控制臺。

通常Communicator.Model直接在控制臺中從對象調用函數。有相當多的函數需要節點 ID 作為參數。讓我們獲取 bnc 模型特定部分的節點 ID。首先選擇 bnc 的大橙色頂部部分。

2.獲取句柄的SelectionManager`hwv類。并將其分配給一個名為的變量sm：

var sm = hwv.selectionManager; // or
hwv.getSelectionManager();

3.用于通過組合和selectionManager來獲取節點 ID ，并將返回值保存到名為 的變量中：getFirstgetNodeIdnodeId

var nodeId = sm.getFirst().getNodeId();

您還可以將前兩次調用合并為一次：

var nodeId = hwv.selectionManager.getFirst().getNodeId();

4.在節點上設置 an InstanceModifer，以便在將繪制模式設置為 x 射線時不會受到影響：

hwv.model.setInstanceModifier(Communicator.InstanceModifier.DoNotXRay,
[nodeId], true);

請注意，它nodeId位于括號中。這是因為這個特定函數需要一個數組，但并非所有函數都需要一個數組。

5.現在，將繪制模式設置為 x 射線：

hwv.view.setDrawMode(Communicator.DrawMode.XRay);

此時，模型應如下所示：

為了使獲取選擇的節點 id 的過程更加動態和直觀，我們可以使用回調：

hwv.setCallbacks({
        selectionArray: function (selections) {
                if (selections.length > 0) {
                        for (const selectionEvent of selections) {
                                var selection = selectionEvent.getSelection();
                                var nodeid = selection.getNodeId();
                                console.log("Selected Node: " + nodeid);
                        }
                }
        },
});

將上面的代碼片段直接復制到控制臺，然后在 Web 查看器中進行一些選擇。請注意，節點 ID 會自動顯示，而不必在控制臺中連續運行 JavaScript 命令。

使用 RGB 值將所選節點的面顏色更改為紅色。由于我們有節點 ID，因此可以使用以下代碼以編程方式完成此操作（請務必替換數組括號中的節點 ID）：

hwv.model.setNodesFaceColor([], new Communicator.Color(255, 0, 0));

運行此行后，您指定的模型部分應變為紅色：

以這種方式獲取節點 ID 對于許多其他功能也很有用。

慧都科技是Tech Soft 3D-HOOPS在中國區的唯一增值服務商，負責試用，咨詢，銷售，技術支持，售后，旨在為企業提供一站式的3D開發解決方案。如果您的企業目前也有、的需求，歡迎咨詢在線客服申請3D 輕量化引擎HOOPS的60天免費試用。

↓↓掃碼關注“HOOPS”微信公眾號，及時獲取更多hoops技術資訊↓↓