@eturnity/eturnity_3d 8.34.6 → 8.37.0

package/package.json

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

package/src/helper/cameraMixin.js

@@ -1,6 +1,5 @@
 import TWEEN from 'tween'
 import * as THREE from 'three'
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import {
   addVector,
   getDistanceBetweenPoints,
@@ -24,8 +23,27 @@ export default {
       ),
     }
   },
-  created() {},
   methods: {
+    getCanvasRatio() {
+      const w = this.DOMElement.clientWidth
+      const h = this.DOMElement.clientHeight
+      if (w > 0 && h > 0) {
+        return w / h
+      }
+
+      // Fallback use canvas size
+      const canvas = this.DOMElement.querySelector('canvas')
+      if (canvas) {
+        const w = canvas.clientWidth || canvas.width
+        const h = canvas.clientHeight || canvas.height
+        if (w > 0 && h > 0) {
+          return w / h
+        }
+      }
+
+      // Safe default
+      return 1
+    },
     initialiseCameras(isPerspectiveCamera) {
       if (isPerspectiveCamera) {
         this.camera = this.perspectiveCamera
@@ -53,19 +71,23 @@ export default {
       this.render()
     },
     setCameraAspectRatio() {
-      const canvasRatio =
-        this.DOMElement.clientWidth / this.DOMElement.clientHeight
+      const canvasRatio = this.getCanvasRatio()
       if (this.camera.isOrthographicCamera) {
-        const currentAspect = Math.abs(
-          (this.camera.right - this.camera.left) /
-            (this.camera.top - this.camera.bottom)
-        )
-        if (canvasRatio / currentAspect > 1) {
-          this.camera.left *= canvasRatio / currentAspect
-          this.camera.right *= canvasRatio / currentAspect
+        const width = this.camera.right - this.camera.left
+        const height = this.camera.top - this.camera.bottom
+        const currentAspect = width / height
+        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
         } else {
-          this.camera.top *= canvasRatio / currentAspect
-          this.camera.bottom *= canvasRatio / currentAspect
+          // 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
         }
       } else {
         this.camera.aspect = canvasRatio
@@ -298,6 +320,7 @@ export default {
 
       this.camera.position.set(x, y, 100)
       this.camera.lookAt(x, y, 0)
+      this.setCameraAspectRatio()
       this.camera.updateProjectionMatrix()
 
       if (this.orbitControl) {
@@ -318,42 +341,21 @@ 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 =
-        this.roofsBounds.xMin / 1000 -
-        marginAroundBuildingForCameraViewInMeter +
-        cameraOffset.x_m
-      let right =
-        this.roofsBounds.xMax / 1000 +
-        marginAroundBuildingForCameraViewInMeter +
-        cameraOffset.x_m
-      let top =
-        this.roofsBounds.yMax / 1000 +
-        marginAroundBuildingForCameraViewInMeter +
-        cameraOffset.y_m
-      let bottom =
-        this.roofsBounds.yMin / 1000 -
-        marginAroundBuildingForCameraViewInMeter +
-        cameraOffset.y_m
-      let width = right - left
-      let height = top - bottom
-      if (cameraRatio < width / height) {
-        const centerY = (top + bottom) / 2
-        top = centerY + width / cameraRatio / 2
-        bottom = centerY - width / cameraRatio / 2
-      } else {
-        const centerX = (left + right) / 2
-        left = centerX - (height * cameraRatio) / 2
-        right = centerX + (height * cameraRatio) / 2
-      }
+      let left = -halfWidth - marginAroundBuildingForCameraViewInMeter
+      let right = halfWidth + marginAroundBuildingForCameraViewInMeter
+      let top = halfHeight + marginAroundBuildingForCameraViewInMeter
+      let bottom = -halfHeight - marginAroundBuildingForCameraViewInMeter
 
       const zoom = 1
-
-      const x = (left + right) / 2
-      const y = (bottom + top) / 2
+      const x =
+        (this.roofsBounds.xMin + this.roofsBounds.xMax) / 2000 +
+        cameraOffset.x_m
+      const y =
+        (this.roofsBounds.yMin + this.roofsBounds.yMax) / 2000 +
+        cameraOffset.y_m
 
       this.setOrthographicCameraPositionFromCameraParameters({
         left,