HOOPS Visualize Web 快速入门

快速入门我们建议您阅读技术概述以简要了解 HOOPS Visualize Web 的架构和子组件。软件包描述概述了 SDK 的内容。以下各节展示了如何通过查看示例模型快速入门以及如何使用 HOOPS Visualize Web 转换和查看您的 CAD 模型。笔记要运行本文档中的示例您需要安装 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 服务器有两个主要功能提供静态资源例如 HTML 文件为 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笔记此文件由 HOOPS 服务器提供该服务器还管理和监控所有向 Web 查看器传输 CAD 模型的流缓存服务器。转换过程完成后您可以在/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 格式以便在浏览器中查看。查看转换器工作原理的最简单方法是按照以下步骤操作在文件资源管理器中导航至INSTALL_DIR/quick_start双击start_server.bat文件启动流媒体服务器。您将看到类似如下的窗口保持此控制台窗口打开然后继续执行下一步。选择要转换的 CAD 文件然后将其拖放到同一目录下名为convert_file.bat的另一个批处理文件中在上面的 GIF 动画中CAD 文件被拖放到 convert_file.bat 上方此时会弹出“使用 convert_file.bat 打开”的提示信息。此时只需松开鼠标左键即可开始转换。这将打开另一个控制台窗口显示转换进度。转换完成后您可以关闭此控制台窗口但不要关闭步骤 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可执行文件的各种预定义命令行选项。用你喜欢的文本编辑器打开easy_convert.js 文件找到以下变量process_args以下列出了转换器的预定义变量。您可以根据需要添加或删除选项。为了演示我们来修改easy_convert.js使其转换后还能生成一个模型信息文件--output_model_info。此选项需要指定输出文件的位置和名称。将输出位置设置为与easy_convert.js相同的目录并将文件命名为model_info.txtconstprocess_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 ];运行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_KEYyour_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?scsTestModel.scsHOOPS 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 模型加载速度可能更快但由于流式传输的特性其性能响应速度略逊一筹。与示例模型交互加载 Stream Cache 模型后直接在 Web 浏览器控制台中调用 Web Viewer 函数是很常见的做法。对于index.html文件“示例模型”部分中的所有模型获取 Web Viewer 对象的变量是hwv——您将在步骤 4 中再次看到它。本示例将使用 Chrome 浏览器但其他浏览器需要使用略有不同的命令在index.html 文件中在 Chrome 浏览器的客户端渲染 (SCS) 模式下启动“bnc”模型。按 F12 查看控制台。通常情况下可以直接在控制台中从对象调用函数Communicator.Model。有很多函数需要节点 ID 作为参数。我们来获取 BNC 模型特定部分的节点 ID。首先选择 BNC 模型顶部较大的橙色部分。获取句柄selectionManager的类hwv并将其赋值给一个名为“:”的变量sm。varsm hwv.selectionManager;// or hwv.getSelectionManager();使用以下selectionManager方法获取节点 ID将 and 和 or 组合起来getFirstgetNodeId并将返回值保存到名为 : 的变量中nodeId。varnodeId sm.getFirst().getNodeId();您也可以将前两次调用合并为一次调用varnodeId hwv.selectionManager.getFirst().getNodeId();在节点上设置一个属性InstanceModifer使其在将绘制模式设置为 X 射线时不受影响hwv.model.setInstanceModifier(Communicator.InstanceModifier.DoNotXRay, [nodeId],true);请注意这里nodeId用括号括起来了。这是因为这个特定的函数需要一个数组作为参数——但并非所有函数都如此。现在将绘制模式设置为 X 射线hwv.view.setDrawMode(Communicator.DrawMode.XRay);此时模型应该如下所示为了使获取所选节点 ID 的过程更加动态和直观我们可以使用回调函数hwv.setCallbacks({ selectionArray:function(selections) {if(selections.length 0) {for(constselectionEventofselections) {varselection selectionEvent.getSelection();varnodeid selection.getNodeId(); console.log(Selected Node: nodeid); } } }, });将上述代码片段直接复制到控制台然后在 Web 查看器中进行一些选择。你会发现节点 ID 会自动显示而无需在控制台中不断运行 JavaScript 命令。使用 RGB 值将选定节点的表面颜色更改为红色。由于我们已知节点 ID因此可以使用以下代码以编程方式完成此操作请务必将数组括号中的 ID 替换为您的节点 IDhwv.model.setNodesFaceColor([your_selected_node_id],newCommunicator.Color(255, 0, 0));运行此代码后您指定的模型部分应该会变成红色通过这种方式获取节点 ID 对许多其他功能也很有用。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 代码scripttypemodule srcmy_javascript_app.js/scriptHOOPS Visualize Web 也支持 IIFE 和 UMD但我们推荐使用 ESM因为它是目前最现代的 JavaScript 导入方式。更多信息请参阅我们的ESM 概述和迁移指南。