@eturnity/eturnity_3d 8.37.0 → 8.40.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eturnity/eturnity_3d",
   "private": false,
-  "version": "8.37.0",
+  "version": "8.40.1",
   "files": [
     "dist",
     "src"

package/src/helper/cameraMixin.js

@@ -73,22 +73,32 @@ export default {
     setCameraAspectRatio() {
       const canvasRatio = this.getCanvasRatio()
       if (this.camera.isOrthographicCamera) {
-        const width = this.camera.right - this.camera.left
-        const height = this.camera.top - this.camera.bottom
-        const currentAspect = width / height
+        const currentAspect = Math.abs(
+          (this.camera.right - this.camera.left) /
+            (this.camera.top - this.camera.bottom)
+        )
+
+        // Calculate current half-width and half-height
+        const halfWidth = (this.camera.right - this.camera.left) / 2
+        const halfHeight = (this.camera.top - this.camera.bottom) / 2
+
+        // Adjust dimensions to match new aspect ratio
+        let newHalfWidth, newHalfHeight
         if (canvasRatio > currentAspect) {
-          // canvas is wider expand width
-          const newWidth = height * canvasRatio
-          const centerX = (this.camera.left + this.camera.right) / 2
-          this.camera.left = centerX - newWidth / 2
-          this.camera.right = centerX + newWidth / 2
+          // Canvas is wider, adjust width
+          newHalfHeight = halfHeight
+          newHalfWidth = halfHeight * canvasRatio
         } else {
-          // canvas is taller expand height
-          const newHeight = width / canvasRatio
-          const centerY = (this.camera.top + this.camera.bottom) / 2
-          this.camera.top = centerY + newHeight / 2
-          this.camera.bottom = centerY - newHeight / 2
+          // Canvas is taller, adjust height
+          newHalfWidth = halfWidth
+          newHalfHeight = halfWidth / canvasRatio
         }
+
+        // Set new boundaries (left+right=0, top+bottom=0)
+        this.camera.left = -newHalfWidth
+        this.camera.right = newHalfWidth
+        this.camera.top = newHalfHeight
+        this.camera.bottom = -newHalfHeight
       } else {
         this.camera.aspect = canvasRatio
       }
@@ -160,6 +170,7 @@ export default {
       if (this.composer) {
         this.composer.render()
       }
+      this.onWindowResize()
     },
     turnOrthogonalCameraToPerspective() {
       if (this.perspectiveCamera.id == this.camera.id) {
@@ -215,6 +226,7 @@ export default {
       if (this.composer) {
         this.composer.render()
       }
+      this.onWindowResize()
     },
     zoomIn3D() {
       if (this.camera.isOrthographicCamera) {
@@ -318,7 +330,9 @@ export default {
       this.camera.far = 10000
       this.camera.zoom = zoom
 
-      this.camera.position.set(x, y, 100)
+      const cameraAltitude =
+        (top - bottom) / Math.sin(((50 / 2) * Math.PI) / 180) / zoom
+      this.camera.position.set(x, y, cameraAltitude * zoom)
       this.camera.lookAt(x, y, 0)
       this.setCameraAspectRatio()
       this.camera.updateProjectionMatrix()
@@ -341,20 +355,34 @@ export default {
     setOrthographicCameraGlobalPosition(
       cameraOffset = { x_m: 0, y_m: 0, z_m: 0 }
     ) {
+      const cameraRatio =
+        (this.camera.right - this.camera.left) /
+        (this.camera.top - this.camera.bottom)
+
       const halfWidth = (this.roofsBounds.xMax - this.roofsBounds.xMin) / 2000
       const halfHeight = (this.roofsBounds.yMax - this.roofsBounds.yMin) / 2000
 
-      let left = -halfWidth - marginAroundBuildingForCameraViewInMeter
-      let right = halfWidth + marginAroundBuildingForCameraViewInMeter
+      let left = halfWidth - marginAroundBuildingForCameraViewInMeter
+      let right = -left
       let top = halfHeight + marginAroundBuildingForCameraViewInMeter
-      let bottom = -halfHeight - marginAroundBuildingForCameraViewInMeter
+      let bottom = -top
+      let width = right - left
+      let height = top - bottom
+      if (cameraRatio < width / height) {
+        top = width / cameraRatio / 2
+        bottom = -width / cameraRatio / 2
+      } else {
+        left = -(height * cameraRatio) / 2
+        right = (height * cameraRatio) / 2
+      }
 
       const zoom = 1
+
       const x =
-        (this.roofsBounds.xMin + this.roofsBounds.xMax) / 2000 +
+        (this.roofsBounds.xMax + this.roofsBounds.xMin) / 2000 +
         cameraOffset.x_m
       const y =
-        (this.roofsBounds.yMin + this.roofsBounds.yMax) / 2000 +
+        (this.roofsBounds.yMax + this.roofsBounds.yMin) / 2000 +
         cameraOffset.y_m
 
       this.setOrthographicCameraPositionFromCameraParameters({

package/src/helper/render/CustomLOD.js

@@ -0,0 +1,65 @@
+import * as THREE from 'three'
+
+// Helper vectors for distance calculations
+const _v1 = new THREE.Vector3()
+const _v2 = new THREE.Vector3()
+
+export class CustomLOD extends THREE.LOD {
+  constructor() {
+    super()
+  }
+
+  update(camera) {
+    // Check if camera is orthographic
+    if (camera.isOrthographicCamera) {
+      // Custom implementation for orthographic cameras
+      const levels = this.levels
+
+      if (levels.length > 1) {
+        _v1.setFromMatrixPosition(camera.matrixWorld)
+        _v2.setFromMatrixPosition(this.matrixWorld)
+
+        // For orthographic cameras, use distance along the camera's vertical axis
+        const cameraDirection = new THREE.Vector3()
+        camera.getWorldDirection(cameraDirection)
+
+        // Calculate the vector from camera to object
+        const toObject = _v2.clone().sub(_v1)
+
+        // Get distance along camera's view direction
+        const distance = Math.abs(toObject.dot(cameraDirection)) / camera.zoom
+
+        levels[0].object.visible = true
+
+        let i, l
+
+        for (i = 1, l = levels.length; i < l; i++) {
+          let levelDistance = levels[i].distance
+
+          if (levels[i].object.visible) {
+            levelDistance -= levelDistance * levels[i].hysteresis
+          }
+
+          if (distance >= levelDistance) {
+            levels[i - 1].object.visible = false
+            levels[i].object.visible = true
+          } else {
+            break
+          }
+        }
+
+        this._currentLevel = i - 1
+
+        for (; i < l; i++) {
+          levels[i].object.visible = false
+        }
+      }
+    } else {
+      // Use the original THREE.LOD update method for perspective cameras
+      super.update(camera)
+    }
+  }
+}
+
+// Also export as default for convenience
+export default CustomLOD

package/src/helper/render/marker.js

@@ -1,5 +1,5 @@
 import * as THREE from 'three'
-
+import { CustomLOD } from './CustomLOD'
 export default {
   created() {},
   methods: {
@@ -10,7 +10,7 @@ export default {
       if (this.meshes.markerMesh) {
         return
       }
-      //const lod = new THREE.LOD()
+      const lod = new CustomLOD()
       const sphereGeometry = new THREE.SphereGeometry(1, 32, 32) // Initial radius of 5
       const coneGeometry = new THREE.ConeGeometry(0.98, 2, 32)
 
@@ -41,21 +41,18 @@ export default {
 
       markerMesh.add(sphereMesh)
       markerMesh.userData = { id: 'marker' }
-      markerMesh.position.set(roofCenter.x, roofCenter.y, roofCenter.z + 10)
-      markerMesh.scale.set(3, 3, 3)
-      // for (let i = 1; i < 10; i++) {
-      //   const mesh = markerMesh.clone()
-      //   mesh.scale.set(i * 3, i * 3, i * 3)
-      //   mesh.position.set(0, 0, 12 * i)
-      //   lod.addLevel(mesh, (i - 1) * 100)
-      // }
-      // const lastMesh = markerMesh.clone()
-      // lastMesh.scale.set(150, 150, 150)
-      // lastMesh.position.set(0, 0, 600)
-      // lod.addLevel(lastMesh, 1000)
-      // this.scene.add(lod)
-      this.scene.add(markerMesh)
-      this.meshes.markerMesh = markerMesh
+      markerMesh.position.set(0, 0, 0)
+      markerMesh.scale.set(1, 1, 1)
+      for (let i = 1; i < 50; i++) {
+        const mesh = markerMesh.clone()
+        mesh.scale.set(2 * i, 2 * i, 2 * i)
+        mesh.position.set(0, 0, 5 * i)
+        lod.addLevel(mesh, (i - 1) * 200)
+      }
+      lod.position.set(roofCenter.x, roofCenter.y, 2 * roofCenter.z)
+      lod.updateMatrix()
+      this.scene.add(lod)
+      this.meshes.markerMesh = lod
     },
     showMarker() {
       if (!this.meshes.markerMesh) {

package/src/helper/render/scene.js

@@ -20,7 +20,7 @@ export default {
       params.is_marker_visible || params.is_marker_visible == undefined
         ? this.showMarker()
         : this.hideMarker()
-      params.view_mode == '3d' || params.is_panel_visible == undefined
+      params.view_mode == '3d'
         ? this.turnOrthogonalCameraToPerspective()
         : this.turnPerspectiveCameraToOrthogonal()
       if (params.map_layer != undefined) {

package/src/helper/render/tile.js

@@ -70,7 +70,6 @@ export default {
       const latitude = this.layoutSettings.layout_latitude
       const longitude = this.layoutSettings.layout_longitude
       let { xMin, xMax, yMin, yMax } = this.roofsBounds
-
       if (xMin == Infinity) {
         xMin = 0
         yMin = 0
@@ -107,10 +106,10 @@ export default {
         longitude + lngMax,
         zoomLvl
       )
-      xTileMin = xTileMin - (xTileMin % 2)
-      xTileMax = xTileMax + 1 - (xTileMax % 2)
-      yTileMin = yTileMin - (yTileMin % 2)
-      yTileMax = yTileMax + 1 - (yTileMax % 2)
+      xTileMin = xTileMin - (xTileMin % 2) - 2
+      xTileMax = xTileMax + 1 - (xTileMax % 2) + 2
+      yTileMin = yTileMin - (yTileMin % 2) - 2
+      yTileMax = yTileMax + 1 - (yTileMax % 2) + 2
       this.tileToRender = []
       for (let xTile = xTileMin; xTile <= xTileMax; xTile++) {
         for (let yTile = yTileMin; yTile <= yTileMax; yTile++) {
@@ -132,7 +131,7 @@ export default {
           })
         }
       }
-      while (zoomLvl > 17) {
+      while (zoomLvl > 16) {
         xTileMin = xTileMin / 2 - 1
         xTileMax = (xTileMax + 1) / 2
         yTileMin = yTileMin / 2 - 1
@@ -333,7 +332,11 @@ export default {
             resolve()
           })
           .catch((err) => {
-            reject()
+            this.isReady = {
+              ...this.isReady,
+              texturesToLoad: this.isReady.texturesToLoad - 1,
+            }
+            reject(err)
           })
       })
       return promise
@@ -444,6 +447,10 @@ export default {
           texturesToLoad: this.isReady.texturesToLoad + 1,
         }
         this.loader.load(googleBackgroundUrl, (texture) => {
+          this.isReady = {
+            ...this.isReady,
+            texturesLoaded: this.isReady.texturesLoaded + 1,
+          }
           texture.encoding = THREE.sRGBEncoding
           texture.colorSpace = THREE.SRGBColorSpace
           planeTexture[indexGoogleBackground] = texture
@@ -494,10 +501,6 @@ export default {
             this.googleBackgroundMap.castShadow = false
             this.render()
           }
-          this.isReady = {
-            ...this.isReady,
-            texturesLoaded: this.isReady.texturesLoaded + 1,
-          }
         })
       }
 
@@ -509,6 +512,10 @@ export default {
       this.pendingTiles = this.pendingTiles.filter((t) => {
         if (t.mapLayer != newMapLayer.key) {
           t.imagePromise.cancel()
+          this.isReady = {
+            ...this.isReady,
+            texturesToLoad: this.isReady.texturesToLoad - 1,
+          }
           return false
         }
         return true

package/src/helper/renderMixin.js

@@ -115,6 +115,9 @@ export default {
       if (methodList.length) {
         this.renderMethods(methodList)
         this.render()
+        if (this.handleOrbitControlChange) {
+          this.handleOrbitControlChange()
+        }
       }
 
       this.lastGeometryEventIdDone = this.lastGeometryEventId

package/src/helper/threeMixin.js

@@ -262,15 +262,19 @@ export default {
       this.render()
     },
     onWindowResize() {
-      if (this.orbitControl) {
-        this.orbitControl.update()
+      const clientHeight = this.DOMElement.clientHeight
+      const clientWidth = this.DOMElement.clientWidth
+      if (clientHeight && clientWidth) {
+        if (this.orbitControl) {
+          this.orbitControl.update()
+        }
+        this.canvasOffset = this.getCanvasOffset()
+        this.canvasHeight = clientHeight
+        this.canvasWidth = clientWidth
+        this.resizeRenderer()
+        this.setCameraAspectRatio()
+        this.render()
       }
-      this.canvasOffset = this.getCanvasOffset()
-      this.canvasHeight = this.DOMElement.clientHeight
-      this.canvasWidth = this.DOMElement.clientWidth
-      this.resizeRenderer()
-      this.setCameraAspectRatio()
-      this.render()
     },
     onCanvasResize() {
       const canvas = this.renderer.domElement
@@ -280,7 +284,7 @@ export default {
         this.resizeRenderer()
 
         if (this.composer) {
-          this.composer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
+          this.composer.setPixelRatio(window.devicePixelRatio)
           if (this.composer.setViewport) {
             this.composer.setViewport(0, 0, width, height)
           }