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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eturnity/eturnity_3d",
   "private": false,
-  "version": "9.13.0-google3dTile.1",
+  "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.
@@ -48,7 +34,7 @@ const TILES_FRUSTUM_ERROR_TARGET = 4
 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
+const ROOFS_BOUNDS_MARGIN_M = 5
 
 /** Same rhythm as ThreeDModelOverlay.animatePlaceholder (sin² on time) */
 function placeholderBounceScale(timeSeconds) {
@@ -76,10 +62,10 @@ 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
     )
@@ -93,18 +79,13 @@ export default class Google3DTilesOverlay extends ThreeDModelOverlay {
     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._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
@@ -152,8 +133,6 @@ export default class Google3DTilesOverlay extends ThreeDModelOverlay {
       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()
@@ -195,8 +174,6 @@ export default class Google3DTilesOverlay extends ThreeDModelOverlay {
     cam.updateProjectionMatrix()
     cam.updateMatrixWorld(true)
 
-    this._raycaster.set(new THREE.Vector3(cx, cy, z), this._rayDirDown)
-
     this._placeholderCenterX = cx
     this._placeholderCenterY = cy
     this._syncPlaceholderWorldXY()
@@ -209,26 +186,6 @@ export default class Google3DTilesOverlay extends ThreeDModelOverlay {
     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
@@ -265,12 +222,16 @@ export default class Google3DTilesOverlay extends ThreeDModelOverlay {
     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 }) => {
-      applyDoubleSideToTileScene(scene)
-      this._applyGoogleTilesOpacity(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
@@ -297,11 +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(
-      this._placeholderCenterX,
-      this._placeholderCenterY,
-      0
-    )
+    mesh.position.set(this._placeholderCenterX, this._placeholderCenterY, 0)
     mesh.scale.setScalar(1)
     scene.add(mesh)
     this._groundAlignPlaceholderMesh = mesh
@@ -345,49 +302,122 @@ 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.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
+    //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
     ) {
-      tilesWrapper.position.z -= boundingBox.min.z
+      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)
     }
 
-    tilesWrapper.updateMatrixWorld(true)
+    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
@@ -411,7 +441,26 @@ export default class Google3DTilesOverlay extends ThreeDModelOverlay {
       }
     })
   }
-
+  _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
@@ -453,6 +502,7 @@ export default class Google3DTilesOverlay extends ThreeDModelOverlay {
 
     const { tiles, tilesWrapper } = tilesData
     const { renderer, scene } = threeJSComponent
+    this.scene = scene
     tiles.setCamera(this._tilesCamera)
     tiles.setResolutionFromRenderer(this._tilesCamera, renderer)
 
@@ -460,9 +510,8 @@ 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()
     }
 
@@ -472,9 +521,8 @@ export default class Google3DTilesOverlay extends ThreeDModelOverlay {
       tiles.setCamera(this._tilesCamera)
       tiles.setResolutionFromRenderer(this._tilesCamera, renderer)
       tiles.update()
-      this.stickObjectToTheGround()
       this._syncGroundAlignPlaceholder(threeJSComponent)
-      if (this._groundAlignPlaceholderMesh) {
+      if (!this.tilesFullyLoaded) {
         this._tickGroundAlignPlaceholderAnimation()
       }
     }