feat(Widget) add C3DTilesStyle widget

iTowns · Apr 18, 2023 · 7862bc1 · 7862bc1
1 parent 864268a
commit 7862bc1
Show file tree

Hide file tree

Showing 7 changed files with 423 additions and 2 deletions.
diff --git a/docs/config.json b/docs/config.json
@@ -133,7 +133,8 @@
                 "Navigation",
                 "Minimap",
                 "Scale",
-                "Searchbar"
+                "Searchbar",
+                "C3DTilesStyle"
             ]
         },
         "tutorialSections": {

diff --git a/examples/config.json b/examples/config.json
@@ -85,7 +85,8 @@
         "widgets_navigation": "Navigation",
         "widgets_minimap": "Minimap",
         "widgets_scale": "Scale",
-        "widgets_searchbar": "Searchbar"
+        "widgets_searchbar": "Searchbar",
+        "widgets_3dtiles_style": "3DTiles Style"
     },
 
     "Plugins": {

diff --git a/examples/css/widgets.css b/examples/css/widgets.css
@@ -358,3 +358,31 @@
 #widgets-searchbar form > div > p {
     margin: 8px 0;
 }
+
+/* ---------- 3D Tiles Style : --------------------------------------------------------------------- */
+
+#widgets-3dtilesstyle {
+    position: absolute;
+    z-index: 2;
+    background-color: #313336bb; /* maybe create global variables for this file */
+    padding: 5px;
+}
+
+#widgets-3dtilesstyle select,input{
+    width: 100%;
+    background-color: inherit;
+}
+
+#widgets-3dtilesstyle option {
+    color:black;
+}
+
+#widgets-3dtilesstyle * {
+    color:#ffffff;
+    padding: 2px;
+}
+
+#widgets-3dtilesstyle label {
+    text-transform: uppercase;
+    display: block;
+}
diff --git a/examples/widgets_3dtiles_style.html b/examples/widgets_3dtiles_style.html
@@ -0,0 +1,130 @@
+<html>
+    <head>
+        <title>Itowns - 3D Tiles Style Widget </title>
+
+        <meta charset="UTF-8">
+        <link rel="stylesheet" type="text/css" href="css/example.css">
+        <link rel="stylesheet" type="text/css" href="css/widgets.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="../dist/itowns_widgets.js"></script>
+        <script src="js/GUI/LoadingScreen.js"></script>
+        <script src="../dist/debug.js"></script>
+        <script src="js/GUI/GuiTools.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
+            const extent = new itowns.Extent( 'EPSG:3946',
+                1840816.94334, 1843692.32501,
+                5175036.4587, 5177412.82698);
+
+            // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
+            const viewerDiv = document.getElementById('viewerDiv');
+
+            // Instanciate PlanarView*
+            const cameraCoord = new itowns.Coordinates('EPSG:3946', 1841980,
+                5175682, 3000)
+            const view = new itowns.PlanarView(viewerDiv, extent, { placement: {
+                coord: cameraCoord, heading: 30, range: 4000, tilt: 30 } });
+
+            setupLoadingScreen(viewerDiv, view);
+
+            // Add a WMS imagery source
+            const wmsImagerySource = new itowns.WMSSource({
+                extent: extent,
+                name: 'Ortho2009_vue_ensemble_16cm_CC46',
+                url: 'https://download.data.grandlyon.com/wms/grandlyon',
+                version: '1.3.0',
+                crs: 'EPSG:3946',
+                format: 'image/jpeg',
+            });
+
+            // Add a WMS imagery layer
+            const wmsImageryLayer = new itowns.ColorLayer('wms_imagery', {
+                updateStrategy: {
+                    type: itowns.STRATEGY_DICHOTOMY,
+                    options: {},
+                },
+                source: wmsImagerySource,
+            });
+
+            view.addLayer(wmsImageryLayer);
+
+            // Add a WMS elevation source
+            const wmsElevationSource = new itowns.WMSSource({
+                extent: extent,
+                url: 'https://download.data.grandlyon.com/wms/grandlyon',
+                name: 'MNT2012_Altitude_10m_CC46',
+                crs: 'EPSG:3946',
+                width: 256,
+                format: 'image/jpeg',
+            });
+
+            // Add a WMS elevation layer
+            const wmsElevationLayer = new itowns.ElevationLayer('wms_elevation', {
+                useColorTextureElevation: true,
+                colorTextureElevationMinZ: 144,
+                colorTextureElevationMaxZ: 622,
+                source: wmsElevationSource,
+            });
+
+            view.addLayer(wmsElevationLayer);
+
+            const $3dTilesLayer = new itowns.C3DTilesLayer(
+                0, {
+                    name: 'First Lyon Rounding 2018',
+                    source: new itowns.C3DTilesSource({
+                        url: 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/' +
+                            '3DTiles/lyon1_with_surface_type_2018/tileset.json',
+                    })
+                }, view);
+            itowns.View.prototype.addLayer.call(view, $3dTilesLayer);
+
+            // Lights
+            const dirLight = new itowns.THREE.DirectionalLight(0xffffff, 1);
+            dirLight.position.set(-0.9, 0.3, 1);
+            dirLight.updateMatrixWorld();
+            view.scene.add( dirLight );
+
+            const ambLight = new itowns.THREE.AmbientLight(0xffffff, 0.2);
+            view.scene.add( ambLight );
+
+            // Request redraw
+            view.notifyChange();
+
+            // Add 3D Tiles Style Widget
+            const widget = new itowns_widgets.C3DTilesStyle(view);
+            widget.domElement.setAttribute('id', 'widgets-3dtilesstyle');
+
+            // Add a box3 to C3DTileFeature onclick
+            const geometry = new itowns.THREE.BoxGeometry();
+            const material = new itowns.THREE.MeshBasicMaterial( {color: 0x00ff00, opacity: 0.5, transparent: true} );
+            const cube = new itowns.THREE.Mesh( geometry, material );
+            view.domElement.onclick = (event) => {
+                const intersects = view.pickObjectsAt(event, 0, [$3dTilesLayer]);
+                const c3DTileFeatureClicked = $3dTilesLayer.getC3DTileFeatureFromIntersectsArray(intersects);
+
+                if (c3DTileFeatureClicked) {
+                    const worldBox3 = $3dTilesLayer.computeWorldBox3(c3DTileFeatureClicked);
+                    cube.scale.copy(worldBox3.max.clone().sub(worldBox3.min));
+                    worldBox3.getCenter(cube.position);
+                    cube.updateMatrixWorld();
+                    view.scene.add(cube);
+                    view.notifyChange();
+                }
+            }
+
+            // Add a debug UI
+            const menu = new GuiTools('menuDiv', view);
+            const d = new debug.Debug(view, menu.gui);
+            debug.createTileDebugUI(menu.gui, view, view.tileLayer, d);
+        </script>
+    </body>
+</html>