Merge pull request #1164 from 3DStreet/tiles-flattening-experiment

Tiles flattening experiment

Author: kfarr

package-lock.json

@@ -31,7 +31,7 @@
     "@gltf-transform/functions": "^3.10.0",
     "@react-google-maps/api": "^2.19.3",
     "@stripe/stripe-js": "^3.4.1",
-    "3d-tiles-renderer": "^0.4.8",
+    "3d-tiles-renderer": "^0.4.10",
     "aframe-atlas-uvs-component": "^3.0.0",
     "aframe-cursor-teleport-component": "^1.6.0",
     "aframe-extras": "^7.5.1",

package.json

@@ -3,11 +3,13 @@ import {
   TilesFadePlugin,
   TileCompressionPlugin,
   GLTFExtensionsPlugin,
-  GoogleCloudAuthPlugin
+  GoogleCloudAuthPlugin,
+  TileFlatteningPlugin
 } from '3d-tiles-renderer/plugins';
 
-console.log('3d-tiles-renderer', TilesRenderer);
 const MathUtils = AFRAME.THREE.MathUtils;
+const Vector3 = AFRAME.THREE.Vector3;
+const Box3 = AFRAME.THREE.Box3;
 
 if (typeof AFRAME === 'undefined') {
   throw new Error(
@@ -23,7 +25,9 @@ AFRAME.registerComponent('google-maps-aerial', {
     minDistance: { type: 'number', default: 500 },
     maxDistance: { type: 'number', default: 20000 },
     ellipsoidalHeight: { type: 'number', default: 0 },
-    copyrightEl: { type: 'selector' }
+    copyrightEl: { type: 'selector' },
+    enableFlattening: { type: 'boolean', default: false },
+    flatteningShape: { type: 'string', default: '' }
   },
 
   init: function () {
@@ -44,6 +48,9 @@ AFRAME.registerComponent('google-maps-aerial', {
       })
     );
 
+    // Always create flattening plugin to support runtime toggling
+    this.flatteningPlugin = new TileFlatteningPlugin();
+    this.tiles.registerPlugin(this.flatteningPlugin);
     // Set location
     this.tiles.setLatLonToYUp(
       this.data.latitude * MathUtils.DEG2RAD,
@@ -55,6 +62,15 @@ AFRAME.registerComponent('google-maps-aerial', {
         this.data.copyrightEl.innerHTML =
           this.tiles.getAttributions()[0]?.value || '';
       }
+
+      // Add flattening shape after tiles are loaded
+      if (
+        this.data.enableFlattening &&
+        this.data.flatteningShape &&
+        !this.flatteningShape
+      ) {
+        this.addFlatteningShape(this.data.flatteningShape);
+      }
     });
 
     // Create a child entity for the height offset
@@ -77,6 +93,46 @@ AFRAME.registerComponent('google-maps-aerial', {
     }
   },
 
+  addFlatteningShape: function (shapeSelector) {
+    if (!this.flatteningPlugin || !shapeSelector) return;
+
+    const testMeshEl = document.querySelector(shapeSelector);
+    if (!testMeshEl) return;
+
+    const testMesh = testMeshEl.object3D.children[0];
+    if (!testMesh) return;
+
+    // Ensure world transforms are up to date
+    this.tiles.group.updateMatrixWorld();
+    testMesh.updateMatrixWorld(true);
+
+    // Transform the shape into the local frame of the tile set
+    const relativeShape = testMesh.clone();
+    relativeShape.matrixWorld
+      .premultiply(this.tiles.group.matrixWorldInverse)
+      .decompose(
+        relativeShape.position,
+        relativeShape.quaternion,
+        relativeShape.scale
+      );
+
+    // Calculate the direction to flatten on using ellipsoid
+    const direction = new Vector3();
+    const box = new Box3();
+    box.setFromObject(relativeShape);
+    box.getCenter(direction);
+    this.tiles.ellipsoid
+      .getPositionToNormal(direction, direction)
+      .multiplyScalar(-1);
+
+    // Add the transformed plane as a flattening shape
+    this.flatteningPlugin.addShape(relativeShape, direction, Infinity);
+
+    // Store references for cleanup and updates
+    this.flatteningShape = relativeShape;
+    this.originalFlatteningMesh = testMesh;
+  },
+
   tick: function () {
     if (this.tiles && this.el.sceneEl.camera) {
       // Ensure camera is set on each tick
@@ -85,12 +141,45 @@ AFRAME.registerComponent('google-maps-aerial', {
         this.el.sceneEl.camera,
         this.renderer
       );
+
+      // Update flattening shape if it exists
+      if (
+        this.flatteningPlugin &&
+        this.flatteningShape &&
+        this.originalFlatteningMesh
+      ) {
+        // Update world transforms
+        this.tiles.group.updateMatrixWorld();
+        this.originalFlatteningMesh.updateMatrixWorld(true);
+
+        // Re-transform the shape into the local frame of the tile set
+        this.flatteningShape.matrixWorld.copy(
+          this.originalFlatteningMesh.matrixWorld
+        );
+        this.flatteningShape.matrixWorld
+          .premultiply(this.tiles.group.matrixWorldInverse)
+          .decompose(
+            this.flatteningShape.position,
+            this.flatteningShape.quaternion,
+            this.flatteningShape.scale
+          );
+
+        this.flatteningPlugin.updateShape(this.flatteningShape);
+      }
+
       this.tiles.update();
     }
   },
 
   remove: function () {
     if (this.tiles) {
+      // Clean up flattening shape
+      if (this.flatteningPlugin && this.flatteningShape) {
+        this.flatteningPlugin.deleteShape(this.flatteningShape);
+        this.flatteningShape = null;
+        this.originalFlatteningMesh = null;
+      }
+
       if (this.offsetEl) {
         this.offsetEl.removeFromParent();
         this.offsetEl = null;
@@ -114,5 +203,24 @@ AFRAME.registerComponent('google-maps-aerial', {
       );
       this.offsetEl.object3D.position.y = -this.data.ellipsoidalHeight;
     }
+
+    // Handle flattening changes
+    const flatteningChanged =
+      oldData.enableFlattening !== this.data.enableFlattening;
+    const shapeChanged = oldData.flatteningShape !== this.data.flatteningShape;
+
+    if (flatteningChanged || shapeChanged) {
+      // Remove old shape if it exists
+      if (this.flatteningShape) {
+        this.flatteningPlugin.deleteShape(this.flatteningShape);
+        this.flatteningShape = null;
+        this.originalFlatteningMesh = null;
+      }
+
+      // Add new shape if flattening is enabled and we have a shape
+      if (this.data.enableFlattening && this.data.flatteningShape) {
+        this.addFlatteningShape(this.data.flatteningShape);
+      }
+    }
   }
 });