Cesium is a great way to explore models of 3D buildings in their actual locations on Earth. Cesium is also an easy (and free) means to embed 3D models on a web page so they can be explored by users on nearly any platform. Here's a quick How-To on loading a building model from SketchUp into Cesium.
Step 1
Create a new model or open an existing model in
SketchUp. To find a model of a real building use Trimble's
3D Warehouse. Download the model in SketchUp format. For this example we've shared our model of the
Shanghai World Financial on the 3D Warehouse.
 |
| Trimble's 3D Warehouse |
Step 2
Export a Collada (.dae) file from SketchUp. When doing so its best to create a new folder and export both the .dae file and Collada assets into the new folder. For this example we've exported the file to a folder called WFC.
Compress the Collada folder containing the export into a new file. We now have WFC.zip.
 |
| click to expand |
Step 3
Use the
Cesium-to-glTF Converter tool on the Cesiumjs.org website to generate a .gltf file from the compressed model folder. Simply drag the WFC.zip into the box and the Converter will return a glTF file. The model will be displayed on the page once it's successfully converted.
 |
| Cesium-to-glTF Converter page |
Step 4
Copy the glTF file to a webserver where you will be running an instance of Cesium. We'll assume Cesium is already deployed on the webserver.
Step 5
Both the .glTF file and the model's coordinates need to be pointed to in the Cesium startup script.
Remember that Collada models are not geolocated. This means that the latitude and longitude of the model needs to be included in the Cesium loading script. If the model has already been geolocated we can find the latitude and longitude in SketchUp from the Model Info window.
 |
| Finding geolocation in SketchUp 15.2 |
SketchUp reports the model has Latitude: 31.236433N and Longitude: 121.502979E
The directional 'N' and 'E' can be omitted and we can record the values into the Cesium script in the following format:
var viewer = new Cesium.Viewer('cesiumContainer');var entity = viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(121.502979, 31.236433),
model : {
uri : 'WFC.gltf'
}});
viewer.trackedEntity = entity;
Step 6
Open and explore the model in Cesium!
Click here to see our example page for the Shanghai World Financial Center. Note the page opens directly to a correct birds-eye view of the building model. Remember that because Cesium is amazing and uses WebGL this page will open and behave identically in current web browsers on Mac, PC, iOS or Android.
 |
| Shanghai Financial World Center, 100 Century Avenue, Pudong, Shanghai, China |
Keep in mind that you can use the Base Map Picker to see different maps around your model no matter where its located on Earth. Imagery providers include Bing Maps, ESRI, OpenStreet-Map and more.
 |
| Base Map Picker in Cesium |
Contact us with any questions or for help setting up your own 3D building model in Cesium.
