@eturnity/eturnity_3d 9.13.0-google3dTile.0 → 9.13.0-google3dTile.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eturnity/eturnity_3d",
   "private": false,
-  "version": "9.13.0-google3dTile.0",
+  "version": "9.13.0-google3dTile.2",
   "files": [
     "dist",
     "src"

package/src/Overlay/Google3DTilesOverlay.js

@@ -20,20 +20,6 @@ import {
   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.
@@ -41,6 +27,15 @@ function applyDoubleSideToTileScene(scene) {
  */
 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
@@ -67,28 +62,30 @@ export default class Google3DTilesOverlay extends ThreeDModelOverlay {
     // 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,
+      -10,
+      10,
+      10,
+      -10,
       0.1,
       10000
     )
     this._tilesCamera.position.set(0, 0, -100)
     this._tilesCamera.lookAt(0, 0, 0)
     this._tilesCamera.updateMatrixWorld(true)
-    const raycaster = new THREE.Raycaster()
-    const raycasterOrigin = new THREE.Vector3(0, 0, -100)
-    const direction = new THREE.Vector3(0, 0, 1)
-    raycaster.far = 1000000
-    raycaster.near = 1
-    raycaster.set(raycasterOrigin, direction)
-    this._raycaster = raycaster
+    /** @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._tilesGroundAligned = false
+    this.tilesFullyLoaded = false
+    this.scene = null
   }
   getOverlayMeshForRaycast() {
     return this.tilesData?.tiles.group
@@ -98,24 +95,95 @@ export default class Google3DTilesOverlay extends ThreeDModelOverlay {
     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
+    )
+  }
+
   /**
-   * 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
+   * 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
    */
-  raycastAtOrigin() {
-    const { tilesWrapper } = this.tilesData || {}
-    if (!tilesWrapper) return null
-
-    tilesWrapper.updateMatrixWorld(true)
+  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
+    }
 
-    const intersects = this._raycaster.intersectObject(tilesWrapper, true)
-    if (intersects.length > 0) {
-      if (intersects[0].point.z < 30) {
-        this._tilesGroundAligned = true
-      }
-      return intersects[0]
+    this.roofsBound = {
+      xMin: boundsMm.xMin,
+      xMax: boundsMm.xMax,
+      yMin: boundsMm.yMin,
+      yMax: boundsMm.yMax,
+      zMin: boundsMm.zMin,
+      zMax: boundsMm.zMax,
     }
-    return null
+
+    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() {
@@ -144,21 +212,28 @@ export default class Google3DTilesOverlay extends ThreeDModelOverlay {
     // Prefer loading tiles that intersect _tilesCamera before prefetch / out-of-frustum work
     tiles.optimizedLoadStrategy = true
 
-    tiles.addEventListener('load-model', ({ scene }) => {
-      applyDoubleSideToTileScene(scene)
-    })
-
     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
+    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
   }
 
@@ -183,7 +258,7 @@ export default class Google3DTilesOverlay extends ThreeDModelOverlay {
     const mesh = new THREE.Mesh(geometry, material)
     mesh.name = 'Google3DTilesGroundAlignPlaceholder'
     mesh.userData.googleTilesGroundAlignPlaceholder = true
-    mesh.position.set(0, 0, 0)
+    mesh.position.set(this._placeholderCenterX, this._placeholderCenterY, 0)
     mesh.scale.setScalar(1)
     scene.add(mesh)
     this._groundAlignPlaceholderMesh = mesh
@@ -204,10 +279,10 @@ export default class Google3DTilesOverlay extends ThreeDModelOverlay {
     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.position.x = 0
-    mesh.position.y = 0
     mesh.material.opacity = 0.06 + 0.22 * Math.sin(t * 0.85 * Math.PI) ** 2
   }
 
@@ -227,52 +302,207 @@ export default class Google3DTilesOverlay extends ThreeDModelOverlay {
 
   _syncGroundAlignPlaceholder(threeJSComponent) {
     if (!threeJSComponent?.scene) return
-    if (this._tilesGroundAligned) {
+    if (this.tilesFullyLoaded) {
       this._removeGroundAlignPlaceholder(threeJSComponent)
     } else {
       this._ensureGroundAlignPlaceholder(threeJSComponent)
     }
   }
-
-  stickObjectToTheGround() {
+  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
     }
 
-    const raycastIntersect = this.raycastAtOrigin()
-    if (!raycastIntersect) {
-      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)
     }
 
-    const tileMesh = raycastIntersect.object
-    const geom = tileMesh.geometry
-    if (!geom) {
-      this._tilesGroundAligned = false
-      return
-    }
-    if (!geom.boundingBox) geom.computeBoundingBox()
+    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
+  }
 
-    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
+  /**
+   * 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)
     }
+  }
 
-    tilesWrapper.updateMatrixWorld(true)
+  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)
 
@@ -280,21 +510,19 @@ export default class Google3DTilesOverlay extends ThreeDModelOverlay {
     tilesWrapper.userData.meshId = this.id
     tilesWrapper.userData.version = this.version
 
-    this.stickObjectToTheGround()
     this._syncGroundAlignPlaceholder(threeJSComponent)
-    if (this._groundAlignPlaceholderMesh) {
+    if (!this.tilesFullyLoaded) {
       this._tickGroundAlignPlaceholderAnimation()
     }
 
     tilesWrapper.userData.update = () => {
-      if (!tiles || !renderer) return
+      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) {
+      if (!this.tilesFullyLoaded) {
         this._tickGroundAlignPlaceholderAnimation()
       }
     }
@@ -306,6 +534,7 @@ export default class Google3DTilesOverlay extends ThreeDModelOverlay {
 
     threeJSComponent.meshes.overlayMeshes[this.id] = tilesWrapper
     this.overlayMesh = tilesWrapper
+    this._applyGoogleTilesOpacity(tilesWrapper)
     return tilesWrapper
   }
 
@@ -338,6 +567,7 @@ export default class Google3DTilesOverlay extends ThreeDModelOverlay {
     }
     this.tilesData = null
     this.overlayMesh = null
+    this.roofsBound = null
     this._initPromise = null
     this._tilesGroundAligned = false
   }