Skip to content

Latest commit

 

History

History
181 lines (134 loc) · 5.88 KB

Visualize3DTiles.md

File metadata and controls

181 lines (134 loc) · 5.88 KB

Visualize 3DTiles in Cesium ion, iTowns and UD-Viz

This tutorial explains how to visualize 3DTiles tilesets in Cesium ion, iTowns and UD-Viz. This tutorial assumes you already have produced 3DTiles. If you want to produce 3DTiles from CityGML, GeoJSON, OBJ or IFC files, you can use py3dtilers.

Cesium Ion

Note: your 3DTiles must be in the EPSG:4978

Go to Cesium ion and sign in.

Then, go to My Assets and Add data.

Upload a zipped folder containing your tileset (the folder must contain a .json file and the tiles).

Select 3D Tiles in 'What kind of data is this?' and select the main JSON of your tileset in the 3D Tiles options.

image

Click on Upload and, back to My Assets, select your 3DTiles.

image

Click on Open complete code example to open the full view.

image

iTowns

Note 1: Visualizing 3DTiles in iTowns requires NodeJS
Note 2: your 3DTiles must be in the EPSG:3946

In a shell, run:

npm install -g http-server

Then, in command line, go into your 3DTiles tileset and host it on localhost:8081:

cd path/to/tileset
http-server --cors --port 8081

Download the bundle.zip of iTowns.

Create a folder and, in this folder, create a itowns.html file and a js folder. In the js folder, extract the content of the bundle.zip.

image

image

Open itowns.html in a code editor and create an empty view:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>3D-tiles mesh data</title>
    <style>
      html {
        height: 100%;
      }
      body {
        margin: 0;
        overflow: hidden;
        height: 100%;
      }
      #viewerDiv {
        margin: auto;
        height: 100%;
        width: 100%;
        padding: 0;
      }
      canvas {
        display: block;
      }
    </style>
  </head>
  <body>
    <div id="viewerDiv"></div>
    <script src="js/itowns.js"></script>
    <script type="text/javascript">
      // Retrieve the view container
      const viewerDiv = document.getElementById('viewerDiv');

      // Define the view geographic extent
      itowns.proj4.defs(
        'EPSG:3946',
        '+proj=lcc +lat_1=45.25 +lat_2=46.75 +lat_0=46 +lon_0=3 +x_0=1700000 +y_0=5200000 +ellps=GRS80 ' +
          '+towgs84=0,0,0,0,0,0,0 +units=m +no_defs'
      );
      const viewExtent = new itowns.Extent(
        'EPSG:3946', 1837816.94334, 1847692.32501, 5170036.4587, 5178412.82698
      );

      // Define the camera initial placement
      const placement = {
        coord: viewExtent.center(), tilt: 12, heading: 40, range: 6200,
      };

      // Create the planar view
      const view = new itowns.PlanarView(viewerDiv, viewExtent, {
        placement: placement,
      });
    </script>
  </body>
</html>

To add a 3DTiles tileset, create a 3DTiles layer:

      // Define the source of our 3d-tiles data
      const buildingsSource = new itowns.C3DTilesSource({
        url:
          'http://localhost:8081/tileset.json',
      });

      // Create a layer to display our 3d-tiles data and add it to the view
      const buildingsLayer = new itowns.C3DTilesLayer(
        'buildings',
        { source: buildingsSource },
        view
      );
      itowns.View.prototype.addLayer.call(view, buildingsLayer);

Add a directional light in the view:

      // Add directional light effect to the view
      const directionalLight = new itowns.THREE.DirectionalLight(0xffffff, 1);
      directionalLight.position.set(-0.9, 0.3, 1);
      directionalLight.updateMatrixWorld();
      view.scene.add(directionalLight);

Save your file and open it in a browser.

image

To add other layers (elevation, ortho-images, etc) see the full iTowns tutorial.

UD-Viz (⚠️Outdated Doc FIXME or go to readme)

Note 1: Visualizing 3DTiles in UD-Viz requires NodeJS
Note 2: your 3DTiles must be in the EPSG:3946

Clone UD-Viz-Template on your computer.

Copy the folder containing your tileset into the ./assets folder of UD-Viz-Template.

image

Open the ./assets/config/config.json and add an entry in 3DTilesLayers:

  "3DTilesLayers": [
    {
      "id": "Lyon-1",
      "url": "./assets/lyon1/tileset.json"
    }
  ],

The url should be the path to the .json file of your tileset. You can delete the other entries of 3DTilesLayers to view only your tileset.

Open a shell and go into the UD-Viz-Template folder and run UD-Viz with the following commands:

cd UD-Viz-Template
npm install
npm run debug

Open your favorite browser and go to http://localhost:8000/.

image