Loading
0

3D WEB轻量化引擎HOOPS Commuicator技术教程(二):查看与转换示例CAD模型

快速开始

在开始前,建议您可以先查看技术概述,以简要了解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技术资讯↓↓