@eturnity/eturnity_3d 6.30.0 → 6.31.1

package/src/helper/render/projectionMaterial.js

@@ -0,0 +1,57 @@
+export default {
+    methods:{
+      reorderRoofMaterials(){
+        this.material.roof.sort((a,b)=>{
+            let aPrio=a.priority || 0
+            let bPrio=b.priority || 0
+            return aPrio-bPrio
+        })
+      },
+      async updateProjectionMaterials(){
+        this.setImageOverlayCameraPosition()
+        let materialPromises=[
+          this.getMapProjectionMaterial(),
+          this.getImageOverlayMaterial()
+        ]
+        let materials = await Promise.all(materialPromises)
+        this.mapProjectionMaterial = materials[0] 
+        this.imageOverlayMaterial= materials[1]
+
+        let index=this.material.roof.findIndex(material=>material.userData.type=="mapProjectionMaterial")
+        if(this.mapProjectionMaterial){
+          if(index>=0){
+            this.material.roof[index]=this.mapProjectionMaterial
+            this.material.roof=[...this.material.roof]
+          }else{
+            this.material.roof=[...this.material.roof,this.mapProjectionMaterial]
+            this.reorderRoofMaterials()
+          }
+        }else if(index>=0){
+            this.material.roof[index].dispose()
+            this.material.roof.splice(index,1)
+            this.material.roof=[...this.material.roof]
+            this.reorderRoofMaterials()
+        }
+
+        index=this.material.roof.findIndex(material=> material.userData.type=="imageOverlayMaterial")
+        if(this.imageOverlayMaterial){
+          if(index>=0){
+            this.material.roof[index]=this.imageOverlayMaterial
+            this.material.roof=[...this.material.roof]
+          }else{
+            this.material.roof=[...this.material.roof,this.imageOverlayMaterial]
+            this.reorderRoofMaterials()
+          }
+        }else if(index>=0){
+          this.material.roof[index].dispose()
+          this.material.roof.splice(index,1)
+          this.material.roof=[...this.material.roof]
+          this.reorderRoofMaterials()
+        }
+        this.renderImageOverlayOnBackground()
+        this.applyTextureOnRoofs()
+      },
+     
+      
+    }
+}

package/src/helper/render/roof.js

@@ -68,6 +68,19 @@ export default {
 
             return geometry
         },
