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

package/package.json

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

package/src/Overlay/Google3DTilesOverlay.js

@@ -41,6 +41,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 = 50
+
 /** Same rhythm as ThreeDModelOverlay.animatePlaceholder (sin² on time) */
 function placeholderBounceScale(timeSeconds) {
   const baseRadius = 0.65
@@ -77,12 +86,19 @@ export default class Google3DTilesOverlay extends ThreeDModelOverlay {
     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()
-    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._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 */
@@ -98,11 +114,106 @@ 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
+    )
+  }
+
+  /**
+   * 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
    */
-  raycastAtOrigin() {
+  raycastAtRoofsBoundCenter() {
     const { tilesWrapper } = this.tilesData || {}
     if (!tilesWrapper) return null
 
@@ -144,21 +255,24 @@ 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
     this.tilesData = { tiles, tilesWrapper }
+
+    tiles.addEventListener('load-model', ({ scene }) => {
+      applyDoubleSideToTileScene(scene)
+      this._applyGoogleTilesOpacity(tilesWrapper)
+    })
+
     return this.tilesData
   }
 
@@ -183,7 +297,11 @@ 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 +322,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
   }
 
@@ -241,7 +359,7 @@ export default class Google3DTilesOverlay extends ThreeDModelOverlay {
       return
     }
 
-    const raycastIntersect = this.raycastAtOrigin()
+    const raycastIntersect = this.raycastAtRoofsBoundCenter()
     if (!raycastIntersect) {
       this._tilesGroundAligned = false
       return
@@ -267,7 +385,69 @@ export default class Google3DTilesOverlay extends ThreeDModelOverlay {
 
     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
 
@@ -287,7 +467,7 @@ export default class Google3DTilesOverlay extends ThreeDModelOverlay {
     }
 
     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)
@@ -306,6 +486,7 @@ export default class Google3DTilesOverlay extends ThreeDModelOverlay {
 
     threeJSComponent.meshes.overlayMeshes[this.id] = tilesWrapper
     this.overlayMesh = tilesWrapper
+    this._applyGoogleTilesOpacity(tilesWrapper)
     return tilesWrapper
   }
 
@@ -338,6 +519,7 @@ export default class Google3DTilesOverlay extends ThreeDModelOverlay {
     }
     this.tilesData = null
     this.overlayMesh = null
+    this.roofsBound = null
     this._initPromise = null
     this._tilesGroundAligned = false
   }