@eturnity/eturnity_3d 9.10.0 → 9.13.0-google3dTile.0

package/dist/style.css

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

package/dist/vite.svg

@@ -0,0 +1 @@
+<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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eturnity/eturnity_3d",
   "private": false,
-  "version": "9.10.0",
+  "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.7.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

@@ -122,7 +122,6 @@ export default class ThreeDModelOverlay extends Overlay {
           return
         }
         group = new this.Paper.Group()
-
         group.addChild(this.renderImagePlaceHolder(paperJSComponent))
         group.itemType = 'placeholderOverlays'
         group.type = 'imageOverlays'
@@ -138,7 +137,6 @@ export default class ThreeDModelOverlay extends Overlay {
       this.hasPlaceholderPath = true
       return
     }
-
     if (this.hasPlaceholderPath) {
       if (group) {
         paperJSComponent.clearPath(group)
@@ -352,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)
@@ -370,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,
@@ -386,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

@@ -440,7 +440,10 @@ export default {
         this.setTweenTo({ position, target })
       }
     },
-    setCameraGlobalPosition() {
+    setCameraGlobalPositionImmediately() {
+      this.setCameraGlobalPosition({ duration: 0 })
+    },
+    setCameraGlobalPosition({ duration = 1500 } = {}) {
       if (this.camera.isOrthographicCamera) {
         this.setOrthographicCameraGlobalPosition()
       } else {
@@ -466,10 +469,41 @@ export default {
           positionVector.z,
         ]
         let target = [targetVector.x, targetVector.y, targetVector.z]
-        this.setTweenTo({ position, target, fov: newFov })
+        this.setTweenTo({ position, target, fov: newFov, duration })
       }
     },
-    setCameraGlobalVerticalPosition() {
+    setCameraGlobalAlmostVerticalPosition({ duration = 1000 } = {}) {
+      let position, target
+      if (this.roofs.length != 0) {
+        let bounds = this.roofsBounds
+        let targetVector = {
+          x: (bounds.xMax + bounds.xMin) / 2000,
+          y: (bounds.yMax + bounds.yMin) / 2000,
+          z: 0,
+        }
+        let objectRadius_m = Math.max(
+          (bounds.xMax - bounds.xMin) / 2000,
+          (bounds.yMax - bounds.yMin) / 2000
+        )
+
+        let distance =
+          2 *
+          (objectRadius_m / Math.sin(((this.camera.fov / 2) * Math.PI) / 180))
+        let cameraMoveVector = { x: 0, y: 0, z: distance }
+        const positionVector = addVector(targetVector, cameraMoveVector)
+        position = [positionVector.x, positionVector.y - 1, positionVector.z]
+        target = [targetVector.x, targetVector.y, targetVector.z]
+      } else {
+        position = [0, -1, 300]
+        target = [0, 0, 0]
+      }
+      this.setTweenTo({
+        position,
+        target,
+        duration,
+      })
+    },
+    setCameraGlobalVerticalPosition(changeCameraTypeAsCallback = true) {
       let position, target
       let newFov = 10
       if (this.roofs.length != 0) {
@@ -498,10 +532,12 @@ export default {
         position,
         target,
         fov: newFov,
-        callback: this.turnPerspectiveCameraToOrthogonal,
+        callback: changeCameraTypeAsCallback
+          ? this.turnPerspectiveCameraToOrthogonal
+          : undefined,
       })
     },
-    setCameraOrthogonalTo(polygon) {
+    setCameraOrthogonalTo(polygon, { duration = 1000 } = {}) {
       if (polygon) {
         let polygonRef = polygon
         const targetVector = polygonRef.meanPoint
@@ -519,7 +555,7 @@ export default {
           positionVector.y / 1000 - 1,
           positionVector.z / 1000,
         ]
-        this.setTweenTo({ position, target })
+        this.setTweenTo({ position, target, duration })
       }
     },
     setCameraSideTo(polygon) {
@@ -553,11 +589,24 @@ export default {
         position,
         target,
         fov = 50,
-        duration = 2000,
+        duration = 1500,
         callback = () => {},
       } = payload
       TWEEN.removeAll()
       if (this.camera) {
+        if (duration == 0) {
+          this.camera.fov = fov
+          this.camera.position.set(position[0], position[1], position[2])
+
+          this.camera.updateProjectionMatrix()
+
+          this.orbitControl.target.set(target[0], target[1], target[2])
+          if (this.orbitControl && this.orbitControl.update) {
+            this.orbitControl.update()
+          }
+          callback()
+          return
+        }
         const currentTweenVar = {
           t: 0,
         }
@@ -695,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)
     },
   },

package/src/helper/render/edge.js

@@ -60,7 +60,7 @@ export default {
           (edge.layer != 'moduleField' ||
             !this.selectedModuleField ||
             !edge.belongsTo
-              .map((i) => i.polygonId)
+              .map((i) => i.itemId)
               .includes(this.selectedModuleField.id))
         ) {
           return

package/src/helper/render/geometryHandler.js

@@ -263,7 +263,7 @@ export function getBufferWallGeometry(polygon) {
   // itemSize = 3 because there are 3 values (components) per vertex
   geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3))
   geometry.computeVertexNormals()
-
+  geometry.userData.version = 0
   return geometry
 }
 
@@ -321,6 +321,7 @@ export function getBufferObstacleGeometry(obstaclePolygon, roofPolygon) {
   // itemSize = 3 because there are 3 values (components) per vertex
   geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3))
   geometry.computeVertexNormals()
