@eturnity/eturnity_3d 8.22.0 → 8.31.1

package/package.json

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

package/src/components/ThreeCanvasViewer.vue

@@ -32,14 +32,56 @@
         intervalEventId: null,
       }
     },
-    beforeUnmount() {
-      clearInterval(this.intervalId)
-      clearInterval(this.intervalEventId)
-      cancelAnimationFrame(this.animationFrameId)
-      OverlayLayer.removeEventListener(
-        'overlay-is-ready',
-        this.updateOverlayRendering
-      )
+    computed: {
+      ...mapState({
+        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,
+      }),
+      ...mapGetters({
+        polygons: 'getPolygons',
+        edges: 'getEdges3D',
+        nodes: 'getNodes3D',
+        mapConfig: 'getMapConfig',
+        roofsBounds: 'getRoofsBounds',
+        layoutSettings: 'getLayoutSettings',
+        roofs: 'getRoofs',
+        obstacles: 'getObstacles',
+        moduleFields: 'getModuleFields',
+        panels: 'getPanels',
+        userDeactivatedPanels: 'getUserDeactivatedPanels',
+      }),
+    },
+    watch: {
+      isReady: {
+        handler() {
+          if (this.screenshotable) {
+            return
+          }
+          const overlayReady =
+            OverlayLayer.getItems().length == 0 || this.isReady.overlay
+          if (
+            this.isReady.texturesToLoad == this.isReady.texturesLoaded &&
+            this.isReady.geometry &&
+            overlayReady
+          ) {
+            var event = new CustomEvent('screenshotable')
+            document.dispatchEvent(event)
+            this.intervalEventId = setInterval(() => {
+              document.dispatchEvent(event)
+            }, 500)
+            // dispatch the custom event
+            this.screenshotable = true
+          }
+        },
+        deep: true,
+      },
     },
     async mounted() {
       await this.hydrateData(this.geometryData)
@@ -76,7 +118,10 @@
         const polygon = this.polygons.find((p) => p.id == this.uuid)
         this.setCamera(polygon, this.view_mode)
       }
-      this.isReady.geometry = true
+      this.isReady = {
+        ...this.isReady,
+        geometry: true,
+      }
       this.intervalId = setInterval(() => this.render(), 500)
       OverlayLayer.addEventListener(
         'overlay-is-ready',
@@ -84,31 +129,14 @@
       )
       this.render()
     },
-    computed: {
-      ...mapState({
-        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,
-      }),
-      ...mapGetters({
-        polygons: 'getPolygons',
-        edges: 'getEdges3D',
-        nodes: 'getNodes3D',
-        mapConfig: 'getMapConfig',
-        roofsBounds: 'getRoofsBounds',
-        layoutSettings: 'getLayoutSettings',
-        roofs: 'getRoofs',
-        obstacles: 'getObstacles',
-        moduleFields: 'getModuleFields',
-        panels: 'getPanels',
-        userDeactivatedPanels: 'getUserDeactivatedPanels',
-      }),
+    beforeUnmount() {
+      clearInterval(this.intervalId)
+      clearInterval(this.intervalEventId)
+      cancelAnimationFrame(this.animationFrameId)
+      OverlayLayer.removeEventListener(
+        'overlay-is-ready',
+        this.updateOverlayRendering
+      )
     },
     methods: {
       ...mapActions({
@@ -162,8 +190,10 @@
           const target = [0, 0, 0]
           this.orthographicCamera.position.set(...position)
           this.orthographicCamera.lookAt(...target)
-          this.isReady.camera = true
-
+          this.isReady = {
+            ...this.isReady,
+            camera: true,
+          }
           let { xMin, xMax, yMin, yMax } = this.orthographicBounds(
             roofsBounds,
             margin
@@ -263,7 +293,10 @@
           this.camera.lookAt(...target)
           this.camera.updateProjectionMatrix()
 
-          this.isReady.camera = true
+          this.isReady = {
+            ...this.isReady,
+            camera: true,
+          }
         }
       },
       orthographicBounds(bounds, margin) {
@@ -309,31 +342,6 @@
         }
       },
     },
-    watch: {
-      isReady: {
-        handler() {
-          if (this.screenshotable) {
-            return
-          }
-          const overlayReady =
-            OverlayLayer.getItems().length == 0 || this.isReady.overlay
-          if (
-            this.isReady.texturesToLoad == this.isReady.texturesLoaded &&
-            this.isReady.geometry &&
-            overlayReady
-          ) {
-            var event = new CustomEvent('screenshotable')
-            document.dispatchEvent(event)
-            this.intervalEventId = setInterval(() => {
-              document.dispatchEvent(event)
-            }, 500)
-            // dispatch the custom event
-            this.screenshotable = true
-          }
-        },
-        deep: true,
-      },
-    },
   }
 </script>
 

