itowns 2.44.3-next.1 → 2.44.3-next.10

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/Controls/GlobeControls.js

@@ -149,7 +149,7 @@ let previous;
  * @param      {object}  [options] An object with one or more configuration properties. Any property of GlobeControls
  * can be passed in this object.
  * @property      {number}  zoomFactor The factor the scale is multiplied by when dollying (zooming) in or
- * divided by when dollying out. Default is 2.
+ * divided by when dollying out. Default is 1.1.
  * @property      {number}  rotateSpeed Speed camera rotation in orbit and panoramic mode. Default is 0.25.
  * @property      {number}  minDistance Minimum distance between ground and camera in meters (Perspective Camera only).
  * Default is 250.
@@ -170,6 +170,8 @@ let previous;
  * @property      {boolean} enableDamping Enable damping or not (simulates the lag that a real camera
  * operator introduces while operating a heavy physical camera). Default is true.
  * @property      {boolean} dampingMoveFactor the damping move factor. Default is 0.25.
+ * @property      {StateControl~State} stateControl redefining which controls state is triggered by the keyboard/mouse
+ * event (For example, rewrite the PAN movement to be triggered with the 'left' mouseButton instead of 'right').
  */
 class GlobeControls extends THREE.EventDispatcher {
   constructor(view, placement) {
@@ -180,7 +182,7 @@ class GlobeControls extends THREE.EventDispatcher {
     this.camera = view.camera3D;
 
     // State control
-    this.states = new StateControl(this.view);
+    this.states = new StateControl(this.view, options.stateControl);
 
     // this.enabled property has moved to StateControl
     Object.defineProperty(this, 'enabled', {
@@ -197,7 +199,7 @@ class GlobeControls extends THREE.EventDispatcher {
       console.warn('Controls zoomSpeed parameter is deprecated. Use zoomFactor instead.');
       options.zoomFactor = options.zoomFactor || options.zoomSpeed;
     }
-    this.zoomFactor = options.zoomFactor || 1.25;
+    this.zoomFactor = options.zoomFactor || 1.1;
 
     // Limits to how far you can dolly in and out ( PerspectiveCamera only )
     this.minDistance = options.minDistance || 250;
@@ -291,10 +293,10 @@ class GlobeControls extends THREE.EventDispatcher {
     this.lookAtCoordinate(placement, false);
     coordCameraTarget.crs = this.view.referenceCrs;
   }
-  get dollyInScale() {
+  get zoomInScale() {
     return this.zoomFactor;
   }
-  get dollyOutScale() {
+  get zoomOutScale() {
     return 1 / this.zoomFactor;
   }
   get isPaused() {
@@ -353,11 +355,13 @@ class GlobeControls extends THREE.EventDispatcher {
       this.panUp(deltaY * (this.camera.top - this.camera.bottom) / gfx.height);
     }
   }
+
+  // For Mobile
   dolly(delta) {
     if (delta === 0) {
       return;
     }
-    dollyScale = delta > 0 ? this.dollyInScale : this.dollyOutScale;
+    dollyScale = delta > 0 ? this.zoomInScale : this.zoomOutScale;
     if (this.camera.isPerspectiveCamera) {
       orbitScale /= dollyScale;
     } else if (this.camera.isOrthographicCamera) {
@@ -554,6 +558,7 @@ class GlobeControls extends THREE.EventDispatcher {
 
     // Initialize dolly movement.
     dollyStart.copy(event.viewCoords);
+    this.view.getPickingPositionFromDepth(event.viewCoords, pickedPosition); // mouse position
 
     // Initialize pan movement.
     panStart.copy(event.viewCoords);
@@ -585,9 +590,11 @@ class GlobeControls extends THREE.EventDispatcher {
   handleDolly(event) {
     dollyEnd.copy(event.viewCoords);
     dollyDelta.subVectors(dollyEnd, dollyStart);
-    this.dolly(-dollyDelta.y);
     dollyStart.copy(dollyEnd);
-    this.update();
+    event.delta = dollyDelta.y;
+    if (event.delta != 0) {
+      this.handleZoom(event);
+    }
   }
   handlePan(event) {
     if (event.viewCoords) {
@@ -712,21 +719,33 @@ class GlobeControls extends THREE.EventDispatcher {
   handleZoom(event) {
     this.player.stop();
     CameraUtils.stop(this.view, this.camera);
-    this.updateTarget();
-    const delta = -event.delta;
-    this.dolly(delta);
-    const previousRange = this.getRange(pickedPosition);
-    this.update();
-    const newRange = this.getRange(pickedPosition);
-    if (Math.abs(newRange - previousRange) / previousRange > 0.001) {
-      this.dispatchEvent({
-        type: CONTROL_EVENTS.RANGE_CHANGED,
-        previous: previousRange,
-        new: newRange
-      });
+    const zoomScale = event.delta > 0 ? this.zoomInScale : this.zoomOutScale;
+    let point = event.type === 'dolly' ? pickedPosition : this.view.getPickingPositionFromDepth(event.viewCoords); // get cursor position
+    let range = this.getRange();
+    range *= zoomScale;
+    if (point && range > this.minDistance && range < this.maxDistance) {
+      // check if the zoom is in the allowed interval
+      const camPos = xyz.setFromVector3(cameraTarget.position).as('EPSG:4326', c).toVector3();
+      point = xyz.setFromVector3(point).as('EPSG:4326', c).toVector3();
+      if (camPos.x * point.x < 0) {
+        // Correct rotation at 180th meridian by using 0 <= longitude <=360 for interpolation purpose
+        if (camPos.x - point.x > 180) {
+          point.x += 360;
+        } else if (point.x - camPos.x > 180) {
+          camPos.x += 360;
+        }
+      }
+      point.lerp(
+      // point interpol between mouse cursor and cam pos
+      camPos, zoomScale // interpol factor
+      );
+      point = c.setFromVector3(point).as('EPSG:4978', xyz);
+      return this.lookAtCoordinate({
+        // update view to the interpolate point
+        coord: point,
+        range
+      }, false);
     }
-    this.dispatchEvent(this.startEvent);
-    this.dispatchEvent(this.endEvent);
   }
   onTouchStart(event) {
     // CameraUtils.stop(view);

package/lib/Controls/StateControl.js

@@ -376,9 +376,12 @@ class StateControl extends THREE.EventDispatcher {
   onMouseWheel(event) {
     event.preventDefault();
     if (this.enabled && this.ZOOM.enable) {
+      viewCoords.copy(this._view.eventToViewCoords(event));
+      this.currentState = this.NONE;
       this.dispatchEvent({
         type: this.ZOOM._event,
-        delta: event.deltaY
+        delta: event.deltaY,
+        viewCoords
       });
     }
   }

package/lib/Controls/StreetControls.js

@@ -290,7 +290,7 @@ class StreetControls extends FirstPersonControls {
     this.end.lookAt(position);
     this.tween = new TWEEN.Tween({
       t: 0
-    }, this.tweenGroup).to({
+    }).to({
       t: 1
     }, time).easing(TWEEN.Easing.Quadratic.Out).onComplete(() => {
       this.stopAnimations();
@@ -298,6 +298,7 @@ class StreetControls extends FirstPersonControls {
       // 'manually' slerp the Quaternion to avoid rotation issues
       this.camera.quaternion.slerpQuaternions(startQuaternion, this.end.quaternion, d.t);
     }).start();
+    this.tweenGroup.add(this.tween);
     this.animationFrameRequester = () => {
       this.tweenGroup.update();
       // call reset from super class FirsPersonControls to make mouse rotation managed by FirstPersonControl still aligned
@@ -325,12 +326,13 @@ class StreetControls extends FirstPersonControls {
       resolve = r;
     });
     this.stopAnimations();
-    this.tween = new TWEEN.Tween(this.camera.position, this.tweenGroup) // Create a new tween that modifies camera position
+    this.tween = new TWEEN.Tween(this.camera.position) // Create a new tween that modifies camera position
     .to(position.clone(), time).easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
     .onComplete(() => {
       this.stopAnimations();
       resolve();
     }).start();
+    this.tweenGroup.add(this.tween);
     this.animationFrameRequester = () => {
       this.tweenGroup.update();
       this.view.notifyChange(this.camera);
@@ -343,6 +345,7 @@ class StreetControls extends FirstPersonControls {
     if (this.tween) {
       this.tween.stop();
       this.tween = undefined;
+      this.tweenGroup.removeAll();
     }
     if (this.animationFrameRequester) {
       this.view.removeFrameRequester(MAIN_LOOP_EVENTS.BEFORE_RENDER, this.animationFrameRequester);

package/lib/Converter/Feature2Mesh.js

@@ -27,8 +27,8 @@ const crsWGS84 = 'EPSG:4326';
 class FeatureMesh extends THREE.Group {
   #currentCrs;
   #originalCrs;
-  #collection = new THREE.Group();
-  #place = new THREE.Group();
+  #collection = (() => new THREE.Group())();
+  #place = (() => new THREE.Group())();
   constructor(meshes, collection) {
     super();
     this.meshes = new THREE.Group().add(...meshes);
@@ -55,8 +55,15 @@ class FeatureMesh extends THREE.Group {
         // calculate the scale transformation to transform the feature.extent
         // to feature.extent.as(crs)
         coord.crs = Crs.formatToEPSG(this.#originalCrs);
-        extent.copy(this.extent).applyMatrix4(this.#collection.matrix);
-        extent.as(coord.crs, extent);
+        // TODO: An extent here could be either a geographic extent (for
+        // features from WFS) or a tiled extent (for features from MVT).
+        // Unify both behavior.
+        if (this.extent.isExtent) {
+          extent.copy(this.extent).applyMatrix4(this.#collection.matrix);
+          extent.as(coord.crs, extent);
+        } else {
+          this.extent.toExtent(coord.crs, extent);
+        }
         extent.spatialEuclideanDimensions(dim_ref);
         extent.planarDimensions(dim);
         if (dim.x && dim.y) {

package/lib/Converter/textureConverter.js

@@ -15,15 +15,15 @@ function textureColorLayer(texture, layer) {
   return textureLayer(texture, layer);
 }
 export default {
-  convert(data, extentDestination, layer) {
+  convert(data, destinationTile, layer) {
     let texture;
     if (data.isFeatureCollection) {
       const backgroundLayer = layer.source.backgroundLayer;
       const backgroundColor = backgroundLayer && backgroundLayer.paint ? new THREE.Color(backgroundLayer.paint['background-color']) : undefined;
-      extentDestination.as(CRS.formatToEPSG(layer.crs), extentTexture);
+      destinationTile.toExtent(CRS.formatToEPSG(layer.crs), extentTexture);
       texture = Feature2Texture.createTextureFromFeature(data, extentTexture, layer.subdivisionThreshold, layer.style, backgroundColor);
       texture.features = data;
-      texture.extent = extentDestination;
+      texture.extent = destinationTile;
     } else if (data.isTexture) {
       texture = data;
     } else {

package/lib/Core/Feature.js

@@ -332,8 +332,8 @@ const alignYtoEast = new THREE.Quaternion();
  */
 
 export class FeatureCollection extends THREE.Object3D {
-  #transformToLocalSystem = transformToLocalSystem2D;
-  #setLocalSystem = doNothing;
+  #transformToLocalSystem = (() => transformToLocalSystem2D)();
+  #setLocalSystem = (() => doNothing)();
   /**
    * @param      {FeatureBuildingOptions|Layer}  options  The building options .
    */