斯潘8
斯潘4
三个JS是一个基于WebGL的JavaScriptAPI,允许兼容的浏览器显示三维纹理模型。
此示例工作区将把一个SketchUp文件转换为使用three.js显示数据所需的三个组件:
这些文件以适合与Web服务器一起使用的文件夹结构输出:
使用FME创建JSON数据非常简单;对于熟悉空间数据的人来说,更难的部分是了解Web服务器的需求,并跟踪哪些文件需要放到哪里!
为了执行这个例子——或者通常使用three.js——有许多必备的组件。
注意:我们不建议在生产工作中使用随FME服务器提供的ApacheTomcat Web服务器。此处用于演示目的。
像这样的模型需要使用Web服务器交付,而不仅仅是在浏览器中打开文件。
您可以使用任何Web服务器软件,但是为了简单起见,这个例子使用了与FME服务器一起提供的ApacheTomcat Web服务器。如果您使用的是其他Web服务器,请相应地调整Web服务器根文件夹参数。
Web服务器需要访问3.js javascript库。这些可以从three.js网站下载。它们通常会进入Web服务器的根文件夹,即
本例需要的两个文件是three.js和orbitcontrols.js。
对于本例,源数据是一个可从SketchUp三维仓库.
简而言之,工作区读取一个SketchUp数据集,并使用JSontemplater转换器将其转换为JSON(three.js api可以读取该数据集)。
创建器/属性创建器对转换器用于创建HTML文件,其中的内容使用三个.js命令导入和显示JSON数据。
工作区包括三个参数:
而不是下载数据集,此示例直接从SketchUp 3D仓库读取SketchUp(SKP)数据集。这是通过使用此链接完成的'https://3dworehouse.sketchup.com/warehouse/getpublicContent?contentID=4257f3f3-9955-479c-bc30-c7d6975480d1&fn=埃菲尔铁塔2.skp作为源数据集位置。
你可以代替,下载数据集并从本地或网络文件位置读取。
three.js不是一种格式,但是一个可以读取各种格式的API,其中JSON是其中之一。使用JSontemplater转换器将模型转换为3.js兼容的JSON。
jContemplater中使用的表达式是:
fme:get threejs geometry(“$(root)\models\$(doc)\textures”)。
函数fme:get-three js geometry将当前功能的几何体转换为3.js兼容的json。这是3.js的特定功能,这就是为什么我们不只是使用JSON编写器。
表达式中提供的文件夹包含存储纹理图像的路径。这很重要,因为如果路径不正确,Web服务器将无法定位数据的纹理。
描述模型的JSON被写入一个名为“text_line_data”的属性中。使用此名称是因为它与文本文件编写器所需的属性匹配,用于写入数据。
creator和attributeCreator转换器用于创建显示3D模型的HTML和JavaScript代码。
一般来说,您不必使用FME来创建这些组件,但这样做可能很有用。例如,在这里,数据的位置是通过一个已发布的参数($(doc))来设置的。
javascript代码使用three.js来显示模型并提供导航工具。注意,在three.js中有许多可用的命令,这只是一个你可能会做什么的例子。
上面突出显示的线条很重要,因为它是加载模型和纹理的命令。请再次注意,使用已发布的参数设置这些文件的路径。
C:\apps\fmeserver\utilities\tomcat\webapps\root\eiffel.html C:\apps\fmeserver\utilities\tomcat\webapps\root\models\eiffel\model.json C:\apps\fmeserver\utilities\tomcat\webapps\root\models\eiffel\textures\texture\1.jpg
打开HTML文档可以查看结果;不管怎样必须通过Web服务器查看(而不是简单地在Web浏览器中打开文件)。
如果您的Web服务器托管在本地计算机上,您应该能够使用url“localhost/eiffel.html”查看该文件。
此屏幕截图显示在ChromeWeb浏览器中查看的模型。有了这个特殊的例子(即左边这个特别的3.js javascript,正确的,鼠标中键可以在不同效果的数据中导航。
使用FME创建三个.js模型的另一个示例可以在这篇博客文章.
?2019安全亚搏在线软件公司|合法的