快速开始

在开始前，建议您可以先查看技术概述，以简要了解HOOPS Communicator的体系结构和子组件。包描述提供了 SDK 内容的概述。

以下部分展示如何通过查看示例模型以及使用 HOOPS Communicator 转换和查看 CAD 模型来快速入门。

申请HOOPS试用               HOOPS中文网

查看示例页面

导航到Quick_start目录，确保您具有管理员权限，然后运行start_server.[bat|sh]。此脚本将在本地计算机上部署提供的HOOPS 服务器，该服务器是使用Node.js构建的（包含在 HOOPS Communicator 安装程序中）。

打开http://localhost:11180/index.html查看提供的各种示例模型，这些模型突出显示了HOOPS Web 查看器的功能。这些示例的源代码可以在HOOPS Communicator 安装包的web_viewer/examples中找到。查看示例模型之一时，您会注意到您正在从hoops_web_viewer_example.html进行查看。该页面由 HOOPS 服务器提供，该服务器通过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]上即可转换它们。如果 HOOPS 服务器当前正在运行，则转换完成后模型将自动显示在您的浏览器中。您可以通过打开quick_start目录中的converted_files.html文档来查看所有已转换模型的列表。该文档是在使用Convert_file.[bat|sh]转换第一个模型后创建的，请在此处查看：http://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 查看器组件可以解析的流优化内部格式。

转换器应用

转换器应用程序包含在 HOOPS Communicator 中，用于将 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。此外，该命令已被修改为生成该模型的默认视图的图像文件，并带有指定自定义图像尺寸的选项。

运行脚本后，确保 HOOPS 服务器仍在运行并导航到http://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在中国区的唯一增值服务商，负责HOOPS试用，咨询，销售，技术支持，售后，旨在为企业提供一站式的3D开发解决方案。如果您的企业目前也有3D数据格式转换、3D web轻量化渲染的需求，欢迎咨询在线客服申请3D 轻量化引擎HOOPS的60天免费试用。

↓↓扫码关注“HOOPS”微信公众号，及时获取更多hoops技术资讯↓↓

---