+        
+        applyTextureOnRoofs(){
+            this.roofs.forEach(roof=>{
+              //roofs
+            let mesh=this.meshes.roofMeshes[roof.id]
+            this.applyTextureOnMesh(this.material.roof,mesh)
+              //obstacle on roof
+              roof.holes.filter(p=>p.layer=="obstacle").forEach(obstacle=>{
+                let meshObstacle=this.meshes.obstacleMeshes[obstacle.id + '-' + roof.id + '_top']
+                this.applyTextureOnMesh(this.material.roof,meshObstacle)
+              })
+            })
+        },
         renderRoofs() {
         this.clearRemovedOnes('roofMeshes')
         this.roofs.forEach((roofPolygon) => {
@@ -82,17 +95,18 @@ export default {
             mesh = this.meshes.roofMeshes[roofPolygon.id]
             geometry = mesh.geometry
             geometry = this.updateRoofGeometry(geometry, roofPolygon)
+            //in order to be able to render multiple material on it (background and image overlay)
+            
             mesh.geometry = geometry
-            if(this.material.roof){
-                mesh.material=this.material.roof
-                if(this.material.roof && this.material.roof.project) this.material.roof.project(mesh)
-            }
+            this.applyTextureOnMesh(this.material.roof,mesh)
+            
             mesh.frustumCulled = false
             mesh.updateMatrix()
             }
             if (!this.meshes.roofMeshes[roofPolygon.id]) {
             //create
             geometry = this.createRoofGeometry(roofPolygon)
+                       
             if (geometry) {
                 mesh = new THREE.Mesh(geometry, this.material.roof)
                 mesh.userData.version = roofPolygon.version
@@ -101,10 +115,7 @@ export default {
                 mesh.userData.polygonId = roofPolygon.id
                 mesh.matrixAutoUpdate = false
                 this.scene.add(mesh)
-                if(this.material.roof){
-                mesh.material=this.material.roof
-                if(this.material.roof.project) this.material.roof.project(mesh)
-                }
+                this.applyTextureOnMesh(this.material.roof,mesh)
                 mesh.frustumCulled = false
                 this.meshes.roofMeshes[roofPolygon.id] = mesh
             }

package/src/helper/render/texture.js

@@ -0,0 +1,19 @@
+export default {
+    methods:{
+        applyTextureOnMesh(materials,mesh){
+            if(materials && materials.length>0){
+                let geometry=mesh.geometry
+                geometry.clearGroups();
+                for(let k=0;k<materials.length;k++){
+                    geometry.addGroup( 0, Infinity, k )
+                }
+                mesh.material=materials
+                for(let m=0;m<materials.length;m++){
+                    if(materials[m].project) {
+                        materials[m].project(mesh)
+                    }
+                }
+            }
+        },
+    }
+}

package/src/helper/renderMixin.js

@@ -36,10 +36,6 @@ export default {
       roofMarginMeshes: {},
       moduleFieldsMeshes: {}
     }
-    if (this.wallColor) {
-      let wallColor = new THREE.Color(this.wallColor)
-      this.material.wall.color.set(wallColor)
-    }
   },
 
   computed: {
@@ -48,7 +44,9 @@ export default {
         state.threeDModule.moduleTextureVersionId,
       wallColor: (state) => state.threeDModule.wallColor,
       selectedMapLayer: (state) => state.threeDModule.selectedMapLayer,
+      panelOpacity: (state) => state.threeDModule.panelOpacity,
       pvDataMemo: (state) => state.threeDModule.pvDataMemo
+
     }),
     ...mapGetters({
       selectedTool: 'getSelectedTool',
@@ -148,6 +146,7 @@ export default {
         case 'newModuleField':
         case 'reactivatePanel':
         case 'deactivatePanels': //params.panels
+        case 'changePanelOpacity':
           methodList.push({
             name: 'renderPanels',
             method: this.renderPanels,
@@ -203,9 +202,41 @@ export default {
             method: this.initialiseThreeMap,
             arg: []
           })
+          break
+        case 'changeMapProjection':
+          methodList.push({
+            name: 'changeMapProjection',
+            method: this.changeMapProjection,
+            arg: []
+          })
+          methodList.push({
+            name: 'applyTextureOnRoofs',
+            method: this.applyTextureOnRoofs,
+            arg: []
+          })
+          break
+          // methodList.push({
+          //   name: 'removeImageOverlay',
+          //   method: this.removeImageOverlay,
+          //   arg: []
+          // })
+          // methodList.push({
+          //   name: 'applyTextureOnBackground',
+          //   method: this.renderImageOverlayOnBackground,
+          //   arg: []
+          // })
+          // methodList.push({
+          //   name: 'applyTextureOnRoofs',
+          //   method: this.applyTextureOnRoofs,
+          //   arg: []
+          // })
+          // break
+        case 'removeImageOverlay':
+        case 'changeImageOverlay':
+        case 'updateImageOverlay':
           methodList.push({
-            name: 'updateProjectionMaterial',
-            method: this.updateProjectionMaterial,
+            name: 'updateProjectionMaterials()',
+            method: this.updateProjectionMaterials,
             arg: []
           })
           break
@@ -225,11 +256,11 @@ export default {
       }
     },
     renderGeometry() {
-      this.renderBackground()
       this.renderBuilding()
       this.renderModuleFields()
       this.renderPanels()
       this.renderRoofsMargin()
+      this.updateProjectionMaterials()
     },
     renderBuilding() {
       this.renderBase()
@@ -239,32 +270,10 @@ export default {
       this.renderEdges()
       this.renderFlatRoofs()
     },
-
-    applyTextureOnRoofs() {
-      this.roofs.forEach((roof) => {
-        //roofs
-        let mesh = this.meshes.roofMeshes[roof.id]
-        mesh.material = this.material.roof
-        if (this.material.roof && this.material.roof.project) {
-          this.material.roof.project(mesh)
-        }
-        //obstacle on roof
-        roof.holes
-          .filter((p) => p.layer == 'obstacle')
-          .forEach((obstacle) => {
-            let meshObstacle =
-              this.meshes.obstacleMeshes[obstacle.id + '-' + roof.id + '_top']
-            meshObstacle.material = this.material.roof
-            if (this.material.roof && this.material.roof.project)
-              this.material.roof.project(meshObstacle)
-          })
-      })
-    },
-
-    async updateProjectionMaterial() {
-      await this.loadProjectionMaterial()
+   
+    async initializeProjectionMaterial(){
+      await this.updateProjectionMaterials()
       this.applyTextureOnRoofs()
-      this.renderBackground()
     },
 
     getCanvasOffset() {
@@ -317,13 +326,9 @@ export default {
     }
   },
   watch: {
-    wallColor(color) {
-      let wallColor = new THREE.Color(color)
-      this.material.wall.color.set(wallColor)
-    },
     pvDataMemo: {
       handler(val) {
-        this.loadNewTexture()
+        this.loadNewPanelTextures()
       }
     },
     'material.panel': {
@@ -357,7 +362,10 @@ export default {
     this.scene = null
     this.camera = null
     this.cameraprojection = null
-    this.material.forEach((m) => m.dispose())
+    Object.values(this.material).forEach((m) =>{
+      if(m && m.dispose)
+        m.dispose()
+    } )
     this.material = null
     this.orbitControl = null
     this.raycaster = null

package/src/store/hydrateData.js

@@ -15,6 +15,7 @@ export async function hydrateData({ state, commit }, data) {
   let obstaclesResponse = data.obstacles
   let moduleFieldsResponse = data.moduleFields
   const layoutSettingResponse = data.layoutSettings
+  const imageOverlayResponse = data.imageOverlay
   //removing empty roof,obstacle and modulefield generated by BE on variant creation
   roofsResponse=roofsResponse.reduce((acc,cur)=>{
     if(cur.roof_outline.length>0){acc.push(cur)}
@@ -29,9 +30,17 @@ export async function hydrateData({ state, commit }, data) {
     return acc
   },[])
 
+  if (imageOverlayResponse && imageOverlayResponse.image_overlay_url) {
+    let imageOverlay = {
+      url: imageOverlayResponse.image_overlay_url,
+      uuid: imageOverlayResponse.image_overlay_uuid,
+      corners: imageOverlayResponse.image_overlay_settings.corners
+    }
+    commit('mutate_imageOverlay', imageOverlay)
+  }
+  
   if (!!layoutSettingResponse) {
     const layoutSetting = layoutSettingResponse
-    console.log(layoutSetting)
     const moduleTextureVersionId=layoutSetting.module_texture_version_id || 0
     commit('mutate_layoutSettings', layoutSetting)
     commit('mutate_moduleTextureVersionId',moduleTextureVersionId)

package/src/store/three-d-module.js

@@ -19,6 +19,7 @@ const init_state = {
   cancelTokenGlobal: '',
   globalProjectProperties: [],
   buildingLocation: null,
+  imageOverlay:null,
   layoutSettings: {
     base64_image_url: null,
     layout_latitude: null,
@@ -32,8 +33,10 @@ const init_state = {
   mountingDataMemo:[],
   moduleTextureVersionId:0,
   wallColor:'#454545',
+  panelOpacity:1,
   selectedMapLayer:null,
   globalProjectProperties: [],
+  imageOverlay:null
 }
 
 const state = init_state
@@ -86,7 +89,9 @@ const getters = {
   getBuildingLocation(state) {
     return state.buildingLocation
   },
-
+  getImageOverlay(state){
+    return state.imageOverlay
+  },
   getLayoutSettings(state) {
     return state.layoutSettings
   },
@@ -115,6 +120,9 @@ const mutations = {
   mutate_layoutSettings(state, value) {
     state.layoutSettings = value
   },
+  mutate_imageOverlay(state, value) {
+    state.imageOverlay = value
+  },
   mutate_selectedZoom(state, value) {
     state.selectedZoom = value
   },