itowns 2.44.3-next.8 → 2.44.3-next.9

package/examples/3dtiles_loader.html

@@ -11,7 +11,15 @@
         <style type="text/css">
             #description {
                 z-index: 2;
-                right: 10px;
+                left: 10px;
+            }
+
+            #featureInfoText {
+                font-size: small;
+            }
+
+            #description .marg {
+                margin: 10px;
             }
         </style>
 
@@ -21,12 +29,17 @@
         <div id="viewerDiv"></div>
         <div id="description">Specify the URL of a tileset to load:
             <input type="text" id="url" />
-            <button onclick="setURL(document.getElementById('url').value)">
-                Load
-            </button>
+            <button onclick="readURL()">Load</button>
+            <div class="marg">
+                <button onClick="loadLyon()">Load Lyon 1 (Mesh)</button>
+                <button onClick="loadSete()">Load Sete (Point Cloud)</button>
+                <button onClick="loadLille()">Load Lille (Mesh)</button>
+                <div id="share"></div>
+            </div>
             <hr />
+            <p id="featureInfoText" class="marg"><em>Display feature information by clicking on it</em></p>
             <p><b>Feature Information:</b></p>
-            <div id="featureInfo"></div>
+            <div id="featureInfo" class="marg"></div>
         </div>
 
         <script src="js/GUI/GuiTools.js"></script>
@@ -52,28 +65,17 @@
 
             const {
                 TMSSource, WMTSSource, OGC3DTilesSource,
-                ColorLayer, ElevationLayer, OGC3DTilesLayer,
+                ColorLayer, ElevationLayer, OGC3DTilesLayer, PNTS_SIZE_MODE,
                 GlobeView, Coordinates, Fetcher,
             } = itowns;
 
-            const uri = new URL(location);
-            const state = {
-                // URL to tileset JSON
-                tileset: uri.searchParams.get('tileset'),
-                // Cesium ION /
-                assetId: uri.searchParams.get('assetId'),
-            };
-
-            function setURL(url) {
-                if (!url) return;
+            window.layer = null; // 3D Tiles layer
 
-                uri.searchParams.set('tileset', url);
-                history.pushState(null, '', `?${uri.searchParams.toString()}`);
+            const uri = new URL(location);
 
-                location.reload();
-            }
+            window.gui = new dat.GUI();
 
