Skip to main content

Hosting 3D Content

Setup

Extract the contents of Cesium-ion-3D-Tiling-Pipeline.zip. The main executable can be found in the extracted directory under bin/asset-server.

Starting the server

Run this command in the extracted directory:

bin/asset-server -d Data

This will start the server on port 8002 and serve all 3D Tiles, terrain and imagery in the Data directory. You can also specify multiple directories to serve:

bin/asset-server -d Directory1 Directory2 Directory3

All directories specified are also served statically at http://localhost:8002/static/<directoryName>. This allows you to serve files such as glTF models, GeoJSON files or any other content.

Below are examples for serving different kinds of content.

3D Tiles from .3dtiles database file

A 3D Tiles database file placed at Data/3DTileset.3dtiles is accessible at http://localhost:8002/3DTileset/tileset.json.

3D Tiles from a pile of files and directories

A 3D Tileset directory placed at Data/3DTilesetFiles is accessible at http://localhost:8002/static/Data/3DTilesetFiles/tileset.json.

Terrain from .terraindb database file

A terrain database file placed at Data/WorldTerrain.terraindb is accessible at http://localhost:8002/WorldTerrain.

Imagery tileset from a directory of tiles

An Imagery tileset placed at Data/ImageryTileset is accessible at http://localhost:8002/static/Data/ImageryTileset.

Other files

Any other files (such as glTF models, GeoJSON files etc) in the Data are served statically at http://localhost:8002/static/Data/path/to/file.

Available options

Below is a full list of command line arguments to configure the server.

FlagDescriptionDefault
--help, -hDisplay help message.
--version, -vDisplay version number.
--data, -dPath to one or more directories containing .terraindb, .3dtiles, imagery or 3D Tiles.Current directory.
--port Set the port to listen on.8002

Streaming Data to CesiumJS

This section describes how to set up CesiumJS and stream your 3D content in the browser.

Setup

Install Node.js (version 8.9.0 or higher), then download and extract the CesiumJS library.

Open up a terminal window in the cesium directory and install the required dependencies:

npm install

Run the build process:

npm run minifyRelease

Finally, start the server to serve CesiumJS:

npm run start

Open the URL http://localhost:8080/Apps/HelloWorld.html to run the simple Hello World example.

Adding 3D Tiles

To add 3D Tiles from a .3dtiles file to the Hello World demo, open the file cesium/Apps/HelloWorld.html in any code editor. Change the code between the <body> tags to:

<body>
    <div id="cesiumContainer"></div>
    <script>
        var viewer = new Cesium.Viewer('cesiumContainer');
        var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
            url : 'http://localhost:8002/3DTileset/tileset.json', // URL from `Starting the Server` section.
        }));
        viewer.zoomTo(tileset);
    </script>
</body>

Make sure to use the link to your local server in the url field above. Now if you re-run the Hello World demo you should see your 3D Tiles streamed from your local server and visualized in your browser!

Adding Imagery

To add imagery tiles to the Hello World demo, open the file cesium/Apps/HelloWorld.html in any code editor. Change the code between the <body> tags to:

<body>
    <div id="cesiumContainer"></div>
    <script>
        var viewer = new Cesium.Viewer('cesiumContainer', {
        imageryProvider : new Cesium.TileMapServiceImageryProvider({
            url : 'http://localhost:8002/static/Data/ImageryTileset' // URL from `Starting the Server` section
        }),
        baseLayerPicker : false
      });
    </script>
</body>

This will load TMS imagery from Data/ImageryTileset and turn off the base layer.

Adding Terrain

To add terrain to the Hello World demo, open the file cesium/Apps/HelloWorld.html in any code editor. Change the code between the <body> tags to:

<body>
    <div id="cesiumContainer"></div>
    <script>
        var viewer = new Cesium.Viewer('cesiumContainer', {
            terrainProvider : new Cesium.CesiumTerrainProvider({
                url : 'http://localhost:8002/WorldTerrain', // URL from `Starting the Server` section
            })
        });
    </script>
</body>

This will serve terrain from Data/WorldTerrain.terraindb.

Next steps

Check out the CesiumJS tutorials for more in-depth information.