Create Three.js from SketchUp

Introduction

Three.js is a WebGL-based Javascript API that allows compatible browsers to display 3D textured models. The ThreejsViewGenerator custom transformer, which is available on the FME Hub, easily transforms any 3D object into the HTML required to use Three.js. Previously, a user needed to create three files in FME and then host them on a web server to view the models in Three.js. For this tutorial, we will be using a Trimble SketchUp model. 
 

Requirements

• Trimble Sketchup Account: In order to download the model, you need a free Trimble Sketchup account. 
• FME Desktop 2021.1.2.0 (Build 21627) or higher 

Source Data

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

Step-by-step Instructions

1. Download the Model
Sign-up for a free Trimble Sketchup account then download the Eiffel Tower model that is shown above. You could also use any other single-layer model. 

2. Add SketchUp Model to FME
Open FME Workbench and start a blank workspace. Add a Trimble SketchUp reader to the canvas and browse to the downloaded eiffel_tower2.skp.


3. View the Model 
Run the workspace with Feature Caching Enabled, then click on the green magnifying glass to open the SketchUp model in Visual Preview. 

In Visual Preview, enable the Feature Information view. In the Feature Information window, we need to find which layer to use for the ThreejsViewGenerator. Since this particular model only has one layer we will just use fme_feature_type. 


4. Expose fme_feature_type
fme_feature_type is a hidden format attribute that we will need to expose. You can do this one of two ways, since we only need to expose the one attribute we will do this in the reader. Double-click on the eiffel_tower2 reader feature type to open the parameters. Switch to the Format Attributes tab and then enable fme_feature_type, click OK. 


Alternatively, you can use an AttributeExposer transformer and type in fme_feature_type, as well as any other attributes you wish to expose. 

5. Add a ThreejsViewGenerator
We now have an exposed layer. Add the ThreejsViewGenerator custom transformer to the canvas. It might take a moment to download from FME Hub. Connect it to the eiffel_tower2 reader feature type. 

In the parameters, set the Layer Attribute to fme_feature_type then click OK. 


This custom transformer has all of the necessary components to create a complete Three.js file. 

6. Write to HTML
The ThreejsViewGenerator produces an HTML file, which when opened in a web browser will display the model using Three.js. Add an HTML writer to the canvas and then browse to a location to save the HTML file. Name the file Eiffel.html, then click OK to finish adding the writer. 


Connect the HTML writer feature type to the ThreejsViewGenerator. 


7. Run Workspace and View Output
Run the workspace, you may get band errors in the Translation Log but these can be ignored for this model as it is referring to the surrounding terrain which we don’t care about. 

Once the workspace has finished running, open the Eiffel.html file in a web browser. 


To move the model around: 

• Left-click and drag to change the orientation of the model
• Right-click and drag to pan around
• Scroll wheel to zoom in and out
• Click on the model to open the feature information window

If you had multiple layers to your model, you can enable and disable them under Layer Control.