@eturnity/eturnity_3d 9.10.1 → 9.13.0-google3dTile.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eturnity/eturnity_3d",
   "private": false,
-  "version": "9.10.1",
+  "version": "9.13.0-google3dTile.0",
   "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,344 @@
+/**
+ * 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
+
+/** 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)
+    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
+    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
+  }
+
+  /**
+   * 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() {
+    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.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.rotation.x = Math.PI / 2
+    tilesWrapper.rotation.y = Math.PI
+    tilesWrapper.add(tiles.group)
+    tilesWrapper.position.z = -200
+    this.tilesData = { tiles, 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(0, 0, 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)
+    // 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
+  }
+
+  _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.raycastAtOrigin()
+    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)
+  }
+  async renderOnThreeJS(threeJSComponent) {
+    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 (!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
+    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._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)
     },
   },