西班牙
斯潘4
Three.js是一个基于webgl的javascript api,允许兼容浏览器显示三维纹理模型。
此示例工作区将SketchUp文件转换为使用3.js显示数据所需的三个组件:
这些文件以适合与Web服务器一起使用的文件夹结构输出:
用fme创建json数据非常简单;对于一个熟悉空间数据的人来说,更难的部分是理解web服务器的需求并跟踪哪些文件需要放到哪里!
要执行此示例(或通常使用three.js),有许多必备组件。
注意:我们不建议在生产工作中使用FME服务器提供的Apache Tomcat Web服务器。这里使用它是为了进行演示。
像这样的模型需要使用web服务器来交付,而不是仅仅在浏览器中打开文件。
您可以使用任何web服务器软件,但为了简单起见,本例使用fme服务器提供的apachetomcatweb服务器。如果您使用的是其他Web服务器,请相应地调整Web服务器根文件夹参数。
Web服务器需要访问三个.js JavaScript库。这些可以从three.js网站下载。它们通常进入web服务器的根文件夹,即。
本例中需要的两个文件是three.js和OrbitControls.js
对于本例,源数据是一个SketchUp数据集,可从SketchUp 3 d仓库是的。
简言之,工作区读取SketchUp数据集,并使用JSontemplater转换器将其转换为JSON(three.js API可以读取)。
creator/attributecreator对transformers用于创建html文件,其中的内容使用三个.js命令导入和显示json数据。
工作区包括三个参数:
此示例不下载数据集,而是直接从SketchUp 3D仓库读取SketchUp(SKP)数据集。这是通过使用此链接完成的'https://3dwarehouse.sketchup.com/warehouse/getpubliccontent?contentId=4257f3f3-9955-479c-bc30-c7d6975480d1&fn=eiffel_tower2.skp作为源数据集位置。
相反,您可以下载数据集并从本地或网络文件位置读取它。
js不是一种格式,而是一种可以读取各种格式的API, JSON就是其中之一。模型被转换为三个。js-compatible JSON using the JSONTemplater transformer.
JSONTemplater中使用的表达式是:
fme: get-threejs-geometry(“$(根)\ \ $ (DOC)模型\纹理”)
函数fme:get- threejes -geometry将当前特性的几何图形转换为Three.js兼容的JSON。它是特定于Three.js的,这就是为什么我们不使用JSON写入器。
表达式中提供的文件夹包含存储纹理图像的路径。这很重要,因为如果路径不正确,web服务器将无法定位数据的纹理。
描述模型的JSON被写到一个名为“text_line_data”的属性中。之所以使用此名称,是因为它与用于写入数据的文本文件写入器所需的属性相匹配。
Creator和AttributeCreator转换器用于创建显示3D模型的HTML和Javascript代码。
一般来说,您不必使用FME来创建这些组件—但是这样做很有用。例如,这里的数据位置是通过一个已发布的参数($(DOC))设置的。
JavaScript代码使用Three.js显示模型并提供导航工具。注意,有许多命令可以在三个中使用。js, and this is just an example of what you might possibly do.
上面高亮显示的行很重要,因为它是加载模型和纹理的命令。请再次注意使用已发布的参数设置这些文件的路径。
C: \ apps \ FMEServer \ tomcat工具\ \ webapps \ ROOT \ Eiffel.html C: \ apps \ FMEServer tomcat \ webapps \ ROOT \ \工具\ \埃菲尔\模型模型。json C: \ apps \ FMEServer \ tomcat工具\ \ webapps \ ROOT \ \埃菲尔\纹理\ texture_1.jpg模型
结果可以通过打开HTML文档查看;然而,必须通过web服务器查看(而不是简单地在web浏览器中打开文件)。
如果您的web服务器托管在您的本地计算机上,您应该能够使用url ' localhost/Eiffel.html '查看文件。
这张截图显示了在Chrome浏览器中看到的模型。用这个特殊的例子(即这个特殊的3 .js javascript)左右和中心鼠标按钮可以用来导航通过不同的效果的数据。
另一个用FME创建Three.js模型的例子可以在这篇博客文章是的。
?2019安全亚搏在线软件公司|法律