HOOPS Visualize Web 快速入门

笔记

要运行本文档中的示例，您需要安装 Visual Studio C++ 可再发行组件包。有关版本信息，请参阅“支持的平台”页面。

如果您收到错误退出代码=3221225781，则您可能缺少所需的某个可再发行组件。

查看示例页面

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

打开http://localhost:11180/index.html即可查看各种示例模型，这些模型突出了HOOPS Web Viewer的功能。这些示例的源代码位于已安装的 HOOPS Visualize Web 软件包的web_viewer/examples目录中。查看示例模型时，您会注意到您正在查看hoops_web_viewer_example.html页面。此页面由 HOOPS 服务器提供，该服务器通过start_server.[bat|sh] 命令启动。

每个被查看的模型都会启动一个流缓存服务器实例，该服务器负责通过WebSocket连接传输转换后的 CAD 模型。HOOPS 服务器负责启动和监控连接到客户端 Web 查看器的流缓存服务器。HOOPS 服务器有两个主要功能：

1. 提供静态资源，例如 HTML 文件
2. 为 HOOPS Web Viewer 提供 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 文件转换为Stream Cache 格式(SC)。SC 格式是 Web Viewer 组件可以解析的流式优化内部格式。

转换器应用程序

转换器应用程序包含在 HOOPS Visualize Web 中，用于将 CAD 模型转换为 Stream Cache 格式，以便在浏览器中查看。

查看转换器工作原理的最简单方法是按照以下步骤操作：

1. 在文件资源管理器中，导航至<INSTALL_DIR>/quick_start
2. 双击start_server.bat文件启动流媒体服务器。您将看到类似如下的窗口：

保持此控制台窗口打开，然后继续执行下一步。

1. 选择要转换的 CAD 文件，然后将其拖放到同一目录下名为convert_file.bat的另一个批处理文件中：

在上面的 GIF 动画中，CAD 文件被拖放到 convert_file.bat 上方，此时会弹出“使用 convert_file.bat 打开”的提示信息。此时，只需松开鼠标左键即可开始转换。

1. 这将打开另一个控制台窗口，显示转换进度。转换完成后，您可以关闭此控制台窗口（但不要关闭步骤 2 中的服务器窗口）。

1. 您还会注意到，网页浏览器会打开一个网页，在网页查看器中显示转换后的模型。此时，您可以根据需要与模型进行交互。
2. 为了跟踪您所做的所有转换，系统会在<INSTALL_DIR>/quick_start中自动创建一个名为 converted_files.html 的 HTML 文件。

easy_convert.js

convert_file.bat的配套脚本是easy_convert.js（位于<INSTALL_DIR>/quick_start/scripts目录下）。该 JavaScript 文件包含了converter.exe可执行文件的各种预定义命令行选项。

1. 用你喜欢的文本编辑器打开easy_convert.js 文件，找到以下变量process_args：

以下列出了转换器的预定义变量。您可以根据需要添加或删除选项。

1. 为了演示，我们来修改easy_convert.js，使其转换后还能生成一个模型信息文件--output_model_info。此选项需要指定输出文件的位置和名称。将输出位置设置为与easy_convert.js相同的目录，并将文件命名为model_info.txt：

constprocess_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 ];

1. 运行easy_convert.js并检查是否生成了模型信息文件。

表演技巧

• 对于较大的 CAD 文件（> 50MB 左右），建议不要生成 .png 文件，因为这会显著增加转换时间。
• 对于配置项较多的 CAD 文件，不要包含该--load_all_configurations选项。

以编程方式运行转换器

转换器也可以通过编程方式使用。为此，请导航至authoring/converter/example目录。您会找到示例脚本sample.[bat|sh]，其中演示了各种 CAD 转换场景。

让我们修改sample.[bat|sh] 脚本来执行您的 CAD 转换。请在文本编辑器中打开该脚本，并删除（或注释掉）调用 Converter 函数的第一行之后的所有内容。

结果：

set CONVERTER_LICENSE_KEY="your_license_key" IF NOT EXIST output mkdir output ../bin/<platform>/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 Visualize Web 包的authoring/converter/example/_data 目录下找到其他示例模型。此外，该命令已修改，可以生成此模型默认视图的图像文件，并允许您指定自定义图像尺寸。

脚本运行完毕后，请确保 HOOPS 服务器仍在运行，然后访问http://localhost:11180/hoops_web_viewer_sample.html?scs=TestModel.scs

HOOPS Converter 的功能远不止这些。请访问我们的API 参考文档，了解其各种命令行选项的更多信息。HOOPS Converter 以C++ 库的形式提供，其功能与您安装的 HOOPS Visualize Web 软件包中包含的独立可执行文件相同。

查看流缓存文件

如果您对转换 CAD 文件不感兴趣，而只想在 Web 查看器中查看现成的 Stream Cache 模型，也很容易做到。打开快速启动目录（<INSTALL_DIR>/quick_start），双击server.bat启动服务器。然后，在 Web 浏览器中打开index.html。

页面上半部分展示的是转换前的示例模型，下半部分则展示了开发者的示例。您可以随意在网页查看器中探索不同的模型——包括客户端渲染 (CSR) 和服务器端渲染 (SSR)。对于更复杂的模型，您可能会注意到 CSR 模型加载速度较慢，但​​加载完成后渲染速度更快。SSR 模型加载速度可能更快，但由于流式传输的特性，其性能响应速度略逊一筹。

varsm = hwv.selectionManager;// or hwv.getSelectionManager();

varnodeId = sm.getFirst().getNodeId();

varnodeId = hwv.selectionManager.getFirst().getNodeId();

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

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

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

hwv.model.setNodesFaceColor([<your_selected_node_id>],newCommunicator.Color(255, 0, 0));

ESM 标头示例

当您准备创建自己的 Web 应用程序时，需要导入一些 HOOPS Visualize Web 类才能与库进行交互。假设您有一个名为my_javascript_app.js的 JavaScript 文件。在这种情况下，该文件的顶部应该包含类似以下内容：

import{*asCommunicator}from'./hoops-web-viewer.mjs'};

这将导入所有 HOOPS Visualize Web 类。或者，您也可以使用以下命令单独导入它们：

import{ WebViewer }from'./hoops-web-viewer.mjs';

然后，在你的 HTML 源代码中，像往常一样引用你的 JavaScript 代码：

<scripttype="module" src="my_javascript_app.js"></script>

HOOPS Visualize Web 也支持 IIFE 和 UMD，但我们推荐使用 ESM，因为它是目前最现代的 JavaScript 导入方式。更多信息，请参阅我们的ESM 概述和迁移指南。