+  geometry.userData.version = 0
   return geometry
 }
 
@@ -405,6 +406,7 @@ export function getBufferObstacleSideGeometry(obstaclePolygon, roofPolygon) {
   // itemSize = 3 because there are 3 values (components) per vertex
   geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3))
   geometry.computeVertexNormals()
+  geometry.userData.version = 0
   return geometry
 }
 
@@ -440,6 +442,7 @@ export function getBufferModuleFieldGeometry(moduleFieldPolygon) {
   geometry.setAttribute('uv', new THREE.BufferAttribute(uvs, 2))
 
   geometry.computeVertexNormals()
+  geometry.userData.version = 0
   return geometry
 }
 
@@ -485,6 +488,7 @@ export function getBufferImageOverlayGeometry(corners) {
   geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3))
   geometry.setAttribute('uv', new THREE.BufferAttribute(uvs, 2))
   geometry.computeVertexNormals()
+  geometry.userData.version = 0
   return geometry
 }
 export function getPanelOutlineWithHeightOffset(panelPolygon) {
@@ -525,6 +529,7 @@ export function getBufferPanelGeometry(panelPolygon) {
   geometry.setAttribute('uv', new THREE.BufferAttribute(uvs, 2))
 
   geometry.computeVertexNormals()
+  geometry.userData.version = 0
   return geometry
 }
 export function updateBufferPanelGeometry(panelPolygon, geometry) {
@@ -635,6 +640,7 @@ export function getBufferPanelSideGeometry(panelPolygon) {
   // itemSize = 3 because there are 3 values (components) per vertex
   geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3))
   geometry.computeVertexNormals()
+  geometry.userData.version = 0
   return geometry
 }
 

package/src/helper/render/mergedGeometry.js

@@ -6,9 +6,12 @@ export default {
       const mergedVertices = []
       const mergedNormals = []
       const mergedUvs = []
-      const geometryVersion = mergedGeometry.userData.version || 0
+      const geometryVersion = mergedGeometry?.userData?.version || 0
       let geometryChanged = false
       geometries.forEach((geometry) => {
+        if (!geometry || !geometry.attributes?.position || !geometry.attributes?.normal) {
+          return
+        }
         const positions = geometry.attributes.position.array
         const normals = geometry.attributes.normal.array
         mergedVertices.push(...positions.slice(0, 3 * geometry.drawRange.count))
@@ -66,6 +69,9 @@ export default {
       const mergedUvs = []
 
       geometries.forEach((geometry) => {
+        if (!geometry || !geometry.attributes?.position || !geometry.attributes?.normal) {
+          return
+        }
         const positions = geometry.attributes.position.array
         const normals = geometry.attributes.normal.array
 
@@ -96,11 +102,16 @@ export default {
     },
 
     updateOrCreateMergedMesh(mesh, geometries, material) {
-      if (!mesh) {
+      if (!mesh || !mesh.geometry) {
         let mergedGeometry = this.createMergedGeometry(geometries)
-        mesh = new THREE.Mesh(mergedGeometry, material)
-        // Add the merged mesh to the scene
-        this.scene.add(mesh)
+        if (!mesh) {
+          mesh = new THREE.Mesh(mergedGeometry, material)
+          // Add the merged mesh to the scene
+          this.scene.add(mesh)
+        } else {
+          mesh.geometry = mergedGeometry
+          if (material) mesh.material = material
+        }
       } else {
         let mergedGeometry = this.updateMergedGeometry(
           geometries,