@eturnity/eturnity_3d 9.10.1 → 9.13.0-google3dTile.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eturnity/eturnity_3d",
   "private": false,
-  "version": "9.10.1",
+  "version": "9.13.0-google3dTile.1",
   "files": [
     "dist",
     "src"
@@ -16,8 +16,9 @@
     "merge-remote-master": "node scripts/merge-remote-master.js"
   },
   "dependencies": {
-    "@eturnity/eturnity_maths": "9.10.0",
+    "@eturnity/eturnity_maths": "9.13.0",
     "@originjs/vite-plugin-commonjs": "1.0.3",
+    "3d-tiles-renderer": "^0.4.22",
     "core-js": "3.30.2",
     "cors": "2.8.5",
     "earcut": "2.2.4",

package/src/Overlay/Google3DTilesOverlay.js

@@ -0,0 +1,526 @@
+/**
+ * Google 3D Tiles Overlay
+ *
+ * Loads 3D Tiles from Google's Photorealistic 3D Tiles API and displays them
+ * in the Three.js scene. The scene origin is at (centerLat, centerLon) at ground level,
+ * with an ENU coordinate system: X = East, Y = North, Z = Up, in meters.
+ *
+ * Integrates with the existing Overlay system so it can be rendered via renderOnThreeJS
+ * and updated every frame via userData.update on the mesh.
+ * Extends ThreeDModelOverlay to reuse getProjectedPlanesOnOverlay for roof projection.
+ */
+
+import ThreeDModelOverlay from './ThreeDModelOverlay'
+import * as THREE from 'three'
+import { TilesRenderer } from '3d-tiles-renderer'
+import {
+  TilesFadePlugin,
+  GoogleCloudAuthPlugin,
+  ReorientationPlugin,
+  TileCompressionPlugin,
+} from '3d-tiles-renderer/plugins'
+
+/** Set DoubleSide on every mesh material in a loaded 3D Tiles scene */
+function applyDoubleSideToTileScene(scene) {
+  if (!scene) return
+  scene.traverse((object) => {
+    if (!object.isMesh || !object.material) return
+    const materials = Array.isArray(object.material)
+      ? object.material
+      : [object.material]
+    for (const mat of materials) {
+      if (mat) mat.side = THREE.DoubleSide
+    }
+  })
+}
+
+/**
+ * Max screen-space error for tile refinement (3d-tiles-renderer).
+ * Lower = finer meshes for tiles inside {@link Google3DTilesOverlay#_tilesCamera}'s frustum.
+ * GoogleCloudAuthPlugin sets 20 for broad views; we override for this fixed ortho footprint.
+ */
+const TILES_FRUSTUM_ERROR_TARGET = 4
+
+/**
+ * Draw after merged base / roofs (renderOrder 10) and edges (15) so transparent
+ * tiles blend with geometry already in the color buffer instead of hiding it.
+ */
+const GOOGLE_TILES_RENDER_ORDER = 25
+
+/** Extra meters padded on each side of roof AABB for tile loading frustum */
+const ROOFS_BOUNDS_MARGIN_M = 50
+
+/** Same rhythm as ThreeDModelOverlay.animatePlaceholder (sin² on time) */
+function placeholderBounceScale(timeSeconds) {
+  const baseRadius = 0.65
+  const amplitude = 0.55
+  return baseRadius + amplitude * Math.sin(timeSeconds * 0.7 * Math.PI) ** 2
+}
+
+export default class Google3DTilesOverlay extends ThreeDModelOverlay {
+  constructor(overlay, emit, origin) {
+    super(overlay, emit, origin || {}, null)
+    this.hasToBeSavedInBE = false
+    this.origin = origin || {}
+    this.tilesData = null
+    this._initPromise = null
+    // Center for ReorientationPlugin: use settings or origin (degrees → radians)
+    const lat = this.settings?.centerLat ?? this.origin?.lat
+    const lon = this.settings?.centerLon ?? this.origin?.lng
+    this._centerLatRad =
+      lat != null ? lat * (Math.PI / 180) : 35.6586 * (Math.PI / 180)
+    this._centerLonRad =
+      lon != null ? lon * (Math.PI / 180) : 139.7454 * (Math.PI / 180)
+    // Ground elevation in meters from Google Elevation API (used to offset tiles to ground level)
+    this._groundElevation = this.settings?.groundElevation ?? null
+    // Dedicated camera for tile loading and resolution so the user's camera does not affect which tiles load
+    // Orthographic camera looking down (Z up), covering -50 to +50 meters in X and Y
+    this._tilesCamera = new THREE.OrthographicCamera(
+      -50,
+      50,
+      50,
+      -50,
+      0.1,
+      10000
+    )
+    this._tilesCamera.position.set(0, 0, -100)
+    this._tilesCamera.lookAt(0, 0, 0)
+    this._tilesCamera.updateMatrixWorld(true)
+    /** @type {{ xMin: number, xMax: number, yMin: number, yMax: number, zMin?: number, zMax?: number } | null} mm — same shape as Vuex getRoofsBounds (three-d-module) */
+    this.roofsBound = null
+    /** Padded roof-bounds center (m), same as tile camera look-at XY — placeholder sits at (cx, cy, 0) */
+    this._placeholderCenterX = 0
+    this._placeholderCenterY = 0
+    this._rayDirDown = new THREE.Vector3(0, 0, 1)
+    this._defaultTilesCamZ = -100
+    this._defaultOrthoHalfExtentM = 100
+    const raycaster = new THREE.Raycaster()
+    raycaster.far = 1000000
+    raycaster.near = 1
+    this._defaultRayOrigin = new THREE.Vector3(0, 0, this._defaultTilesCamZ)
+    raycaster.set(this._defaultRayOrigin, this._rayDirDown)
+    this._raycaster = raycaster
+    this.sphereMesh = null
+    /** Transparent bouncing sphere at origin; removed once ground align settles */
+    this._groundAlignPlaceholderMesh = null
+    /** True when raycast tile bbox min.z is within ±10 after stick-to-ground */
+    this._tilesGroundAligned = false
+  }
+  getOverlayMeshForRaycast() {
+    return this.tilesData?.tiles.group
+  }
+  async initialiseModel() {
+    this.isReady = true
+    return true
+  }
+
+  _roofsBoundsAreEqual(a, b) {
+    if (a === b) return true
+    if (!a || !b) return false
+    return (
+      a.xMin === b.xMin &&
+      a.xMax === b.xMax &&
+      a.yMin === b.yMin &&
+      a.yMax === b.yMax
+    )
+  }
+
+  /**
+   * Store roof AABB (mm) and fit {@link #_tilesCamera} to it (ortho frustum in m).
+   * Bounds shape matches Vuex `getRoofsBounds` in `three-d-module.js`.
+   * Camera sits above the bounds center; left/right/top/bottom are set so the world XY
+   * footprint matches [xMin,xMax]×[yMin,yMax] in meters (same convention as ThreeCanvas orthographic).
+   *
+   * @param {{ xMin: number, xMax: number, yMin: number, yMax: number, zMin?: number, zMax?: number } | null | undefined} boundsMm
+   */
+  updateRoofsBound(boundsMm) {
+    this._tilesGroundAligned = false
+    if (
+      !boundsMm ||
+      !Number.isFinite(boundsMm.xMin) ||
+      boundsMm.xMin === Infinity
+    ) {
+      this.roofsBound = null
+      const h = this._defaultOrthoHalfExtentM
+      const cam = this._tilesCamera
+      const z = this._defaultTilesCamZ
+      cam.position.set(0, 0, z)
+      cam.left = -h
+      cam.right = h
+      cam.top = h
+      cam.bottom = -h
+      cam.lookAt(0, 0, 0)
+      cam.updateProjectionMatrix()
+      cam.updateMatrixWorld(true)
+      this._defaultRayOrigin.set(0, 0, z)
+      this._raycaster.set(this._defaultRayOrigin, this._rayDirDown)
+      this._placeholderCenterX = 0
+      this._placeholderCenterY = 0
+      this._syncPlaceholderWorldXY()
+      return
+    }
+
+    this.roofsBound = {
+      xMin: boundsMm.xMin,
+      xMax: boundsMm.xMax,
+      yMin: boundsMm.yMin,
+      yMax: boundsMm.yMax,
+      zMin: boundsMm.zMin,
+      zMax: boundsMm.zMax,
+    }
+
+    const m = ROOFS_BOUNDS_MARGIN_M
+    const xMinM = boundsMm.xMin / 1000 - m
+    const xMaxM = boundsMm.xMax / 1000 + m
+    const yMinM = boundsMm.yMin / 1000 - m
+    const yMaxM = boundsMm.yMax / 1000 + m
+
+    const cx = (xMinM + xMaxM) / 2
+    const cy = (yMinM + yMaxM) / 2
+
+    let halfW = (xMaxM - xMinM) / 2
+    let halfH = (yMaxM - yMinM) / 2
+    const minHalf = 100
+    if (halfW < minHalf) halfW = minHalf
+    if (halfH < minHalf) halfH = minHalf
+
+    const cam = this._tilesCamera
+    const z = this._defaultTilesCamZ
+    cam.position.set(cx, cy, z)
+    cam.left = xMinM - cx
+    cam.right = xMaxM - cx
+    cam.top = yMaxM - cy
+    cam.bottom = yMinM - cy
+    cam.lookAt(cx, cy, 0)
+    cam.updateProjectionMatrix()
+    cam.updateMatrixWorld(true)
+
+    this._raycaster.set(new THREE.Vector3(cx, cy, z), this._rayDirDown)
+
+    this._placeholderCenterX = cx
+    this._placeholderCenterY = cy
+    this._syncPlaceholderWorldXY()
+  }
+
+  _syncPlaceholderWorldXY() {
+    const mesh = this._groundAlignPlaceholderMesh
+    if (!mesh) return
+    mesh.position.x = this._placeholderCenterX
+    mesh.position.y = this._placeholderCenterY
+  }
+
+  /**
+   * Cast a vertical ray at the origin pointing down and return the intersection height.
+   * @returns {number|null} - The z coordinate of the first intersection, or null if none
+   */
+  raycastAtRoofsBoundCenter() {
+    const { tilesWrapper } = this.tilesData || {}
+    if (!tilesWrapper) return null
+
+    tilesWrapper.updateMatrixWorld(true)
+
+    const intersects = this._raycaster.intersectObject(tilesWrapper, true)
+    if (intersects.length > 0) {
+      if (intersects[0].point.z < 30) {
+        this._tilesGroundAligned = true
+      }
+      return intersects[0]
+    }
+    return null
+  }
+
+  _getOrCreateTilesData() {
+    if (this.tilesData) return this.tilesData
+    const apiKey = process.env.VUE_APP_GOOGLE_MAP_API_KEY
+    const tiles = new TilesRenderer()
+    tiles.registerPlugin(
+      new GoogleCloudAuthPlugin({
+        apiToken: apiKey,
+        sessionOptions: null,
+        autoRefreshToken: true,
+        useRecommendedSettings: true,
+      })
+    )
+    tiles.registerPlugin(
+      new ReorientationPlugin({
+        lat: this._centerLatRad,
+        lon: this._centerLonRad,
+      })
+    )
+    tiles.registerPlugin(new TileCompressionPlugin())
+    tiles.registerPlugin(new TilesFadePlugin({ maximumFadeOutTiles: 50 }))
+
+    // After GoogleCloudAuthPlugin.init (errorTarget 20), tighten LOD for the ortho frustum only
+    tiles.errorTarget = TILES_FRUSTUM_ERROR_TARGET
+    // Prefer loading tiles that intersect _tilesCamera before prefetch / out-of-frustum work
+    tiles.optimizedLoadStrategy = true
+
+    tiles.lruCache.minSize = 400
+    tiles.lruCache.maxSize = 800
+    tiles.parseQueue.maxJobs = 4
+
+    const tilesWrapper = new THREE.Group()
+    tilesWrapper.name = 'Google3DTilesOverlay'
+    tilesWrapper.renderOrder = GOOGLE_TILES_RENDER_ORDER
+    tilesWrapper.rotation.x = Math.PI / 2
+    tilesWrapper.rotation.y = Math.PI
+    tilesWrapper.add(tiles.group)
+    tilesWrapper.position.z = -200
+    this.tilesData = { tiles, tilesWrapper }
+
+    tiles.addEventListener('load-model', ({ scene }) => {
+      applyDoubleSideToTileScene(scene)
+      this._applyGoogleTilesOpacity(tilesWrapper)
+    })
+
+    return this.tilesData
+  }
+
+  _ensureGroundAlignPlaceholder(threeJSComponent) {
+    if (this._tilesGroundAligned || !threeJSComponent?.scene) return
+    const { scene } = threeJSComponent
+    if (this._groundAlignPlaceholderMesh) {
+      if (scene.getObjectById(this._groundAlignPlaceholderMesh.id)) return
+      this._groundAlignPlaceholderMesh.geometry?.dispose()
+      if (this._groundAlignPlaceholderMesh.material?.dispose) {
+        this._groundAlignPlaceholderMesh.material.dispose()
+      }
+      this._groundAlignPlaceholderMesh = null
+    }
+    const geometry = new THREE.SphereGeometry(10, 32, 32)
+    const material = new THREE.MeshBasicMaterial({
+      color: 0xffffff,
+      transparent: true,
+      opacity: 0.2,
+      depthWrite: false,
+    })
+    const mesh = new THREE.Mesh(geometry, material)
+    mesh.name = 'Google3DTilesGroundAlignPlaceholder'
+    mesh.userData.googleTilesGroundAlignPlaceholder = true
+    mesh.position.set(
+      this._placeholderCenterX,
+      this._placeholderCenterY,
+      0
+    )
+    mesh.scale.setScalar(1)
+    scene.add(mesh)
+    this._groundAlignPlaceholderMesh = mesh
+    this._tickGroundAlignPlaceholderAnimation()
+  }
+
+  _tickGroundAlignPlaceholderAnimation() {
+    const mesh = this._groundAlignPlaceholderMesh
+    if (!mesh?.material) return
+
+    if (this.opacity === 0) {
+      mesh.visible = false
+      mesh.material.opacity = 0
+      return
+    }
+
+    mesh.visible = true
+    const t = performance.now() * 0.001
+    const scale = placeholderBounceScale(t)
+    mesh.scale.setScalar(scale)
+    mesh.position.x = this._placeholderCenterX
+    mesh.position.y = this._placeholderCenterY
+    // Light Z bob so it reads as a bounce (Z up)
+    mesh.position.z = 0.2 * Math.sin(t * 1.4 * Math.PI) ** 2
+    mesh.material.opacity = 0.06 + 0.22 * Math.sin(t * 0.85 * Math.PI) ** 2
+  }
+
+  _removeGroundAlignPlaceholder(threeJSComponent) {
+    const mesh = this._groundAlignPlaceholderMesh
+    if (!mesh) return
+    const scene = threeJSComponent?.scene
+    if (scene && scene.getObjectById(mesh.id)) {
+      scene.remove(mesh)
+    } else {
+      mesh.parent?.remove(mesh)
+    }
+    mesh.geometry?.dispose()
+    if (mesh.material?.dispose) mesh.material.dispose()
+    this._groundAlignPlaceholderMesh = null
+  }
+
+  _syncGroundAlignPlaceholder(threeJSComponent) {
+    if (!threeJSComponent?.scene) return
+    if (this._tilesGroundAligned) {
+      this._removeGroundAlignPlaceholder(threeJSComponent)
+    } else {
+      this._ensureGroundAlignPlaceholder(threeJSComponent)
+    }
+  }
+
+  stickObjectToTheGround() {
+    const { tiles, tilesWrapper } = this.tilesData || {}
+    if (!tiles || !tilesWrapper) {
+      this._tilesGroundAligned = false
+      return
+    }
+
+    const raycastIntersect = this.raycastAtRoofsBoundCenter()
+    if (!raycastIntersect) {
+      this._tilesGroundAligned = false
+      return
+    }
+
+    const tileMesh = raycastIntersect.object
+    const geom = tileMesh.geometry
+    if (!geom) {
+      this._tilesGroundAligned = false
+      return
+    }
+    if (!geom.boundingBox) geom.computeBoundingBox()
+
+    const boundingBox = new THREE.Box3()
+      .copy(geom.boundingBox)
+      .applyMatrix4(tileMesh.matrixWorld)
+    if (
+      Math.abs(boundingBox.min.z) > 1 &&
+      Math.abs(tilesWrapper.position.z - boundingBox.min.z) < 2000
+    ) {
+      tilesWrapper.position.z -= boundingBox.min.z
+    }
+
+    tilesWrapper.updateMatrixWorld(true)
+  }
+  /**
+   * Apply global overlay opacity to all tile mesh materials (base Overlay.setOpacity only updates state + emit).
+   */
+  _applyGoogleTilesOpacity(wrapper) {
+    if (!wrapper) return
+    const opacity = this.opacity
+    const isTransparent = opacity < 1 - 1e-6
+    wrapper.renderOrder = GOOGLE_TILES_RENDER_ORDER
+    wrapper.visible = Boolean(this.isActive) && opacity > 0
+    wrapper.traverse((object) => {
+      if (!object.isMesh || !object.material) return
+      object.renderOrder = GOOGLE_TILES_RENDER_ORDER
+      const materials = Array.isArray(object.material)
+        ? object.material
+        : [object.material]
+      for (const mat of materials) {
+        if (mat) {
+          mat.transparent = isTransparent
+          mat.opacity = opacity
+          // Avoid writing depth when semi-transparent so merged base (base.js) and
+          // other geometry drawn earlier remain visible through the tiles.
+          mat.depthWrite = !isTransparent
+        }
+      }
+    })
+  }
+
+  setOpacity(opacity) {
+    super.setOpacity(opacity)
+    const wrapper = this.overlayMesh || this.tilesData?.tilesWrapper
+    if (wrapper) {
+      this._applyGoogleTilesOpacity(wrapper)
+    }
+  }
+
+  setIsActive(isActive) {
+    this.isActive = Boolean(isActive)
+    const wrapper = this.overlayMesh || this.tilesData?.tilesWrapper
+    if (wrapper) {
+      this._applyGoogleTilesOpacity(wrapper)
+    }
+    this.emit('item-updated', this)
+  }
+
+  async renderOnThreeJS(threeJSComponent) {
+    const rb = threeJSComponent?.roofsBounds
+    if (rb && !this._roofsBoundsAreEqual(this.roofsBound, rb)) {
+      this.updateRoofsBound(rb)
+    }
+
+    if (!this.isActive) {
+      this._removeGroundAlignPlaceholder(threeJSComponent)
+      const tilesWrapper =
+        this.tilesData?.tilesWrapper ||
+        threeJSComponent.meshes.overlayMeshes[this.id]
+      if (tilesWrapper) {
+        tilesWrapper.visible = false
+        threeJSComponent.meshes.overlayMeshes[this.id] = tilesWrapper
+        this.overlayMesh = tilesWrapper
+      }
+      return tilesWrapper || null
+    }
+
+    const tilesData = this._getOrCreateTilesData()
+    if (!tilesData) return null
+
+    const { tiles, tilesWrapper } = tilesData
+    const { renderer, scene } = threeJSComponent
+    tiles.setCamera(this._tilesCamera)
+    tiles.setResolutionFromRenderer(this._tilesCamera, renderer)
+
+    tilesWrapper.userData.type = 'overlayMeshes'
+    tilesWrapper.userData.meshId = this.id
+    tilesWrapper.userData.version = this.version
+
+    this.stickObjectToTheGround()
+    this._syncGroundAlignPlaceholder(threeJSComponent)
+    if (this._groundAlignPlaceholderMesh) {
+      this._tickGroundAlignPlaceholderAnimation()
+    }
+
+    tilesWrapper.userData.update = () => {
+      if (!this.isActive || !tiles || !renderer) return
+      tiles.errorTarget = TILES_FRUSTUM_ERROR_TARGET
+      tiles.setCamera(this._tilesCamera)
+      tiles.setResolutionFromRenderer(this._tilesCamera, renderer)
+      tiles.update()
+      this.stickObjectToTheGround()
+      this._syncGroundAlignPlaceholder(threeJSComponent)
+      if (this._groundAlignPlaceholderMesh) {
+        this._tickGroundAlignPlaceholderAnimation()
+      }
+    }
+
+    if (tilesWrapper.parent !== scene) {
+      if (tilesWrapper.parent) tilesWrapper.parent.remove(tilesWrapper)
+      scene.add(tilesWrapper)
+    }
+
+    threeJSComponent.meshes.overlayMeshes[this.id] = tilesWrapper
+    this.overlayMesh = tilesWrapper
+    this._applyGoogleTilesOpacity(tilesWrapper)
+    return tilesWrapper
+  }
+
+  renderOnPaperJS() {
+    // No 2D representation for 3D Tiles overlay
+  }
+
+  serializeSettings() {
+    return {
+      ...super.serializeSettings(),
+      centerLat: this.origin?.lat ?? this.settings?.centerLat,
+      centerLon: this.origin?.lng ?? this.settings?.centerLon,
+      groundElevation: this._groundElevation,
+    }
+  }
+
+  dispose() {
+    if (this._groundAlignPlaceholderMesh) {
+      this._groundAlignPlaceholderMesh.parent?.remove(
+        this._groundAlignPlaceholderMesh
+      )
+      this._groundAlignPlaceholderMesh.geometry?.dispose()
+      if (this._groundAlignPlaceholderMesh.material?.dispose) {
+        this._groundAlignPlaceholderMesh.material.dispose()
+      }
+      this._groundAlignPlaceholderMesh = null
+    }
+    if (this.tilesData?.tiles) {
+      this.tilesData.tiles.dispose()
+    }
+    this.tilesData = null
+    this.overlayMesh = null
+    this.roofsBound = null
+    this._initPromise = null
+    this._tilesGroundAligned = false
+  }
+}

package/src/Overlay/OverlayFactory.js

@@ -2,6 +2,7 @@ import Overlay from './Overlay'
 import GLBOverlay from './GLBOverlay'
 import ImageOverlay from './ImageOverlay'
 import YearlySunShadingOverlay from './YearlySunShadingOverlay'
+import Google3DTilesOverlay from './Google3DTilesOverlay'
 
 const OverlayFactory = {
   createOverlay(serializedOverlay, emit, origin = { lat: null, lng: null }) {
@@ -12,6 +13,8 @@ const OverlayFactory = {
       overlayInstance = new ImageOverlay(serializedOverlay, emit)
     } else if (serializedOverlay.type == 'yearly_sun_shading') {
       overlayInstance = new YearlySunShadingOverlay(serializedOverlay, emit)
+    } else if (serializedOverlay.type == 'google_3d_tiles') {
+      overlayInstance = new Google3DTilesOverlay(serializedOverlay, emit, origin)
     } else {
       overlayInstance = new Overlay(serializedOverlay, emit)
     }

package/src/Overlay/ThreeDModelOverlay.js

@@ -350,8 +350,24 @@ export default class ThreeDModelOverlay extends Overlay {
       resolve(imageUrl)
     })
   }
+  /** Override in subclasses to use a different mesh (e.g. tiles wrapper) or null when not yet ready */
+  getOverlayMeshForRaycast() {
+    return this.overlayMesh
+  }
+
+  /** Override in subclasses to raycast into child meshes (e.g. for Group-based overlays like 3D Tiles) */
+  getRaycastRecursive() {
+    return false
+  }
+
   getProjectedPlanesOnOverlay(polygons) {
+    const mesh = this.getOverlayMeshForRaycast()
+    if (!mesh) {
+      return polygons.map(() => null)
+    }
+    mesh.updateMatrixWorld(true)
     const RayCaster = new THREE.Raycaster()
+    const recursive = this.getRaycastRecursive()
     const cloudsPoints = polygons.map((polygon) => {
       const outline = polygon.outline
       const holeOutlines = polygon.holes.map((h) => h.outline)
@@ -368,8 +384,8 @@ export default class ThreeDModelOverlay extends Overlay {
       let { xMin, xMax, yMin, yMax } = outlineBounds
       const cloudPoints = []
       let stepNum = 8
-      for (let i = 1; i < stepNum; i++) {
-        for (let j = 1; j < stepNum; j++) {
+      for (let i = 1; i < stepNum - 1; i++) {
+        for (let j = 1; j < stepNum - 1; j++) {
           const testPoint = {
             x: xMin + (i * (xMax - xMin)) / stepNum,
             y: yMin + (j * (yMax - yMin)) / stepNum,
@@ -384,7 +400,7 @@ export default class ThreeDModelOverlay extends Overlay {
               new THREE.Vector3(testPoint.x / 1000, testPoint.y / 1000, 100),
               new THREE.Vector3(0, 0, -1)
             )
-            let intersects = RayCaster.intersectObject(this.overlayMesh)
+            let intersects = RayCaster.intersectObject(mesh, recursive)
             if (intersects.length > 0) {
               cloudPoints.push(intersects[0].point)
             }

package/src/helper/cameraMixin.js

@@ -744,6 +744,23 @@ export default {
         waitingBall.scale.set(scale, scale, scale)
         this.render()
       }
+      // Per-frame updates for overlays (e.g. Google 3D Tiles)
+      const overlayMeshes = this.meshes?.overlayMeshes
+      let overlayUpdated = false
+      if (overlayMeshes) {
+        Object.values(overlayMeshes).forEach((mesh) => {
+          if (
+            mesh?.userData?.update &&
+            typeof mesh.userData.update === 'function'
+          ) {
+            mesh.userData.update()
+            overlayUpdated = true
+          }
+        })
+      }
+      if (overlayUpdated) {
+        this.render()
+      }
       this.animationFrameId = requestAnimationFrame(this.animate)
     },
   },