通过FME创建“SketchUp”的Three.js文件

介绍

Three.js是一个基于WebGL的Javascript API，允许兼容它的浏览器显示3D纹理模型。FME Hub上提供的ThreejsViewGenerator自定义转换器可以轻松地将任何3D对象转换为使用Three.js所需的HTML。以前，用户需要在FME 中创建三个文件，然后将它们托管在Web服务器上才能通过Three.js查看模型。在本教程中，我们将使用SketchUp模型。

要求

1. Trimble Sketchup帐户：为了下载模型，您需要一个免费的Trimble Sketchup帐户。

2.FME Desktop：FME Desktop 2021.1.2.0（版本21627）或更高版本。

源数据

在这个例子中，源数据是从SketchUp 3D仓库中下载的建筑模型。

 

步骤说明

01

下载模型

注册一个免费的SketchUp帐户，然后下载上面显示的埃菲尔铁塔模型。也可以使用任何其他单层模型。

02

将SketchUp模型添加到FME

打开FME Workbench并新建空白工作区。然后将SketchUp模型读模块添加到画布，用来读取下载的eiffel_tower2.skp。

03

查看模型

在启用了缓存功能的情况下运行工作区，然后单击绿色放大镜以在Visual Preview中查看SketchUp模型。

在“Visual Preview”中，打开“Feature Information”窗口。在Feature Information窗口中，我们需要找到ThreejsViewGenerator使用的层。由于此模型只有一个层，我们只需使用fme_feature_type属性。

 

04

暴露fme_feature_type

fme_feature_type是我们需要暴露的隐藏属性。您可以通过两种方式进行属性暴露：

1）因为我们只需要暴露一个属性，我们可以在读模块中进行（双击eiffel_tower2的读模块以打开参数，切换到“格式属性”选项卡，然后勾选fme_feature_type，单击“OK”）。

 

2）您可以使用attributeexpose转换器，输入fme_feature_type和任何您希望查看的隐藏属性，用以暴露属性。

05

添加ThreejsViewGenerator转换器

将ThreejsViewGenerator自定义转换器添加并连接到eiffel_tower2读模块之后（从FME Hub下载可能需要一些时间），然后在参数设置中将“Layer Attribute”设置为fme_feature_type，最后单击“OK”。

 这个自定义转换器包含的组件可以创建完整的Three.js文件。

06

写入HTML

ThreeejsViewGenerator自定义转换器生成一个HTML文件后，才能在web浏览器中使用Three.js打开显示模型。将HTML写模块添加到画布，然后设置HTML文件的保存位置并命名为Eiffel.html，然后单击“OK”完成。

 

将HTML写模块连接到ThreejsViewGenerator自定义转换器。

 

07

运行工作区并查看结果

运行工作区，您可能会在转换日志中看到波段错误，但这些错误可以被忽略，因为它是指我们不关心的周围地形。

工作区运行完成后，在web浏览器中打开Eiffel.html文件。

 

移动模型，请执行以下操作：

• 单击鼠标左键并拖动——更改模型的方向

• 右键单击并拖动——平移模型

• 滚动滚轮——放大和缩小模型

• 单击模型——打开属性信息窗口

如果模型中有多个图层，可以在“图层控制”下启用和禁用它们。