span8
span4
span8
span4
Three.jsis a WebGL-based Javascript API that allows compatible browsers to display 3D textured models.
This example workspace will convert a SketchUp file into the three components needed to display data using Three.js:
These files are output in a folder structure suitable for use with a web server:
Creating JSON data with FME is very simple;for a person familiar with spatial data,the harder parts are understanding the web server requirements and keeping track of which files need to go where!
To carry out this example - or use Three.js in general - there are a number of pre-requisite components.
Note: We do not recommend to use the Apache Tomcat Web Server provided with FME Server for production work.It is used here for demonstration purposes.
A model like this needs to be delivered using a web server,rather than just opening the file in a browser.
You can use any web server software,but for simplicity this example uses the Apache Tomcat web server provided with FME Server.If you are using a different web server,please adjust the Web Server Root Folder parameter accordingly.
The web server needs access to the Three.js JavaScript libraries.These can be download from the Three.js web site.They normally go into the ROOT folder of the web server,i.e.
The two files required for this example are three.js and OrbitControls.js
For this example the source data is a SketchUp dataset downloadable from theSketchUp 3D Warehouse.
In brief,the workspace reads a SketchUp dataset and converts it to JSON (which the Three.js API can read) using the JSONTemplater transformer.
A Creator/AttributeCreator pair of transformers are used to create a HTML file,the contents of which use Three.js commands to import and display the JSON data.
The workspace includes three parameters:
Instead of downloading the dataset,this example reads the SketchUp (SKP) dataset directly from the SketchUp 3D Warehouse.This is done by using this link ‘https://3dwarehouse.sketchup.com/warehouse/getpubliccontent?contentId=4257f3f3-9955-479c-bc30-c7d6975480d1&fn=eiffel_tower2.skpas the source dataset location.
You can instead,download the dataset and read it from a local or network file location.
Three.js is not a format,but an API that can read various formats,of which JSON is one.The model is converted to Three.js-compatible JSON using the JSONTemplater transformer.
The Expression used in the JSONTemplater is:
fme:get-threejs-geometry( "$(ROOT)\models\$(DOC)\textures" )
The function fme:get-threejs-geometry converts the current feature's geometry into Three.js compatible JSON.It's Three.js specific,which is why we don't just use the JSON Writer.
The folder provided in the expression contains the path in which the texture images will be stored.This is important because if the path is incorrect the web server will not be able to locate textures for the data.
The JSON describing the model is written to an attribute called ‘text_line_data'.This name is used because it matches the attribute required by the Text File Writer,which is being used to write the data.
The Creator and AttributeCreator transformers are used to create HTML and Javascript code that display the 3D model.
In general,you don't have to use FME to create these components - but it can be useful to do so.For example,here the location of the data is being set through a published parameter ($(DOC)).
The JavaScript code uses Three.js to display the model and provide navigation tools.Note that there are many commands available in Three.js,and this is just an example of what you might possibly do.
The line highlighted above is important because it is the command to load the models and the textures.Notice again the use of a published parameter to set the path to these files.
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
The results can be viewed by opening the HTML document;however itmustbe viewed through a web server (not by simply opening the file in a web browser).
If your web server is hosted on your local computer,you should be able to see the file using the url ‘localhost/Eiffel.html'
This screenshot shows the model viewed in a Chrome web browser.With this particular example (i.e.this particular Three.js javascript) the left,right,and centre mouse buttons can be used to navigate through the data with different effects.
Another example of creating Three.js models with FME can be found inthis blog article.
© 2019 亚搏在线Safe Software Inc |Legal