@eturnity/eturnity_3d 9.13.0-google3dTile.2 → 9.16.0

package/dist/style.css

@@ -1 +0,0 @@
-.canvas3DContainer{height:100%;width:100%}.canvas3DContainer>canvas{height:100%;width:100%}

package/dist/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/Overlay/Google3DTilesOverlay.js

@@ -1,574 +0,0 @@
-/**
- * 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'
-
-/**
- * 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 = 5
-
-/** 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(
-      -10,
-      10,
-      10,
-      -10,
-      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 = 10
-    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.tilesFullyLoaded = false
-    this.scene = null
-  }
-  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._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._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
-  }
-
-  _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 = 0
-    this.tilesData = { tiles, tilesWrapper }
-
-    tiles.addEventListener('load-model', ({ scene, tile }) => {
-      console.log('tile size loading', tiles.loadingTiles.size)
-      this.tilesFullyLoaded = tiles.loadingTiles.size == 0
-      if (this.tilesFullyLoaded) {
-        this._applyGoogleTilesShadowProperty(tilesWrapper)
-        this.stickObjectToTheGround(scene)
-      }
-    })
-
-    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.tilesFullyLoaded) {
-      this._removeGroundAlignPlaceholder(threeJSComponent)
-    } else {
-      this._ensureGroundAlignPlaceholder(threeJSComponent)
-    }
-  }
-  getBoundingBoxOfTiles(tileGroups) {
-    let mergedBoundingBox = new THREE.Box3()
-    tileGroups.forEach((tileGroup) => {
-      const tileMesh = tileGroup.children[0]
-      if (tileGroup.visible && tileMesh.geometry && tileMesh.visible) {
-        //create random color
-        const boundingBox = this.getBoundingBoxOfTile(tileMesh)
-        //compute bounding box in world coordinates
-        mergedBoundingBox.union(boundingBox)
-      }
-    })
-    return mergedBoundingBox
-  }
-  stickObjectToTheGround(scene) {
-    const { tiles, tilesWrapper } = this.tilesData || {}
-    if (!tiles || !tilesWrapper) {
-      this._tilesGroundAligned = false
-      return
-    }
-
-    //merge all bounding boxes of the tiles
-    const boundingBox = this.getBoundingBoxOfTiles(
-      tilesWrapper.children[0].children
-    )
-    tilesWrapper.position.z -= boundingBox.min.z
-    tilesWrapper.updateMatrixWorld(true)
-    this._tilesGroundAligned = true
-  }
-  getBoundingBoxOfTile(tileMesh) {
-    const extremePoints = []
-    let minX = Infinity,
-      maxX = -Infinity,
-      minY = Infinity,
-      maxY = -Infinity,
-      minZ = Infinity,
-      maxZ = -Infinity
-    //use for instead of forEach as the array doesn't contain points but indices
-    for (
-      let i = 300;
-      i < tileMesh.geometry.attributes.position.array.length;
-      i += 3
-    ) {
-      const x = tileMesh.geometry.attributes.position.array[i]
-      const y = tileMesh.geometry.attributes.position.array[i + 1]
-      const z = tileMesh.geometry.attributes.position.array[i + 2]
-      let point = new THREE.Vector3(x, y, z)
-      point.applyMatrix4(tileMesh.matrixWorld)
-      minX = Math.min(minX, point.x)
-      maxX = Math.max(maxX, point.x)
-      minY = Math.min(minY, point.y)
-      maxY = Math.max(maxY, point.y)
-      minZ = Math.min(minZ, point.z)
-      maxZ = Math.max(maxZ, point.z)
-    }
-
-    extremePoints.push(new THREE.Vector3(maxX, maxY, maxZ))
-    extremePoints.push(new THREE.Vector3(minX, maxY, minZ))
-    extremePoints.push(new THREE.Vector3(maxX, minY, minZ))
-    extremePoints.push(new THREE.Vector3(minX, maxY, maxZ))
-    extremePoints.push(new THREE.Vector3(maxX, minY, maxZ))
-    extremePoints.push(new THREE.Vector3(minX, minY, maxZ))
-    extremePoints.push(new THREE.Vector3(maxX, maxY, minZ))
-
-    const boundingBox = new THREE.Box3(
-      new THREE.Vector3(minX, minY, minZ),
-      new THREE.Vector3(maxX, maxY, maxZ)
-    )
-    return boundingBox
-  }
-
-  /**
-   * Apply global overlay opacity to all tile mesh materials (base Overlay.setOpacity only updates state + emit).
-   */
-  /**
-   * Replace MeshBasicMaterial with MeshPhongMaterial for lit/shadow rendering.
-   * Textures are reused by reference. Caller must re-run TilesFadePlugin material prep after batch swap.
-   */
-  _convertGoogleTileBasicToPhong(basic) {
-    const phong = new THREE.MeshPhongMaterial()
-    //THREE.Material.prototype.copy.call(phong, basic)
-    phong.color = new THREE.Color(0xffffff)
-    phong.map = basic.map
-    phong.side = THREE.DoubleSide
-    phong.transparent = false
-    phong.opacity = 1
-    phong.shadowSide = THREE.DoubleSide
-    phong.flatShading = true
-    // phong.lightMap = basic.lightMap
-    // phong.lightMapIntensity = basic.lightMapIntensity
-    // phong.aoMap = basic.aoMap
-    // phong.aoMapIntensity = basic.aoMapIntensity
-    // phong.specularMap = basic.specularMap
-    // phong.alphaMap = basic.alphaMap
-    // phong.envMap = basic.envMap
-    // phong.envMapRotation.copy(basic.envMapRotation)
-    // phong.combine = basic.combine
-    basic.dispose()
-    return phong
-  }
-
-  /**
-   * New materials after Basic→Phong swap must be wrapped for TilesFadePlugin dither fade.
-   * Uses FADE_TILES_PLUGIN internals (prepareScene); coupled to 3d-tiles-renderer version.
-   */
-  _reregisterGoogleTilesFadeMaterials(wrapper) {
-    const tiles = this.tilesData?.tiles
-    const fadePlugin = tiles?.getPluginByName?.('FADE_TILES_PLUGIN')
-    fadePlugin?._fadeMaterialManager?.prepareScene?.(wrapper)
-  }
-
-  _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
-        }
-      }
-    })
-  }
-  _applyGoogleTilesShadowProperty(wrapper) {
-    if (!wrapper) return
-    wrapper.traverse((object) => {
-      if (!object.isMesh || !object.material) return
-      if (Array.isArray(object.material)) {
-        object.material = object.material.map((mat) =>
-          this._convertGoogleTileBasicToPhong(mat)
-        )
-      } else {
-        object.material = this._convertGoogleTileBasicToPhong(object.material)
-      }
-    })
-    // this._reregisterGoogleTilesFadeMaterials(wrapper)
-    wrapper.traverse((object) => {
-      if (!object.isMesh) return
-      object.castShadow = true
-      object.receiveShadow = true
-      object.needsUpdate = true
-    })
-  }
-  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
-    this.scene = scene
-    tiles.setCamera(this._tilesCamera)
-    tiles.setResolutionFromRenderer(this._tilesCamera, renderer)
-
-    tilesWrapper.userData.type = 'overlayMeshes'
-    tilesWrapper.userData.meshId = this.id
-    tilesWrapper.userData.version = this.version
-
-    this._syncGroundAlignPlaceholder(threeJSComponent)
-    if (!this.tilesFullyLoaded) {
-      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._syncGroundAlignPlaceholder(threeJSComponent)
-      if (!this.tilesFullyLoaded) {
-        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
-  }
-}