Create Three.js from SketchUp

Downloads

• SKPTo3JS.fmw

Introduction

Three.js is 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:

• A JSON dataset containing the model contents
• A web page containing the HTML and Javascript required to display the model
• A folder of images used for texturing the model

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!

Prerequisites

To carry out this example - or use Three.js in general - there are a number of pre-requisite components.

Web Server

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.

Three.js Libraries

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. <web server>/ROOT/js

The two files required for this example are three.js and OrbitControls.js

Source Data

For this example the source data is a SketchUp dataset downloadable from the SketchUp 3D Warehouse.

FME Workspace

Overview

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:

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

• Source Sketchup File
• Web Server Root Folder - the root folder for the web server and the output folder structure
• Document Name - the base name for the HTML file and the model folder

Detailed Steps

1. Reading Sketchup

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.skp as the source dataset location.
You can instead, download the dataset and read it from a local or network file location.

2. Converting to JSON

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.

3. Creating the HTML

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.

4. Writing the Files

The HTML and JSON files are written out using the Text File writer.
The same Writer is used for both files, with a Dataset Fanout set so that the two components are written separately. It would also be permitted to use two Writers instead of one.


The root folder for the fanout is set by the Web Server Root Folder Parameter, and each file has a different _filename attribute set to determine its output location, using the Document parameter:
JSON - \models$(DOC)\model.json

For example, with the workspace parameters set to:
Web Server Root Folder: ‘C:\apps\FMEServer\Utilities\tomcat\webapps\ROOT’
Document Name: ‘Eiffel’
The following files will be written:

1. C:\apps\FMEServer\Utilities\tomcat\webapps\ROOT\Eiffel.html
2. C:\apps\FMEServer\Utilities\tomcat\webapps\ROOT\models\Eiffel\model.json
3. C:\apps\FMEServer\Utilities\tomcat\webapps\ROOT\models\Eiffel\textures\texture_1.jpg

Viewing the Results

The results can be viewed by opening the HTML document; however it must be 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.

More Examples

Another example of creating Three.js models with FME can be found in this blog article.

[출처] https://knowledge.safe.com/articles/648/create-threejs-from-sketchup.html