@eturnity/eturnity_3d 7.6.0 → 7.8.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eturnity/eturnity_3d",
   "private": false,
-  "version": "7.6.0",
+  "version": "7.8.0",
   "main": "dist/main.js",
   "scripts": {
     "dev": "vue-cli-service serve --skip-plugins @vue/cli-plugin-eslint",

package/src/App.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="frame" :style="{ height: '100%' }">
+  <div
+    class="frame"
+    :style="{ height: '100%', width: '100%', display: 'flex' }"
+  >
     <ThreeCanvas />
   </div>
 </template>
@@ -19,10 +22,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.frame {
-  width: 100%;
-  height: 100%;
-}
-</style>

package/src/components/ThreeCanvasViewer.vue

@@ -2,14 +2,13 @@
   <div
     class="canvas3DContainer"
     ref="canvas3DContainer"
-    :style="{ height: '100%' }"
+    :style="{ height: '100%', width: '100%', display: 'flex' }"
     crossorigin
   />
 </template>
 
 <script>
 import { mapActions, mapState, mapGetters, mapMutations } from 'vuex'
-import * as THREE from 'three'
 import {
   addVector,
   multiplyVector,
@@ -18,95 +17,63 @@ import {
 } from '@eturnity/eturnity_maths'
 
 import threeMixin from '../helper/threeMixin'
-import materialMixin from '../helper/materialMixin'
-import renderMixin from '../helper/renderMixin'
+
 export default {
   name: 'ThreeCanvas',
   data() {
     return {
-      scene: new THREE.Scene(),
       layers: null,
       provider: null,
-      cameraProjection: null,
-      texture: null,
-      renderer: new THREE.WebGLRenderer({
-        antialias: true,
-        preserveDrawingBuffer: true
-      }),
-      orbitControl: null,
-      raycaster: new THREE.Raycaster(),
-      loader: new THREE.TextureLoader(),
       pointer: { x: 0, y: 0 },
-      canvasHeight: null,
-      canvasWidth: null,
-      canvasOffset: { x: 0, y: 0 },
-      tweenCamera: null,
-      tweenOrbit: null,
-      three_map: null,
-      isReady: {
-        texturesLoaded: 0,
-        texturesToLoad: 0,
-        threeMap: false,
-        geometry: false,
-        camera: false
-      },
-      screenshotable: false,
       areModuleFieldsVisible: false,
       areUserDeactivatedPanelsVisible: false,
       animationFrameId: null,
-      intervalId: null,
+      intervalId: null
     }
   },
   beforeDestroy() {
     clearInterval(this.intervalId)
     cancelAnimationFrame(this.animationFrameId)
   },
-  mixins: [renderMixin, threeMixin, materialMixin],
+  mixins: [threeMixin],
   async mounted() {
     await this.hydrateData(this.geometryData)
-    this.renderer.domElement.style.width = '100%'
-    this.renderer.domElement.style.height = '100%'
+    let isPerspectiveCamera = true
+    if (this.useCustomCamera && this.cameraPerspectiveSettings) {
+      isPerspectiveCamera = this.cameraPerspectiveSettings.viewType == 'perspective'
+    }
+    this.initialiseThree({
+      isInteractive: this.isInteractive,
+      isPerspectiveCamera,
+      DOMElement: this.$refs.canvas3DContainer
+    })
 
-    this.initialiseThree(this.isInteractive)
-    this.initialiseThreeMap()
     await this.loadPanelsTexture()
-    this.renderGeometry()
+    this.renderRealisticGeometry()
     if (!this.isBuildingVisible) {
-      Object.values(this.meshes.roofMeshes).forEach(
-        (mesh) => (mesh.visible = false)
-      )
-      Object.values(this.meshes.baseMeshes).forEach(
-        (mesh) => (mesh.visible = false)
-      )
-      Object.values(this.meshes.obstacleMeshes).forEach(
-        (mesh) => (mesh.visible = false)
-      )
-      Object.values(this.meshes.edgeMeshes).forEach(
-        (mesh) => (mesh.visible = false)
-      )
-      Object.values(this.meshes.panelsMeshes).forEach(
-        (mesh) => (mesh.visible = false)
-      )
-      this.hideMesh(this.mergedBaseMesh)
-      this.hideMesh(this.mergedRoofMesh)
-      this.hideMesh(this.mergedObstacleMesh)
-      this.hideMesh(this.mergedObstacleSideMesh)
-      this.hidePanels()
+      this.hideBuildings()
     }
-    Object.values(this.meshes.flatRoofMeshes).forEach(
-      (mesh) => (mesh.visible = false)
-    )
-    Object.values(this.meshes.edgeMeshes).forEach(
-      (mesh) => (mesh.visible = false)
-    )
-    this.onWindowResize()
+
     this.$root.$on('on-roofSelected', (polygon) =>
       this.setCameraOrthogonalTo(polygon)
     )
     await this.updateProjectionMaterials()
 
-    const polygon = this.polygons.find((p) => p.id == this.uuid)
-    this.setCamera(polygon, this.view_mode)
+    if (this.useCustomCamera) {
+      if (isPerspectiveCamera) {
+        this.setPerspectiveCameraPositionTo(
+          this.cameraPerspectiveSettings.position,
+          this.cameraPerspectiveSettings.target
+        )
+      } else {
+        this.setOrthographicCameraPositionFromCameraParameters(
+          this.cameraPerspectiveSettings.cameraParameters
+        )
+      }
+    } else {
+      const polygon = this.polygons.find((p) => p.id == this.uuid)
+      this.setCamera(polygon, this.view_mode)
+    }
     this.isReady.geometry = true
     this.render()
     this.intervalId = setInterval(() => this.render(), 500)
@@ -116,6 +83,8 @@ export default {
       geometryData: (state) => state.threeDModule.geometryData,
       uuid: (state) => state.threeDModule.uuid,
       view_mode: (state) => state.threeDModule.view_mode,
+      useCustomCamera: (state) => state.threeDModule.useCustomCamera,
+      cameraPerspectiveSettings: (state) => state.threeDModule.cameraPerspectiveSettings,
       isInteractive: (state) => state.threeDModule.isInteractive,
       isBuildingVisible: (state) => state.threeDModule.isBuildingVisible,
       imageOverlay: (state) => state.threeDModule.imageOverlay
@@ -141,6 +110,38 @@ export default {
     ...mapMutations({
       setSelectedMapLayer: 'mutate_selectedMapLayer'
     }),
+    hideEdges() {
+      Object.values(this.meshes.edgeMeshes).forEach(
+        (mesh) => (mesh.visible = false)
+      )
+    },
+    hideWarningRoofs() {
+      Object.values(this.meshes.flatRoofMeshes).forEach(
+        (mesh) => (mesh.visible = false)
+      )
+    },
+    hideBuildings() {
+      Object.values(this.meshes.roofMeshes).forEach(
+        (mesh) => (mesh.visible = false)
+      )
+      Object.values(this.meshes.baseMeshes).forEach(
+        (mesh) => (mesh.visible = false)
+      )
+      Object.values(this.meshes.obstacleMeshes).forEach(
+        (mesh) => (mesh.visible = false)
+      )
+      Object.values(this.meshes.edgeMeshes).forEach(
+        (mesh) => (mesh.visible = false)
+      )
+      Object.values(this.meshes.panelsMeshes).forEach(
+        (mesh) => (mesh.visible = false)
+      )
+      this.hideMesh(this.mergedBaseMesh)
+      this.hideMesh(this.mergedRoofMesh)
+      this.hideMesh(this.mergedObstacleMesh)
+      this.hideMesh(this.mergedObstacleSideMesh)
+      this.hidePanels()
+    },
     hideMesh(mesh) {
       if (mesh) {
         mesh.visible = false
@@ -284,7 +285,7 @@ export default {
     },
     render() {
       this.renderer.clear()
-      if (['top', 'global'].includes(this.view_mode)) {
+      if (['top', 'global'].includes(this.view_mode) && !this.useCustomCamera) {
         this.renderer.render(this.scene, this.orthographicCamera)
       } else {
         this.renderer.render(this.scene, this.camera)
@@ -316,10 +317,12 @@ export default {
 .canvas3DContainer {
   width: 100%;
   height: 100%;
+  width: 100%;
 }
 
 .canvas3DContainer > canvas {
   width: 100%;
   height: 100%;
+  width: 100%;
 }
 </style>

package/src/config.js

@@ -6,7 +6,7 @@ export const snapToLineTolerance = 10
 export const distanceToCloseNode = 70
 export const mmTolerance = 1
 export const earthRadius = 6371008
-
+export const marginAroundBuildingForCameraViewInMeter = 5
 export const layerColors = {
   construction: {
     fillColor: 'transparent',

package/src/helper/cameraMixin.js

@@ -7,16 +7,65 @@ import {
   multiplyVector,
   substractVector
 } from '@eturnity/eturnity_maths'
-
+import { marginAroundBuildingForCameraViewInMeter } from '../config'
 export default {
   data() {
     return {
       camera: null,
       perspectiveCamera: new THREE.PerspectiveCamera(50, 300 / 300, 1, 50000),
-      orthographicCamera: new THREE.OrthographicCamera(10, 10, 10, 10, 1, 1000)
+      orthographicCamera: new THREE.OrthographicCamera(
+        -50,
+        50,
+        50,
+        -50,
+        1,
+        1000
+      ),
+      animationFrameId: null
     }
   },
   methods: {
+    initialiseCameras(isPerspectiveCamera) {
+      if (isPerspectiveCamera) {
+        this.camera = this.perspectiveCamera
+        this.camera.position.set(0, -100, 50)
+        this.camera.up.set(0, 0, 1)
+      } else {
+        this.camera = this.orthographicCamera
+        this.camera.position.set(0, 0, 100)
+        this.camera.up.set(0, 1, 0)
+      }
+
+      this.cameraProjection = new THREE.PerspectiveCamera(
+        1,
+        300 / 300,
+        100,
+        1000
+      )
+      this.cameraProjection.position.set(0, 0, 500)
+      this.cameraProjection.up.set(0, 0, 1)
+      this.scene.add(this.camera)
+    },
+    setCameraAspectRatio() {
+      const canvasRatio =
+        this.DOMElement.clientWidth / this.DOMElement.clientHeight
+      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
+        } else {
+          this.camera.top *= canvasRatio / currentAspect
+          this.camera.bottom *= canvasRatio / currentAspect
+        }
+      } else {
+        this.camera.aspect = canvasRatio
+      }
+      this.camera.updateProjectionMatrix()
+    },
     turnPerspectiveCameraToOrthogonal() {
       const cameraPosition = new THREE.Vector3(
         this.camera.position.x,
@@ -47,11 +96,6 @@ export default {
         cameraPosition.y,
         cameraPosition.z
       )
-      this.camera.position.set(
-        cameraPosition.x,
-        cameraPosition.y,
-        cameraPosition.z
-      )
       this.camera.updateProjectionMatrix()
       this.renderer.camera = this.camera
       this.composer.renderCamera = this.camera
@@ -60,7 +104,7 @@ export default {
       this.overlayRenderPass.camera = this.camera
       this.outlinePassHighlight.renderCamera = this.camera
       this.outlinePassSelected.renderCamera = this.camera
-      
+
       this.orbitControl.screenSpacePanning = true
       this.orbitControl.object = this.camera
       this.orbitControl.target.set(cameraPosition.x, cameraPosition.y, 0)
@@ -70,9 +114,6 @@ export default {
         RIGHT: THREE.MOUSE.ROTATE
       }
       this.orbitControl.enableRotate = false
-      this.orbitControl.addEventListener('change', () => {
-        this.orbitControlChange()
-      })
       this.orbitControl.update()
       this.camera.position.set(
         cameraPosition.x,
@@ -89,7 +130,6 @@ export default {
     },
     turnOrthogonalCameraToPerspective() {
       this.camera = this.perspectiveCamera
-      console.log(this.orthographicCamera)
       let altitude =
         (this.orthographicCamera.right - this.orthographicCamera.left) /
         ((this.perspectiveCamera.fov * Math.PI) / 180) /
@@ -132,59 +172,178 @@ export default {
       this.composer.render()
     },
     zoomIn3D() {
-      let target = this.orbitControl.target
-      let curentPosition = this.camera.position
-      let newCameraPosition = addVector(
-        target,
-        multiplyVector(1 / 1.5, substractVector(curentPosition, target))
-      )
-      newCameraPosition = [
-        newCameraPosition.x,
-        newCameraPosition.y,
-        newCameraPosition.z
-      ]
-      target = [target.x, target.y, target.z]
-      this.setTweenTo(newCameraPosition, target, 200)
+      if (this.camera.isOrthographicCamera) {
+        this.camera.zoom *= 1.3
+        this.camera.updateProjectionMatrix()
+        this.render()
+      } else {
+        let target = this.orbitControl.target
+        let curentPosition = this.camera.position
+        let newCameraPosition = addVector(
+          target,
+          multiplyVector(1 / 1.5, substractVector(curentPosition, target))
+        )
+        newCameraPosition = [
+          newCameraPosition.x,
+          newCameraPosition.y,
+          newCameraPosition.z
+        ]
+        target = [target.x, target.y, target.z]
+        this.setTweenTo({ position: newCameraPosition, target, duration: 500 })
+      }
     },
     zoomOut3D() {
-      let target = this.orbitControl.target
-      let curentPosition = this.camera.position
-      let newCameraPosition = addVector(
-        target,
-        multiplyVector(1.5, substractVector(curentPosition, target))
+      if (this.camera.isOrthographicCamera) {
+        this.camera.zoom /= 1.3
+        this.camera.updateProjectionMatrix()
+        this.render()
+      } else {
+        let target = this.orbitControl.target
+        let curentPosition = this.camera.position
+        let newCameraPosition = addVector(
+          target,
+          multiplyVector(1.5, substractVector(curentPosition, target))
+        )
+        newCameraPosition = [
+          newCameraPosition.x,
+          newCameraPosition.y,
+          newCameraPosition.z
+        ]
+        target = [target.x, target.y, target.z]
+        this.setTweenTo({ position: newCameraPosition, target, duration: 500 })
+      }
+    },
+    setPerspectiveCameraPositionTo(cameraPosition, targetPosition) {
+      this.camera.position.set(
+        cameraPosition.x,
+        cameraPosition.y,
+        cameraPosition.z
       )
-      newCameraPosition = [
-        newCameraPosition.x,
-        newCameraPosition.y,
-        newCameraPosition.z
-      ]
-      target = [target.x, target.y, target.z]
-      this.setTweenTo(newCameraPosition, target, 200)
+      this.camera.lookAt(targetPosition.x, targetPosition.y, targetPosition.z)
+      this.camera.updateProjectionMatrix()
+      if (this.orbitControl && this.orbitControl.update) {
+        this.orbitControl.target.set(
+          targetPosition.x,
+          targetPosition.y,
+          targetPosition.z
+        )
+        this.orbitControl.update()
+      }
+      this.render()
+    },
+    sanitizeOrthographicCameraParameters({
+      left,
+      right,
+      top,
+      bottom,
+      zoom,
+      x,
+      y
+    }) {
+      if (left > right) {
+        ;[left, right] = [right, left]
+      }
+      if (top < bottom) {
+        ;[top, bottom] = [bottom, top]
+      }
+      return {
+        left,
+        right,
+        top,
+        bottom,
+        zoom,
+        x,
+        y
+      }
+    },
+    setOrthographicCameraPositionFromCameraParameters(cameraParams) {
+      if (!cameraParams || Object.keys(cameraParams).length === 0) {
+        this.setOrthographicCameraGlobalPosition()
+        return
+      }
+      let { x, y, left, right, top, bottom, zoom } =
+        this.sanitizeOrthographicCameraParameters(cameraParams)
+      this.camera.up = new THREE.Vector3(0, 1, 0)
+
+      this.camera.left = left
+      this.camera.right = right
+      this.camera.top = top
+      this.camera.bottom = bottom
+      this.camera.near = 1
+      this.camera.far = 10000
+      this.camera.zoom = zoom
+
+      this.camera.position.set(x, y, 100)
+      this.camera.lookAt(x, y, 0)
+      this.camera.updateProjectionMatrix()
+
+      if (this.orbitControl) {
+        this.orbitControl.maxPolarAngle = Math.PI / 2
+        this.orbitControl.target.set(x, y, 0)
+
+        this.orbitControl.screenSpacePanning = true
+        this.orbitControl.object = this.camera
+        this.orbitControl.mouseButtons = {
+          LEFT: THREE.MOUSE.PAN,
+          MIDDLE: THREE.MOUSE.DOLLY,
+          RIGHT: THREE.MOUSE.ROTATE
+        }
+        this.orbitControl.enableRotate = false
+        this.orbitControl.update()
+      }
+    },
+    setOrthographicCameraGlobalPosition() {
+      const left =
+        this.roofsBounds.xMin / 1000 - marginAroundBuildingForCameraViewInMeter
+      const right =
+        this.roofsBounds.xMax / 1000 + marginAroundBuildingForCameraViewInMeter
+      const top =
+        this.roofsBounds.yMax / 1000 + marginAroundBuildingForCameraViewInMeter
+      const bottom =
+        this.roofsBounds.yMin / 1000 - marginAroundBuildingForCameraViewInMeter
+      const zoom = 1
+      const x = (this.roofsBounds.xMin + this.roofsBounds.xMax) / 2000
+      const y = (this.roofsBounds.yMin + this.roofsBounds.yMax) / 2000
+
+      this.setOrthographicCameraPositionFromCameraParameters({
+        left,
+        right,
+        top,
+        bottom,
+        zoom,
+        x,
+        y
+      })
     },
     setCameraGlobalPosition() {
       if (this.roofs.length == 0) return
-      let newFov = 50
-      let bounds = this.roofsBounds
-      let targetVector = {
-        x: (bounds.xMax + bounds.xMin) / 2000,
-        y: (bounds.yMax + bounds.yMin) / 2000,
-        z: 0
+      if (this.camera.isOrthographicCamera) {
+        this.setOrthographicCameraGlobalPosition()
+      } else {
+        let newFov = 50
+        let bounds = this.roofsBounds
+        let targetVector = {
+          x: (bounds.xMax + bounds.xMin) / 2000,
+          y: (bounds.yMax + bounds.yMin) / 2000,
+          z: 0
+        }
+        let objectRadius_m =
+          marginAroundBuildingForCameraViewInMeter +
+          Math.max(
+            (bounds.xMax - bounds.xMin) / 2000,
+            (bounds.yMax - bounds.yMin) / 2000
+          )
+        let distance = objectRadius_m / Math.sin(((newFov / 2) * Math.PI) / 180)
+        let cameraMoveVector = { x: 0, y: 0, z: distance }
+        const positionVector = addVector(targetVector, cameraMoveVector)
+        const position = [
+          positionVector.x,
+          positionVector.y - distance,
+          positionVector.z
+        ]
+        let target = [targetVector.x, targetVector.y, targetVector.z]
+        this.setTweenTo({ position, target, fov: newFov })
       }
-      let objectRadius_m = Math.max(
-        (bounds.xMax - bounds.xMin) / 2000,
-        (bounds.yMax - bounds.yMin) / 2000
-      )
-      let distance =
-        5 + objectRadius_m / Math.sin(((newFov / 2) * Math.PI) / 180)
-      let cameraMoveVector = { x: 0, y: 0, z: distance }
-      const positionVector = addVector(targetVector, cameraMoveVector)
-      const position = [
-        positionVector.x,
-        positionVector.y - distance,
-        positionVector.z
-      ]
-      let target = [targetVector.x, targetVector.y, targetVector.z]
-      this.setTweenTo(position, target, newFov)
     },
     setCameraGlobalVerticalPosition() {
       let position, target
@@ -211,12 +370,12 @@ export default {
         position = [0, 0, 300]
         target = [0, 0, 0]
       }
-      this.setTweenTo(
+      this.setTweenTo({
         position,
         target,
-        newFov,
-        this.turnPerspectiveCameraToOrthogonal
-      )
+        fov: newFov,
+        callback: this.turnPerspectiveCameraToOrthogonal
+      })
     },
     setCameraOrthogonalTo(polygon) {
       if (polygon) {
@@ -236,7 +395,7 @@ export default {
           positionVector.y / 1000 - 1,
           positionVector.z / 1000
         ]
-        this.setTweenTo(position, target)
+        this.setTweenTo({ position, target })
       }
     },
     setCameraSideTo(polygon) {
@@ -262,10 +421,17 @@ export default {
           positionVector.y / 1000,
           positionVector.z / 1000 + 5
         ]
-        this.setTweenTo(position, target)
+        this.setTweenTo({ position, target })
       }
     },
-    setTweenTo(position, target, fov = 50, onCompleteCallback = () => {}) {
+    setTweenTo(payload) {
+      const {
+        position,
+        target,
+        fov = 50,
+        duration = 2000,
+        callback = () => {}
+      } = payload
       TWEEN.removeAll()
       if (this.camera) {
         const currentTweenVar = {
@@ -298,7 +464,7 @@ export default {
             initialCameraPosition.x - finalCameraPosition.x
           )
           this.tweenCamera = new TWEEN.Tween(currentTweenVar)
-            .to({ t: 1 }, 2000)
+            .to({ t: 1 }, duration)
             .easing(TWEEN.Easing.Sinusoidal.Out)
             .onUpdate(() => {
               const t = currentTweenVar.t
@@ -341,13 +507,12 @@ export default {
                 this.orbitControl.update()
             })
             .onComplete(() => {
-              onCompleteCallback()
+              callback()
             })
         } else {
-          console.log('setTween Camera not Vertical')
           this.camera.up = { x: 0, y: 0, z: 1 }
           this.tweenCamera = new TWEEN.Tween(currentTweenVar)
-            .to({ t: 1 }, 2000)
+            .to({ t: 1 }, duration)
             .easing(TWEEN.Easing.Sinusoidal.Out)
             .onUpdate(() => {
               const t = currentTweenVar.t
@@ -383,12 +548,24 @@ export default {
               if (this.orbitControl && this.orbitControl.update)
                 this.orbitControl.update()
             })
+            .onComplete(() => {
+              callback()
+            })
         }
         this.tweenCamera.start()
+        TWEEN.update()
+      }
+    },
+    animate(e) {
+      if (!!TWEEN) {
+        TWEEN.update()
       }
+      this.animationFrameId = requestAnimationFrame(this.animate)
     }
   },
+
   beforeDestroy() {
     TWEEN.removeAll()
+    cancelAnimationFrame(this.animationFrameId)
   }
 }

package/src/helper/materialMixin.js

@@ -56,7 +56,7 @@ export default {
       size: 25,
       sizeAttenuation: false,
       transparent: true,
-      color: "0xffffff",
+      color: 0xffffff,
       opacity: 1,
     })