-            // ---- CREATE A GlobeView FOR SUPPORTING DATA VISUALIZATION ----
+            // ---- Create a GlobeView ----
 
             // Define camera initial position
             const placement = {
@@ -85,7 +87,17 @@
             const viewerDiv = document.getElementById('viewerDiv');
 
             // Create a GlobeView
-            const view = new GlobeView(viewerDiv, placement, {});
+            const view = new GlobeView(viewerDiv, placement, {
+                controls: {
+                    minDistance: 100,
+                }
+            });
+
+            // Enable various compression support for 3D Tiles tileset:
+            // - `KHR_draco_mesh_compression` mesh compression extension
+            // - `KHR_texture_basisu` texture compresion extension
+            itowns.enableDracoLoader('./libs/draco/');
+            itowns.enableKtx2Loader('./lib/basis/', view.renderer);
 
             // Add ambient light to globally illuminates all objects
             const light = new AmbientLight(0x404040, 15);
@@ -94,36 +106,68 @@
             // Setup loading screen
             setupLoadingScreen(viewerDiv, view);
 
-            // Setup debug menu
-            const menuGlobe = new GuiTools('menuDiv', view, 300);
-            debug.createTileDebugUI(menuGlobe.gui, view, view.tileLayer);
-
-
-            // ---- ADD A BASEMAP ----
+            // ---- Add a basemap ----
 
             // Add one imagery layer to the scene. This layer's properties are
             // defined in a json file, but it cou   ld be defined as a plain js
             // object. See `Layer` documentation for more info.
             Fetcher.json('./layers/JSONLayers/OPENSM.json').then((config) => {
-                const layer = new ColorLayer('Ortho', {
+                const colorLayer = new ColorLayer('Ortho', {
                     ...config,
                     source: new TMSSource(config.source),
                 });
-                view.addLayer(layer).then(menuGlobe.addLayerGUI.bind(menuGlobe));
+                view.addLayer(colorLayer);
             });
 
-            // ---- ADD 3D TILES TILESET ----
+            // ---- Add 3D terrain ----
 
-            // Enable various compression support for 3D Tiles tileset:
-            // - `KHR_draco_mesh_compression` mesh compression extension
-            // - `KHR_texture_basisu` texture compresion extension
-            itowns.enableDracoLoader('./libs/draco/');
-            itowns.enableKtx2Loader('./lib/basis/', view.renderer);
+            // Add two elevation layers: world terrain and a more precise terrain for france
+            // These will deform iTowns globe geometry to represent terrain elevation.
+            function addElevationLayerFromConfig(config) {
+                config.source = new itowns.WMTSSource(config.source);
+                var elevationLayer = new itowns.ElevationLayer(config.id, config);
+                view.addLayer(elevationLayer);
+            }
+            itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json').then(addElevationLayerFromConfig);
+            itowns.Fetcher.json('./layers/JSONLayers/WORLD_DTM.json').then(addElevationLayerFromConfig);
+
+            // ---------- 3D Tiles loading
+
+            function readURL() {
+                const url = document.getElementById('url').value;
+
+                if (url) {
+                    setUrl(url);
+                }
+            }
+
+            function setUrl(url) {
+                if (!url) return;
+
+                const input_url = document.getElementById('url');
+                if (!input_url) return;
+
+                uri.searchParams.set('copc', url);
+                history.replaceState(null, null, `?${uri.searchParams.toString()}`);
+
+                input_url.value = url;
+                load(url);
+            }
+
+
+            function load(url) {
+                const source = new OGC3DTilesSource({ url });
 
-            if (state.tileset) {
-                const source = new OGC3DTilesSource({ url: state.tileset });
-                const layer = new OGC3DTilesLayer('3DTiles', {
+                if (window.layer) {
+                    gui.removeFolder('Layer 3DTiles');
+                    view.removeLayer('3DTiles');
+                    view.notifyChange();
+                    window.layer.delete();
+                }
+
+                window.layer = new OGC3DTilesLayer('3DTiles', {
                     source,
+                    pntsSizeMode: PNTS_SIZE_MODE.ATTENUATED,
                 });
 
                 // Add an event for picking the 3D Tiles layer and displaying
@@ -131,20 +175,37 @@
                 const pickingArgs = {
                     htmlDiv: document.getElementById('featureInfo'),
                     view,
-                    layer,
+                    layer: window.layer,
                 };
 
                 // Add the layer to our view
-                view.addLayer(layer).then((layer) => {
+                view.addLayer(window.layer).then((layer) => {
                     zoomToLayer(view, layer);
                     window.addEventListener('click',
                         (event) => fillHTMLWithPickingInfo(event, pickingArgs), false);
                 });
 
-                debug.createOGC3DTilesDebugUI(menuGlobe.gui, view, layer);
+                window.layer.whenReady
+                    .then(() => debug.createOGC3DTilesDebugUI(gui, view, window.layer));
+            }
+
+            function loadLyon() {
+                setUrl("https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/refs/heads/master/3DTiles/lyon1-4978/tileset.json");
+            }
+
+            function loadSete() {
+                setUrl("https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/pointclouds/pnts-sete-2021-0756_6256/tileset.json");
             }
 
-            window.setURL = setURL;
+            function loadLille() {
+                setUrl("https://webimaging.lillemetropole.fr/externe/maillage/2020_mel_5cm/tileset.json");
+            }
+
+            window.readURL = readURL;
+            window.loadLyon = loadLyon;
+            window.loadSete = loadSete;
+            window.loadLille = loadLille;
+
         </script>
     </body>
 </html>

package/examples/config.json

@@ -14,16 +14,8 @@
         "geoid_geoidLayer": "Display geoid heights"
     },
 
-    "3d Tiles": {
-        "3dtiles_basic": "on 3D map",
-        "3dtiles_25d": "On 2.5D map",
-        "3dtiles_batch_table": "Batch table Hierarchy extension",
-        "3dtiles_ion": "From Cesium ion",
-        "3dtiles_pointcloud": "Pointcloud classification"
-    },
-
-    "3D Tiles (new)": {
-        "3dtiles_loader": "3D Tiles tileset loader"
+    "3D Tiles": {
+        "3dtiles_loader": "3D Tiles loader"
     },
 
     "Pointcloud": {

package/lib/Layer/C3DTilesLayer.js

@@ -102,6 +102,7 @@ class C3DTilesLayer extends GeometryLayer {
    * @param  {View}  view  The view
    */
   constructor(id, config, view) {
+    console.warn('C3DTilesLayer is deprecated and will be removed in iTowns 3.0 version. Use OGC3DTilesLayer instead.');
     super(id, new THREE.Group(), {
       source: config.source
     });

package/lib/Layer/OGC3DTilesLayer.js

@@ -52,7 +52,19 @@ export const OGC3DTILES_LAYER_EVENTS = {
    * @property {Object} tile - the tile metadata from the tileset
    * @property {boolean} visible - the tile visible state
    */
-  TILE_VISIBILITY_CHANGE: 'tile-visibility-change'
+  TILE_VISIBILITY_CHANGE: 'tile-visibility-change',
+  /**
+   * Fired when a new batch of tiles start loading (can be fired multiple times, e.g. when the camera moves and new tiles
+   * start loading)
+   * @event OGC3DTilesLayer#tiles-load-start
+   */
+  TILES_LOAD_START: 'tiles-load-start',
+  /**
+   * Fired when all visible tiles are loaded (can be fired multiple times, e.g. when the camera moves and new tiles
+   * are loaded)
+   * @event OGC3DTilesLayer#tiles-load-end
+   */
+  TILES_LOAD_END: 'tiles-load-end'
 };
 
 /**
@@ -95,6 +107,13 @@ export function enableKtx2Loader(path, renderer) {
 class OGC3DTilesLayer extends GeometryLayer {
   /**
    * Layer for [3D Tiles](https://www.ogc.org/standard/3dtiles/) datasets.
+   *
+   * Advanced configuration note: 3D Tiles rendering is delegated to 3DTilesRendererJS that exposes several
+   * configuration options accessible through the tilesRenderer property of this class. see the
+   * [3DTilesRendererJS doc](https://github.com/NASA-AMMOS/3DTilesRendererJS/blob/master/README.md). Also note that
+   * the cache is shared amongst 3D tiles layers and can be configured through tilesRenderer.lruCache (see the
+   * [following documentation](https://github.com/NASA-AMMOS/3DTilesRendererJS/blob/master/README.md#lrucache-1).
+   *
    * @extends Layer
    *
    * @param {String} id - unique layer id.
@@ -109,8 +128,8 @@ class OGC3DTilesLayer extends GeometryLayer {
    * @param {String} [config.pntsSizeMode= PNTS_SIZE_MODE.VALUE] {@link PointsMaterial} Point cloud size mode (passed to {@link PointsMaterial}).
    * Only 'VALUE' or 'ATTENUATED' are possible. VALUE use constant size, ATTENUATED compute size depending on distance
    * from point to camera.
-   * @param {Number} [config.pntsMinAttenuatedSize=1] Minimum scale used by 'ATTENUATED' size mode.
-   * @param {Number} [config.pntsMaxAttenuatedSize=7] Maximum scale used by 'ATTENUATED' size mode.
+   * @param {Number} [config.pntsMinAttenuatedSize=3] Minimum scale used by 'ATTENUATED' size mode.
+   * @param {Number} [config.pntsMaxAttenuatedSize=10] Maximum scale used by 'ATTENUATED' size mode.
    */
   constructor(id, config) {
     super(id, new THREE.Group(), {
@@ -169,8 +188,8 @@ class OGC3DTilesLayer extends GeometryLayer {
     this.pntsShape = config.pntsShape ?? PNTS_SHAPE.CIRCLE;
     this.classification = config.classification ?? ClassificationScheme.DEFAULT;
     this.pntsSizeMode = config.pntsSizeMode ?? PNTS_SIZE_MODE.VALUE;
-    this.pntsMinAttenuatedSize = config.pntsMinAttenuatedSize || 1;
-    this.pntsMaxAttenuatedSize = config.pntsMaxAttenuatedSize || 7;
+    this.pntsMinAttenuatedSize = config.pntsMinAttenuatedSize || 3;
+    this.pntsMaxAttenuatedSize = config.pntsMaxAttenuatedSize || 10;
   }
 
   /**
@@ -350,7 +369,13 @@ class OGC3DTilesLayer extends GeometryLayer {
     _raycaster.near = camera.near;
     _raycaster.far = camera.far;
     _raycaster.firstHitOnly = true;
-    _raycaster.intersectObject(this.tilesRenderer.group, true, target);
+    const picked = _raycaster.intersectObject(this.tilesRenderer.group, true);
+    // Store the layer of the picked object to conform to the interface of what's returned by Picking.js (used for
+    // other GeometryLayers
+    picked.forEach(p => {
+      p.layer = this;
+    });
+    target.push(...picked);
     return target;
   }
 

package/lib/Renderer/PointsMaterial.js

@@ -258,7 +258,7 @@ class PointsMaterial extends THREE.ShaderMaterial {
   /**
    * @class      PointsMaterial
    * @param      {object}  [options={}]  The options
-   * @param      {number}  [options.size=0]  size point
+   * @param      {number}  [options.size=1] point size
    * @param      {number}  [options.mode=PNTS_MODE.COLOR]  display mode.
    * @param      {number}  [options.shape=PNTS_SHAPE.CIRCLE]  rendered points shape.
    * @param      {THREE.Vector4}  [options.overlayColor=new THREE.Vector4(0, 0, 0, 0)]  overlay color.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itowns",
-  "version": "2.44.3-next.8",
+  "version": "2.44.3-next.9",
   "description": "A JS/WebGL framework for 3D geospatial data visualization",
   "type": "module",
   "main": "lib/Main.js",

package/examples/3dtiles_25d.html

@@ -1,120 +0,0 @@
-<html>
-    <head>
-        <title>Itowns - 3D Tiles on 2.5D map example</title>
-
-        <meta charset="UTF-8">
-        <link rel="stylesheet" type="text/css" href="css/example.css">
-        <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
-    </head>
-    <body>
-        <div id="viewerDiv" class="viewer"></div>
-        <script src="../dist/itowns.js"></script>
-        <script src="js/GUI/LoadingScreen.js"></script>
-        <script src="../dist/debug.js"></script>
-        <script src="js/GUI/GuiTools.js"></script>
-        <script src="js/3dTilesHelper.js"></script>
-        <script type="text/javascript">
-            // Define crs projection that we will use (taken from https://epsg.io/3946, Proj4js section)
-            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');
-
-            // Define geographic extent: CRS, min/max X, min/max Y
-            var extent = new itowns.Extent( 'EPSG:3946',
-                1837816.94334, 1847692.32501,
-                5170036.4587, 5178412.82698);
-
-            // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
-            var viewerDiv = document.getElementById('viewerDiv');
-
-            // Instanciate PlanarView*
-            var cameraCoord = new itowns.Coordinates('EPSG:3946', 1841980,
-                5175682, 3000)
-            var view = new itowns.PlanarView(viewerDiv, extent, { placement: {
-                coord: cameraCoord, heading: 30, range: 4000, tilt: 30 } });
-
-            setupLoadingScreen(viewerDiv, view);
-
-            // Add a WMS imagery source
-            var wmsImagerySource = new itowns.WMSSource({
-                extent: extent,
-                name: 'ortho_latest',
-                url: 'https://imagerie.data.grandlyon.com/wms/grandlyon',
-                version: '1.3.0',
-                crs: 'EPSG:3946',
-                format: 'image/jpeg',
-            });
-
-            // Add a WMS imagery layer
-            var wmsImageryLayer = new itowns.ColorLayer('wms_imagery', {
-                updateStrategy: {
-                    type: itowns.STRATEGY_DICHOTOMY,
-                    options: {},
-                },
-                source: wmsImagerySource,
-            });
-
-            view.addLayer(wmsImageryLayer);
-
-            // Add a WMS elevation source
-            var wmsElevationSource = new itowns.WMSSource({
-                extent: extent,
-                url: 'https://imagerie.data.grandlyon.com/wms/grandlyon',
-                name: 'MNT2018_Altitude_2m',
-                crs: 'EPSG:3946',
-                width: 256,
-                format: 'image/jpeg',
-            });
-
-            // Add a WMS elevation layer
-            var wmsElevationLayer = new itowns.ElevationLayer('wms_elevation', {
-                useColorTextureElevation: true,
-                colorTextureElevationMinZ: 144,
-                colorTextureElevationMaxZ: 622,
-                source: wmsElevationSource,
-            });
-
-            view.addLayer(wmsElevationLayer);
-
-            // Add 3D Tiles layer
-            // This 3D Tiles tileset uses the draco compression that is an
-            // extension of gltf. We need to enable it.
-            itowns.enableDracoLoader('./libs/draco/');
-
-            var $3dTilesLayer = new itowns.C3DTilesLayer(
-                '3d-tiles-layer-building', {
-                    name: 'Lyon-2015-building',
-                    source: new itowns.C3DTilesSource({
-                        url: 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/' +
-                            '3DTiles/lyon_1_3946_textured_draco/tileset.json',
-                    }),
-                }, view);
-
-            // Lights
-            var dirLight = new itowns.THREE.DirectionalLight(0xffffff, 1);
-            dirLight.position.set(-0.9, 0.3, 1);
-            dirLight.updateMatrixWorld();
-            view.scene.add( dirLight );
-
-            var ambLight = new itowns.THREE.AmbientLight(0xffffff, 0.2);
-            view.scene.add( ambLight );
-
-            // Pick 3D Tiles features when hovering them with the mouse and
-            // display their semantic information in an html div
-            var pickingArgs = {};
-            pickingArgs.htmlDiv = document.getElementById('featureInfo');
-            pickingArgs.view = view;
-            pickingArgs.layer = $3dTilesLayer;
-            itowns.View.prototype.addLayer.call(view, $3dTilesLayer);
-
-            // Request redraw
-            view.notifyChange();
-
-            // Add a debug UI
-            var menu = new GuiTools('menuDiv', view);
-            var d = new debug.Debug(view, menu.gui);
-            debug.createTileDebugUI(menu.gui, view, view.tileLayer, d);
-            debug.create3dTilesDebugUI(menu.gui, view, $3dTilesLayer);
-        </script>
-    </body>
-</html>

package/examples/3dtiles_basic.html

@@ -1,94 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <title>Itowns - 3d-tiles example</title>
-
-        <meta charset="UTF-8">
-        <link rel="stylesheet" type="text/css" href="css/example.css">
-        <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
-    </head>
-    <body>
-        <div id="viewerDiv"></div>
-        <div id="description">
-            <p><b>Feature Information:</b></p>
-            <div id="featureInfo"></div>
-        </div>
-        <script src="js/GUI/GuiTools.js"></script>
-        <script src="../dist/itowns.js"></script>
-        <script src="js/GUI/LoadingScreen.js"></script>
-        <script src="../dist/debug.js"></script>
-        <script src="js/3dTilesHelper.js"></script>
-        <script type="text/javascript">
-            /* global itowns,document,GuiTools*/
-            var placement = {
-                coord: new itowns.Coordinates('EPSG:4326', -75.6114, 40.03428, 0),
-                range: 4000,
-                tilt: 22,
-                heading: 180
-            }
-            // iTowns namespace defined here
-            var viewerDiv = document.getElementById('viewerDiv');
-
-            var view = new itowns.GlobeView(viewerDiv, placement);
-            view.camera3D.near = 5;
-            setupLoadingScreen(viewerDiv, view);
-
-            var menuGlobe = new GuiTools('menuDiv', view, 300);
-
-            itowns.Fetcher.json('./layers/JSONLayers/OPENSM.json').then(function _(config) {
-                config.source = new itowns.TMSSource(config.source);
-                var layer = new itowns.ColorLayer('Ortho', config);
-                view.addLayer(layer).then(menuGlobe.addLayerGUI.bind(menuGlobe));
-            });
-
-            // Create a new Layer 3d-tiles For DiscreteLOD
-            // -------------------------------------------
-            var $3dTilesLayerDiscreteLOD = new itowns.C3DTilesLayer('3d-tiles-discrete-lod', {
-                name: 'DiscreteLOD',
-                sseThreshold: 0.05,
-                source: new itowns.C3DTilesSource({
-                    url: 'https://raw.githubusercontent.com/CesiumGS/3d-tiles-samples/master/1.0/TilesetWithDiscreteLOD/tileset.json',
-                }),
-            }, view);
-
-            itowns.View.prototype.addLayer.call(view, $3dTilesLayerDiscreteLOD);
-
-            // Create a new Layer 3d-tiles For Viewer Request Volume
-            // -----------------------------------------------------
-
-            var $3dTilesLayerRequestVolume = new itowns.C3DTilesLayer('3d-tiles-request-volume', {
-                name: 'RequestVolume',
-                source: new itowns.C3DTilesSource({
-                    url: 'https://raw.githubusercontent.com/CesiumGS/3d-tiles-samples/master/1.0/TilesetWithRequestVolume/tileset.json',
-                }),
-                sseThreshold: 1,
-            }, view);
-
-            // add an event for picking the 3D Tiles layer and displaying
-            // information about the picked feature in an html div
-            var pickingArgs = {};
-            pickingArgs.htmlDiv = document.getElementById('featureInfo');
-            pickingArgs.view = view;
-            pickingArgs.layer = $3dTilesLayerRequestVolume;
-            itowns.View.prototype.addLayer.call(view,
-                $3dTilesLayerRequestVolume).then(function _() {
-                    window.addEventListener('mousemove',
-                        (event) => fillHTMLWithPickingInfo(event, pickingArgs),false);
-                });
-
-            // Add the UI Debug
-            var d = new debug.Debug(view, menuGlobe.gui);
-            debug.createTileDebugUI(menuGlobe.gui, view, view.tileLayer, d);
-            debug.create3dTilesDebugUI(menuGlobe.gui, view, $3dTilesLayerDiscreteLOD);
-            debug.create3dTilesDebugUI(menuGlobe.gui, view, $3dTilesLayerRequestVolume);
-            d.zoom = function() {
-                view.camera3D.position.set(1215013.9, -4736315.5, 4081597.5);
-                view.camera3D.quaternion.set(0.9108514448729665, 0.13456816437801225, 0.1107206134840362, 0.3741416847378546);
-                view.notifyChange(view.camera3D);
-            }
-            menuGlobe.gui.add(d, 'zoom').name('Go to point cloud');
-        </script>
-    </body>
-</html>

package/examples/3dtiles_batch_table.html

@@ -1,86 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <title>Itowns - 3d-tiles hierarchy example</title>
-
-        <meta charset="UTF-8">
-        <link rel="stylesheet" type="text/css" href="css/example.css">
-        <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
-    </head>
-    <body>
-        <div id="viewerDiv"></div>
-        <div id="description">
-            <p><b>Feature Information:</b></p>
-            <div id="featureInfo"></div>
-        </div>
-        <script src="js/GUI/GuiTools.js"></script>
-        <script src="../dist/itowns.js"></script>
-        <script src="js/GUI/LoadingScreen.js"></script>
-        <script src="../dist/debug.js"></script>
-        <script src="js/3dTilesHelper.js"></script>
-        <script type="text/javascript">
-            // Note: The following positions and camera parameters have been
-            // obtained manually using view.controls.getCameraCoordinate() ;
-            // view.controls.getCameraTargetPosition() ;
-            // view.controls.getCameraOrientation()
-            var placement = {
-                coord: new itowns.Coordinates('EPSG:4326', -75.61349, 40.044259),
-                range: 200,
-                tilt: 10,
-                heading: 145,
-            };
-
-            var viewerDiv = document.getElementById('viewerDiv');
-
-            var view = new itowns.GlobeView(viewerDiv, placement);
-
-            setupLoadingScreen(viewerDiv, view);
-
-            var menuGlobe = new GuiTools('menuDiv', view, 300);
-
-            // Add Open Street Map orthographic layer
-            itowns.Fetcher.json('./layers/JSONLayers/OPENSM.json')
-                .then(function _(config) {
-                    config.source = new itowns.TMSSource(config.source);
-                    var layer = new itowns.ColorLayer('Ortho', config);
-                    view.addLayer(layer)
-                        .then(menuGlobe.addLayerGUI.bind(menuGlobe));
-                });
-
-	        // Create a new 3D tiles layer with batch table hierarchy extension
-            const extensions = new itowns.C3DTExtensions();
-            extensions.registerExtension("3DTILES_batch_table_hierarchy",
-                { [itowns.C3DTilesTypes.batchtable]:
-                    itowns.C3DTBatchTableHierarchyExtension });
-
-            // Create the 3D Tiles layer
-            var $3dTilesLayerBTHierarchy = new itowns.C3DTilesLayer(
-                '3d-tiles-bt-hierarchy', {
-                    name: 'BTHierarchy',
-                    source: new itowns.C3DTilesSource({
-                        url: 'https://raw.githubusercontent.com/AnalyticalGraphicsInc/cesium/master/Apps/SampleData/Cesium3DTiles/Hierarchy/BatchTableHierarchy/tileset.json',
-                    }),
-                    registeredExtensions: extensions,
-                },
-            view);
-
-            // add an event for picking the 3D Tiles layer and displaying
-            // information about the picked feature in an html div
-            var pickingArgs = {};
-            pickingArgs.htmlDiv = document.getElementById('featureInfo');
-            pickingArgs.view = view;
-            pickingArgs.layer = $3dTilesLayerBTHierarchy;
-            itowns.View.prototype.addLayer.call(view, $3dTilesLayerBTHierarchy).then(function _() {
-                window.addEventListener('mousemove',
-                    (event) => fillHTMLWithPickingInfo(event, pickingArgs),false);
-            });
-
-            // Add a debug UI
-            var d = new debug.Debug(view, menuGlobe.gui);
-            debug.createTileDebugUI(menuGlobe.gui, view, view.tileLayer, d);
-            debug.create3dTilesDebugUI(menuGlobe.gui, view, $3dTilesLayerBTHierarchy);
-        </script>
-    </body>
-</html>