package/src/helper/cameraMixin.js

@@ -13,24 +13,18 @@ export default {
   data() {
     return {
       animationFrameId: null,
+      perspectiveCamera: new THREE.PerspectiveCamera(80, 300 / 300, 1, 50000),
+      orthographicCamera: new THREE.OrthographicCamera(
+        -50,
+        50,
+        50,
+        -50,
+        1,
+        1000
+      ),
     }
   },
-  created() {
-    this.perspectiveCamera = new THREE.PerspectiveCamera(
-      80,
-      300 / 300,
-      1,
-      50000
-    )
-    this.orthographicCamera = new THREE.OrthographicCamera(
-      -50,
-      50,
-      50,
-      -50,
-      1,
-      1000
-    )
-  },
+  created() {},
   methods: {
     initialiseCameras(isPerspectiveCamera) {
       if (isPerspectiveCamera) {
@@ -53,6 +47,11 @@ export default {
       this.cameraProjection.up.set(0, 0, 1)
       this.scene.add(this.camera)
     },
+    setCameraZoomOffset(zoomOffset) {
+      this.camera.zoom = zoomOffset
+      this.camera.updateProjectionMatrix()
+      this.render()
+    },
     setCameraAspectRatio() {
       const canvasRatio =
         this.DOMElement.clientWidth / this.DOMElement.clientHeight
@@ -74,9 +73,12 @@ export default {
       this.camera.updateProjectionMatrix()
     },
     turnPerspectiveCameraToOrthogonal() {
+      if (this.orthographicCamera.id == this.camera.id) {
+        return
+      }
       const cameraPosition = new THREE.Vector3(
-        this.camera.position.x,
-        this.camera.position.y,
+        this.orbitControl.target.x,
+        this.orbitControl.target.y,
         this.camera.position.z
       )
       var halfHeightDistance =
@@ -105,12 +107,13 @@ export default {
       )
       this.camera.updateProjectionMatrix()
       this.renderer.camera = this.camera
-      this.composer.renderCamera = this.camera
-
-      this.renderPass.camera = this.camera
-      this.overlayRenderPass.camera = this.camera
-      this.outlinePassHighlight.renderCamera = this.camera
-      this.outlinePassSelected.renderCamera = this.camera
+      if (this.composer) {
+        this.composer.renderCamera = this.camera
+        this.renderPass.camera = this.camera
+        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)
@@ -132,9 +135,14 @@ export default {
       this.camera.updateProjectionMatrix()
       this.nodesVisible = true
       this.renderNodes()
-      this.composer.render()
+      if (this.composer) {
+        this.composer.render()
+      }
     },
     turnOrthogonalCameraToPerspective() {
+      if (this.perspectiveCamera.id == this.camera.id) {
+        return
+      }
       this.camera = this.perspectiveCamera
       let altitude =
         (this.orthographicCamera.right - this.orthographicCamera.left) /
@@ -151,14 +159,16 @@ export default {
       this.camera.updateProjectionMatrix()
 
       this.renderer.camera = this.camera
-      this.composer.renderer.camera = this.camera
-      this.composer.renderCamera = this.camera
-      this.renderPass.camera = this.camera
-      this.overlayRenderPass.camera = this.camera
-      this.outlinePassHighlight.camera = this.camera
-      this.outlinePassHighlight.renderCamera = this.camera
-      this.outlinePassSelected.camera = this.camera
-      this.outlinePassSelected.renderCamera = this.camera
+      if (this.composer) {
+        this.composer.renderer.camera = this.camera
+        this.composer.renderCamera = this.camera
+        this.renderPass.camera = this.camera
+        this.overlayRenderPass.camera = this.camera
+        this.outlinePassHighlight.camera = this.camera
+        this.outlinePassHighlight.renderCamera = this.camera
+        this.outlinePassSelected.camera = this.camera
+        this.outlinePassSelected.renderCamera = this.camera
+      }
       this.orbitControl.camera = this.camera
       this.orbitControl.object = this.camera
       this.orbitControl.target.set(
@@ -166,6 +176,11 @@ export default {
         this.camera.position.y,
         0
       )
+      this.camera.position.set(
+        this.orthographicCamera.position.x,
+        this.orthographicCamera.position.y - 20,
+        altitude
+      )
       this.orbitControl.screenSpacePanning = false
       this.orbitControl.enableRotate = true
       this.orbitControl.mouseButtons = {
@@ -175,7 +190,9 @@ export default {
       }
       this.orbitControl.update()
 
-      this.composer.render()
+      if (this.composer) {
+        this.composer.render()
+      }
     },
     zoomIn3D() {
       if (this.camera.isOrthographicCamera) {

package/src/helper/render/base.js

@@ -55,5 +55,11 @@ export default {
       this.mergedBaseMesh.receiveShadow = true
       this.mergedBaseMesh.castShadow = true
     },
+    hideBases() {
+      this.mergedBaseMesh.visible = false
+    },
+    showBases() {
+      this.mergedBaseMesh.visible = true
+    },
   },
 }

package/src/helper/render/building.js

@@ -0,0 +1,23 @@
+import * as THREE from 'three'
+
+export default {
+  created() {},
+  methods: {
+    showBuildings() {
+      this.showRoofs()
+      this.showBases()
+      this.showObstacles()
+      this.showModuleFields()
+      this.showEdges()
+      this.render()
+    },
+    hideBuildings() {
+      this.hideRoofs()
+      this.hideBases()
+      this.hideObstacles()
+      this.hideModuleFields()
+      this.hideEdges()
+      this.render()
+    },
+  },
+}

package/src/helper/render/edge.js

@@ -36,6 +36,7 @@ export default {
       return cylinder
     },
     renderEdges() {
+      if (this.selectedTool == 'screenshot') return
       this.clearEdgesRemovedOnes('edgeMeshes')
       if (this.renderLineEdges) {
         this.renderLineEdges()
@@ -96,5 +97,15 @@ export default {
         }
       })
     },
+    hideEdges() {
+      Object.values(this.meshes.edgeMeshes).forEach((mesh) => {
+        mesh.visible = false
+      })
+    },
+    showEdges() {
+      Object.values(this.meshes.edgeMeshes).forEach((mesh) => {
+        mesh.visible = true
+      })
+    },
   },
 }

package/src/helper/render/imageOverlay.js

@@ -54,6 +54,16 @@ export default {
       this.meshes.backgroundMesh.visible = true
       return
     },
+    hideImageOverlays() {
+      OverlayLayer.dispatchActionToAllItems('setOpacity', 0)
+      this.updateProjectionMaterials()
+      this.renderImageOverlayOnBackground()
+    },
+    showImageOverlays() {
+      OverlayLayer.dispatchActionToAllItems('setOpacity', 1)
+      this.updateProjectionMaterials()
+      this.renderImageOverlayOnBackground()
+    },
     async getOverlaysMaterials() {
       let overlayMaterialsPromises = []
       OverlayLayer.getReadyItems()

package/src/helper/render/index.js

@@ -15,7 +15,9 @@ import projectionMaterial from './projectionMaterial'
 import tile from './tile'
 import tileProjection from './tileProjection'
 import mergedGeometry from './mergedGeometry'
-
+import building from './building'
+import marker from './marker'
+import scene from './scene'
 export default {
   mixins: [
     margin,
@@ -35,5 +37,8 @@ export default {
     tile,
     tileProjection,
     mergedGeometry,
+    building,
+    marker,
+    scene,
   ],
 }

package/src/helper/render/loader.js

@@ -2,14 +2,51 @@ import * as THREE from 'three'
 
 export default {
   methods: {
-    loadNewPanelTextures() {
-      Object.values(this.pvDataMemo).forEach((component) => {
-        const pvId = component.id
+    loadTextureAsync(url) {
+      return new Promise((resolve) => {
+        this.loader.load(url, (texture) => {
+          resolve(texture)
+        })
+      })
+    },
+    async loadNewPanelTextures() {
+      let newTexturesLoaded = false
+      const loadTexturesPromises = Object.values(this.pvDataMemo).map(
+        async (component) => {
+          const pvId = component.id
+          if (!this.material.panel[pvId]) {
+            if (!component.texture_img_url) {
+              this.material.panel[pvId] = this.material.panel.default
+            } else {
+              newTexturesLoaded = true
+              // No need for await, texture automatically rendered on load
+              const texture = this.loader.load(component.texture_img_url)
+              this.material.panel[pvId] = new THREE.MeshPhongMaterial({
+                map: texture,
+                side: THREE.FrontSide,
+                transparent: false,
+                shadowSide: THREE.DoubleSide,
+                flatShading: true,
+              })
+              texture.encoding = THREE.sRGBEncoding
+              texture.colorSpace = THREE.SRGBColorSpace
+            }
+          }
+        }
+      )
+
+      await Promise.all(loadTexturesPromises)
+      return newTexturesLoaded
+    },
+    async loadPanelsTexture() {
+      const promiseArray = this.moduleFields.map(async (mf) => {
+        const pvId = mf.data.component_id_pv_module
         if (!this.material.panel[pvId]) {
-          if (!component.texture_img_url) {
-            this.material.panel[pvId] = this.material.panel.default
+          if (!mf.data.texture_img_url) {
+            this.material.panel[pvId] =
+              this.material.panel[`default_${this.moduleTextureVersionId}`]
           } else {
-            const texture = this.loader.load(component.texture_img_url)
+            const texture = await this.loadTextureAsync(mf.data.texture_img_url)
             texture.encoding = THREE.sRGBEncoding
             texture.colorSpace = THREE.SRGBColorSpace
             this.material.panel[pvId] = new THREE.MeshPhongMaterial({
@@ -22,33 +59,7 @@ export default {
           }
         }
       })
-    },
-    async loadPanelsTexture() {
-      for (let k = 0; k < this.moduleFields.length; k++) {
-        let mf = this.moduleFields[k]
-        const pvId = mf.data.component_id_pv_module
-        if (!this.material.panel[pvId]) {
-          if (!mf.data.texture_img_url) {
-            this.material.panel[pvId] =
-              this.material.panel[`default_${this.moduleTextureVersionId}`]
-          } else {
-            await new Promise((resolve) => {
-              this.loader.load(mf.data.texture_img_url, (texture) => {
-                texture.encoding = THREE.sRGBEncoding
-                texture.colorSpace = THREE.SRGBColorSpace
-                this.material.panel[pvId] = new THREE.MeshPhongMaterial({
-                  map: texture,
-                  side: THREE.FrontSide,
-                  transparent: false,
-                  shadowSide: THREE.DoubleSide,
-                  flatShading: true,
-                })
-                resolve(texture)
-              })
-            })
-          }
-        }
-      }
+      await Promise.all(promiseArray)
     },
   },
 }

package/src/helper/render/marker.js

@@ -0,0 +1,71 @@
+import * as THREE from 'three'
+
+export default {
+  created() {},
+  methods: {
+    renderMarker() {
+      if (this.selectedTool != 'screenshot') {
+        return
+      }
+      if (this.meshes.markerMesh) {
+        return
+      }
+      //const lod = new THREE.LOD()
+      const sphereGeometry = new THREE.SphereGeometry(1, 32, 32) // Initial radius of 5
+      const coneGeometry = new THREE.ConeGeometry(0.98, 2, 32)
+
+      const opacity = 1
+      const material = new THREE.MeshPhongMaterial({
+        color: 0xff0000, // red color
+        transparent: true,
+        opacity,
+      })
+      let roofCenter = {
+        x: 0,
+        y: 0,
+        z: 0,
+      }
+      if (this.roofs.length > 0) {
+        roofCenter = {
+          x: (this.roofsBounds.xMin + this.roofsBounds.xMax) / 2000,
+          y: (this.roofsBounds.yMin + this.roofsBounds.yMax) / 2000,
+          z: this.roofsBounds.zMax / 2000,
+        }
+      }
+      const sphereMesh = new THREE.Mesh(sphereGeometry, material)
+      const coneMesh = new THREE.Mesh(coneGeometry, material)
+      coneMesh.rotateX(-Math.PI / 2)
+      coneMesh.position.set(0, 0, -1.2)
+      const markerMesh = new THREE.Group()
+      markerMesh.add(coneMesh)
+
+      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
+    },
+    showMarker() {
+      if (this.meshes.markerMesh) {
+        this.meshes.markerMesh.visible = true
+      }
+    },
+    hideMarker() {
+      if (this.meshes.markerMesh) {
+        this.meshes.markerMesh.visible = false
+      }
+    },
+  },
+}

package/src/helper/render/mergedGeometry.js

@@ -95,7 +95,7 @@ export default {
       return mergedGeometry
     },
 
-    updateOrCreateMergedMesh(mesh, geometries, material, type = undefined) {
+    updateOrCreateMergedMesh(mesh, geometries, material) {
       if (!mesh) {
         let mergedGeometry = this.createMergedGeometry(geometries)
         mesh = new THREE.Mesh(mergedGeometry, material)
@@ -107,6 +107,7 @@ export default {
           mesh.geometry
         )
         mesh.geometry = mergedGeometry
+        if (material) mesh.material = material
       }
       mesh.frustumCulled = false
       return mesh

package/src/helper/render/moduleField.js

@@ -102,5 +102,11 @@ export default {
             this.areModuleFieldsVisible && this.panelOpacity === 1)
       )
     },
+    hideModuleFields() {
+      this.updateModuleFieldsVisibility(false)
+    },
+    showModuleFields() {
+      this.updateModuleFieldsVisibility(true)
+    },
   },
 }

package/src/helper/render/obstacle.js

@@ -73,21 +73,30 @@ export default {
       // Create the mesh using the merged geometry and shared material
       this.mergedObstacleMesh = this.updateOrCreateMergedMesh(
         this.mergedObstacleMesh,
-        obstacleGeometries,
-        this.material.selectedRoof
+        obstacleGeometries
       )
+      this.applyTextureOnObstacles(this.material.roof)
+
       this.mergedObstacleSideMesh = this.updateOrCreateMergedMesh(
         this.mergedObstacleSideMesh,
         obstacleSideGeometries,
         this.material.wall
       )
       this.mergedObstacleSideMesh.renderOrder = 10
-      //shadow
+
+      // shadow
       this.mergedObstacleSideMesh.receiveShadow = true
       this.mergedObstacleSideMesh.castShadow = true
       this.mergedObstacleMesh.receiveShadow = true
       this.mergedObstacleMesh.castShadow = true
-      this.applyTextureOnObstacles(this.material.roof)
+    },
+    hideObstacles() {
+      this.mergedObstacleSideMesh.visible = false
+      this.mergedObstacleMesh.visible = false
+    },
+    showObstacles() {
+      this.mergedObstacleSideMesh.visible = true
+      this.mergedObstacleMesh.visible = true
     },
   },
 }

package/src/helper/render/overlay.js

@@ -83,12 +83,29 @@ export default {
       })
     },
     updateOverlayRendering() {
+      this.renderOverlays()
+      this.updateProjectionMaterials()
+      this.render()
       if (this.isReady) {
-        this.isReady.overlay = true
+        this.isReady = {
+          ...this.isReady,
+          overlay: true,
+        }
       }
+    },
+    hideOverlays() {
+      OverlayLayer.getItems().forEach((overlay) => {
+        overlay.setOpacity = 0
+      })
+      this.updateProjectionMaterials()
       this.renderOverlays()
+    },
+    showOverlays() {
+      OverlayLayer.getItems().forEach((overlay) => {
+        overlay.setOpacity = 1
+      })
       this.updateProjectionMaterials()
-      this.render()
+      this.renderOverlays()
     },
   },
 }