@eturnity/eturnity_3d 7.6.0-EPDM-7953.7 → 7.8.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eturnity/eturnity_3d",
   "private": false,
-  "version": "7.6.0-EPDM-7953.7",
+  "version": "7.8.0",
   "main": "dist/main.js",
   "scripts": {
     "dev": "vue-cli-service serve --skip-plugins @vue/cli-plugin-eslint",
@@ -10,40 +10,39 @@
     "prettier": "prettier --write \"**/*.{js,vue}\""
   },
   "dependencies": {
-    "@eturnity/eturnity_maths": "7.4.0-EPDM-9710",
-    "core-js": "2.6.12",
-    "cors": "2.8.5",
-    "earcut": "2.2.4",
-    "express": "4.18.2",
-    "geo-three": "0.1.11",
-    "leaflet": "1.8.0",
-    "leaflet.gridlayer.googlemutant": "0.14.0",
+    "@eturnity/eturnity_maths": "7.4.0",
+    "core-js": "^2.6.12",
+    "cors": "^2.8.5",
+    "earcut": "^2.2.4",
+    "express": "^4.18.2",
+    "geo-three": "^0.1.11",
+    "leaflet": "^1.8.0",
+    "leaflet.gridlayer.googlemutant": "^0.14.0",
     "lodash": "4.17.21",
-    "svd-js": "1.1.1",
-    "three": "0.149.0",
+    "svd-js": "^1.1.1",
+    "three": "^0.149.0",
     "three-projected-material": "2.2.1",
     "tween": "0.9.0",
-    "uuid": "9.0.0",
-    "vue": "3.3.4",
-    "vuex": "4.1.0"
+    "uuid": "^9.0.0",
+    "vue": "^2.7.14",
+    "vue-template-compiler": "^2.7.14",
+    "vuex": "^3.0.1"
   },
   "devDependencies": {
-    "@babel/core": "7.12.16",
-    "@babel/eslint-parser": "7.12.16",
-    "@vue/cli-plugin-babel": "5.0.8",
-    "@vue/cli-plugin-eslint": "5.0.8",
-    "@vue/cli-service": "5.0.8",
-    "@vue/compiler-sfc": "3.3.4",
-    "eslint": "7.32.0",
-    "eslint-plugin-vue": "8.0.3",
-    "@babel/preset-env": "7.20.2",
-    "babel-eslint": "10.1.0",
-    "babel-loader": "8.3.0",
+    "@babel/core": "^7.21.0",
+    "@babel/preset-env": "^7.20.2",
+    "@vue/cli-plugin-babel": "^3.12.1",
+    "@vue/cli-plugin-eslint": "^3.12.1",
+    "@vue/cli-service": "^3.12.1",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.3.0",
+    "eslint": "5.16.0",
     "eslint-config-prettier": "6.15.0",
     "eslint-plugin-prettier": "3.4.1",
-    "html-webpack-plugin": "3.2.0",
-    "webpack": "4.46.0",
-    "webpack-cli": "4.10.0",
+    "eslint-plugin-vue": "5.2.3",
+    "html-webpack-plugin": "^3.2.0",
+    "webpack": "^4.46.0",
+    "webpack-cli": "^4.10.0",
     "prettier": "2.8.4"
   },
   "eslintConfig": {
@@ -74,4 +73,4 @@
     "> 1%",
     "last 2 versions"
   ]
-}
+}

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,39 +17,14 @@ 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,
@@ -61,52 +35,45 @@ export default {
     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',