@eturnity/eturnity_3d 6.31.0 → 6.31.2

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@eturnity/eturnity_3d",
   "private": false,
-  "version": "6.31.0",
+  "version": "6.31.2",
   "main": "dist/main.js",
   "scripts": {
     "dev": "vue-cli-service serve --skip-plugins @vue/cli-plugin-eslint",
     "build": "vue-cli-service build --skip-plugins @vue/cli-plugin-eslint"
   },
   "dependencies": {
-    "@eturnity/eturnity_maths": "6.31.0",
+    "@eturnity/eturnity_maths": "6.31.1",
     "axios": "^1.3.2",
     "core-js": "^2.6.12",
     "cors": "^2.8.5",

package/src/components/ThreeCanvasViewer.vue

@@ -9,7 +9,7 @@ import { addVector, multiplyVector } from '@eturnity/eturnity_maths'
 import { updateComputedGeometryPolygon } from '@eturnity/eturnity_maths'
 
 import threeMixin from '../helper/threeMixin'
-import { material } from '../helper/materials'
+import materialMixin from '../helper/materialMixin'
 import renderMixin from '../helper/renderMixin'
 export default {
   name: 'ThreeCanvas',
@@ -28,7 +28,6 @@ export default {
       provider:null,
       cameraprojection: null,
       texture: null,
-      material: material,
       renderer: new THREE.WebGLRenderer({
         antialias: true,
         preserveDrawingBuffer: true
@@ -57,21 +56,21 @@ export default {
       areModuleFieldsVisible:false
     }
   },
-  mixins: [renderMixin,threeMixin],
+  mixins: [renderMixin,threeMixin,materialMixin],
   async mounted() {
     await this.hydrateData(this.geometryData)
     this.renderer.domElement.style.width = '100%'
     this.renderer.domElement.style.height = '100%'
 
     this.initialiseThree(this.isInteractive)
-    this.loadProjectionMaterial()
     this.initialiseThreeMap()
-    await this.loadTextureFromModuleFields()
+    await this.loadPanelsTexture()
     this.renderGeometry()
     this.onWindowResize()
+    // this.updateProjectionMaterials()
     this.animate()
     this.$root.$on('on-roofSelected',(polygon)=>this.setCameraOrthogonalTo(polygon))
-    this.updateProjectionMaterial()
+    this.initializeProjectionMaterial()
     
     const polygon = this.polygons.find((p) => p.id == this.uuid)
     this.setCamera(polygon, this.view_mode)
@@ -83,6 +82,7 @@ export default {
       uuid: (state) => state.threeDModule.uuid,
       view_mode: (state) => state.threeDModule.view_mode,
       isInteractive: (state) => state.threeDModule.isInteractive,
+      imageOverlay: (state) => state.threeDModule.imageOverlay,
     }),
     ...mapGetters({
       polygons: 'getPolygons',
@@ -91,7 +91,6 @@ export default {
       mapConfig: 'getMapConfig',
       roofsBounds: 'getRoofsBounds',
       layoutSettings: 'getLayoutSettings',
-
       roofs: 'getRoofs',
       obstacles: 'getObstacles',
       moduleFields: 'getModuleFields',

package/src/config.js

@@ -65,7 +65,7 @@ export const maxMargin=2500
 export const node3DRadius=0.05
 export const beamColor="#ffffff"
 export const node3DColor="white"
-export const beamOpacity=0.3
+export const beamOpacity=0.4
 export const node3dOpacity=0.3
 export const dimMarginColor='#ff000020'
 export const defaultTextureUrl=require('./assets/images/panels/reneSola_Virtus_2_JC320S_24_Bbw.png')

package/src/helper/materialMixin.js

@@ -0,0 +1,75 @@
+import * as THREE from 'three'
+import {beamColor,beamOpacity,node3DColor,node3dOpacity,defaultTextureUrls} from '../config'
+export default {
+    data(){
+        return {
+            material:{}
+        }
+    },
+    created(){
+        let wallColor=0xdddddd
+        if(this.wallColor){
+            wallColor = new THREE.Color(this.wallColor)
+        }
+        this.material.wall = new THREE.MeshLambertMaterial({
+            color: wallColor,
+            side:THREE.DoubleSide
+        })
+
+        this.material.obstacle = new THREE.MeshPhongMaterial({
+            color: 0xff0000,
+            side:THREE.DoubleSide,
+        })
+    
+        this.material.edge=new THREE.MeshPhongMaterial({ color: beamColor,transparent:true,opacity:beamOpacity })
+        this.material.node=new THREE.PointsMaterial( { size: 0.05, sizeAttenuation: true,color: node3DColor, opacity:node3dOpacity, transparent: true } );
+        const loader = new THREE.TextureLoader()
+        // loader.crossOrigin = 'anonymous'
+        // texture.minFilter = THREE.LinearFilter
+        this.material.panel={}
+        
+        for(let k=0;k<defaultTextureUrls.length;k++){
+            let texture=loader.load(defaultTextureUrls[k], function (texture) {})
+            this.material.panel['default_'+k] = new THREE.MeshBasicMaterial({
+                map: texture,
+                side: THREE.DoubleSide,
+            })
+        }
+        this.material.roof=[this.material.wall]
+    
+        this.material.flatRoof = new THREE.MeshPhongMaterial({
+            color: 0x00ff00,
+            specular: 0x009900,
+            shininess: 0,
+            flatShading: true,
+            side:THREE.DoubleSide,
+            transparent:true,
+            opacity:0.5
+        })
+    
+        this.material.moduleField = new THREE.MeshPhongMaterial({
+            color: 0xfc9d03,
+            specular: 0x000000,
+            shininess: 0,
+            flatShading: true,
+            side:THREE.DoubleSide,
+            transparent:true,
+            opacity:0.8
+        })    
+        this.material.curvedRoof = new THREE.MeshPhongMaterial({
+            color: 0xffff00,
+            specular: 0x009900,
+            shininess: 0,
+            flatShading: true,
+            side:THREE.DoubleSide,
+            transparent:true,
+            opacity:0.5
+        })
+    },
+    watch: {
+        wallColor(color) {
+          let wallColor = new THREE.Color(color)
+          this.material.wall.color.set(wallColor)
+        },
+    }
+}

package/src/helper/render/background.js

@@ -1,40 +1,8 @@
 import * as THREE from 'three'
 
+
 export default {
     methods:{
-      renderBackground() {
-        // if(this.meshes.backgroundMesh){
-        //   let sizeInMm={width:2000000,height:2000000}
-        //   let positionInMm={x:0,y:0}
-        //   if(this.layoutSettings.background_map_settings && this.layoutSettings.background_map_settings.sizeInMm){
-        //     sizeInMm=this.layoutSettings.background_map_settings.sizeInMm
-        //     positionInMm=this.layoutSettings.background_map_settings.positionInMm
-        //   }
-  
-        //   this.meshes.backgroundMesh.geometry.dispose()
-        //   let xMin=positionInMm.x/1000-sizeInMm.width/2000
-        //   let xMax=positionInMm.x/1000+sizeInMm.width/2000
-        //   let yMin=positionInMm.y/1000-sizeInMm.height/2000
-        //   let yMax=positionInMm.y/1000+sizeInMm.height/2000
-        //   let c1=[xMin,yMax,0.1]
-        //   let c2=[xMax,yMax,0.1]
-        //   let c3=[xMax,yMin,0.1]
-        //   let c4=[xMin,yMin,0.1]
-        //   let geometry = new THREE.BufferGeometry();
-        //   const vertices = new Float32Array( [
-        //     ...c1,
-        //     ...c4,
-        //     ...c3,
-        //     ...c3,
-        //     ...c2,
-        //     ...c1
-        //   ] );
-        //   geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
-        //   geometry.computeVertexNormals()
-        //   this.meshes.backgroundMesh.geometry=geometry        
-        // }else{
-        //   this.initialiseThreeMap()
-        // }
-      },
+      
     }
 }

package/src/helper/render/clear.js

@@ -12,13 +12,13 @@ export default {
           //in case of map, bumpMap, normalMap, envMap ...
           Object.keys(obj.material).forEach((prop) => {
             if (!obj.material[prop]) return
-            if (
+            if (false &&
               obj.material[prop] !== null &&
               typeof obj.material[prop].dispose === 'function'
             )
               obj.material[prop].dispose()
           })
-          obj.material.dispose()
+          if(obj.material.dispose) obj.material.dispose()
         }
       },
       clearPanelsFromChangingRoofs(roofIds){

package/src/helper/render/edge.js

@@ -1,6 +1,43 @@
 import * as THREE from 'three'
 export default {
     methods:{
+      setCylinderPosition(cylinder,edge){
+        const point_0 = new THREE.Vector3(
+          edge.outline[0].x / 1000,
+          edge.outline[0].y / 1000,
+          edge.outline[0].z / 1000
+        )
+        const point_1 = new THREE.Vector3(
+          edge.outline[1].x / 1000,
+          edge.outline[1].y / 1000,
+          edge.outline[1].z / 1000
+        )
+        
+        const midPoint = point_0.clone().add(point_1).multiplyScalar(0.5)
+        var direction = new THREE.Vector3().subVectors(point_1, point_0)
+        let length = direction.length()
+
+        
+        
+
+
+        //cylinder.rotation.set(arrow.rotation)
+        var axis = new THREE.Vector3(0, 1, 0)
+        cylinder.quaternion.setFromUnitVectors(
+          axis,
+          direction.clone().normalize()
+        )
+        //cylinder.position.set(new THREE.Vector3().addVectors( pointX, direction.multiplyScalar(0.5) ))
+        cylinder.position.copy(midPoint.clone())
+        let oldLength = cylinder.userData.cylinderLength
+        let newLength = length
+        if (!oldLength || oldLength != 0) {
+          cylinder.scale.set(1, newLength, 1)
+          cylinder.userData.cylinderLength = newLength
+        }
+        cylinder.updateMatrix()
+        return cylinder
+      },
       renderEdges() {
         this.clearEdgesRemovedOnes('edgeMeshes')
         let cylinder
@@ -14,67 +51,16 @@ export default {
             cylinder = this.meshes.edgeMeshes[edge.id]
             if (cylinder) {
               //update
-              const point_0 = new THREE.Vector3(
-                edge.outline[0].x / 1000,
-                edge.outline[0].y / 1000,
-                edge.outline[0].z / 1000
-              )
-              const point_1 = new THREE.Vector3(
-                edge.outline[1].x / 1000,
-                edge.outline[1].y / 1000,
-                edge.outline[1].z / 1000
-              )
-              const midPoint = point_0.clone().add(point_1).multiplyScalar(0.5)
-              var direction = new THREE.Vector3().subVectors(point_1, point_0)
-              let length = direction.length()
-              //cylinder.rotation.set(arrow.rotation)
-              var axis = new THREE.Vector3(0, 1, 0)
-              cylinder.quaternion.setFromUnitVectors(
-                axis,
-                direction.clone().normalize()
-              )
-              //cylinder.position.set(new THREE.Vector3().addVectors( pointX, direction.multiplyScalar(0.5) ))
-              cylinder.position.copy(midPoint.clone())
-              let oldLength = cylinder.userData.cylinderLength
-              let newLength = length
-              if (oldLength != 0) {
-                let scaleRatio = newLength / oldLength
-                //let scaleVector=direction.multiplyScalar(scaleRatio-1)
-                cylinder.scale.set(1, newLength, 1)
-                cylinder.userData.cylinderLength = newLength
-              }
-              cylinder.updateMatrix()
+              this.setCylinderPosition(cylinder,edge)
               //change cylinder length
             } else {
-              const point_0 = new THREE.Vector3(
-                edge.outline[0].x / 1000,
-                edge.outline[0].y / 1000,
-                edge.outline[0].z / 1000
-              )
-              const point_1 = new THREE.Vector3(
-                edge.outline[1].x / 1000,
-                edge.outline[1].y / 1000,
-                edge.outline[1].z / 1000
-              )
-  
-              const midPoint = point_0.clone().add(point_1).multiplyScalar(0.5)
-              var direction = new THREE.Vector3().subVectors(point_1, point_0)
-              let length = direction.length()
+         
               const geometry = new THREE.CylinderGeometry(0.1, 0.1, 1, 6)
               cylinder = new THREE.Mesh(geometry, material)
-              cylinder.scale.set(1, length, 1)
-              cylinder.userData.cylinderLength = length
-              //cylinder.rotation.set(arrow.rotation)
-              var axis = new THREE.Vector3(0, 1, 0)
-              cylinder.quaternion.setFromUnitVectors(
-                axis,
-                direction.clone().normalize()
-              )
-              //cylinder.position.set(new THREE.Vector3().addVectors( pointX, direction.multiplyScalar(0.5) ))
-              cylinder.position.copy(midPoint.clone())
-              //cylinder.position.set(edge.outline[0].x/1000, edge.outline[0].y/1000, edge.outline[0].z/1000);
+              cylinder=this.setCylinderPosition(cylinder,edge)
+              
               cylinder.userData.edgeId = edge.id
-              cylinder.matrixAutoUpdate = false
+              
               this.meshes.edgeMeshes[edge.id] = cylinder
               this.scene.add(cylinder)
   

package/src/helper/render/geometryHandler.js

@@ -375,6 +375,56 @@ export function getBufferModuleFieldGeometry(moduleFieldPolygon) {
   return geometry
 }
 
+export function getBufferImageOverlayGeometry(corners){
+  corners.forEach(p=>p.z=0)
+  let normalVector = getNormalVectorFrom3Points(
+    corners[0],
+    corners[1],
+    corners[2]
+  )
+  if (normalVector.z < 0) {
+    normalVector = multiplyVector(-1, normalVector)
+  }
+
+  const geometry = new THREE.BufferGeometry()
+  //Calcul of triangles using cutear algo
+  const trianglesVertices = []
+  trianglesVertices.push(...getTriangleVerticesFromOutline(corners))
+  if(hasNaN(trianglesVertices)){return null}
+  const vertices = new Float32Array(trianglesVertices)
+  var A = corners[2]
+  var B = corners[3]
+  var C = corners[1]
+  var D = corners[0]
+  const AB = getDistanceBetweenPoints(A, B)
+  const AC = getDistanceBetweenPoints(A, C)
+  let uvs
+  if (AB < AC) {
+    uvs = new Float32Array([
+      0, 1, 
+      0, 0, 
+      1, 0,
+
+      0, 1, 
+      1, 0, 
+      1, 1
+    ])
+  }else{
+    uvs = new Float32Array([
+      0, 0, 
+      1, 0, 
+      1, 1,
+  
+      1, 0, 
+      0, 1, 
+      1, 1
+    ])
+  }
+  geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3))
+  geometry.setAttribute('uv', new THREE.BufferAttribute(uvs, 2))
+  geometry.computeVertexNormals()
+  return geometry
+}
 export function getBufferPanelGeometry(panelPolygon) {
   let panelNormalVector = getNormalVectorFrom3Points(
     panelPolygon.outline[0],
@@ -384,7 +434,6 @@ export function getBufferPanelGeometry(panelPolygon) {
   if (panelNormalVector.z < 0) {
     panelNormalVector = multiplyVector(-1, panelNormalVector)
   }
-  const roofPolygon = panelPolygon.roof
   const panelHeight = parseInt(panelPolygon.height || 50)
   //get lowest verticalProjection
 

package/src/helper/render/imageOverlay.js

@@ -0,0 +1,126 @@
+import * as THREE from 'three'
+import {mapGetters} from 'vuex'
+import ProjectedMaterial from 'three-projected-material'
+import {
+  substractVector,
+  addVector,
+  multiplyVector,
+  getDistanceBetweenPoints,
+  getAngleInDegFromCanvasVector
+} from '@eturnity/eturnity_maths'
+import {getBufferImageOverlayGeometry,updateBufferRoofGeometry} from './geometryHandler'
+
+export default {
+    data(){
+        return {
+            imageOverlayProjectionCamera: new THREE.PerspectiveCamera(1, 300 / 300, 100, 1000),
+            imageOverlayTexture:null,
+            imageOverlayMaterial:null,
+        }
+    },
+    computed:{
+        ...mapGetters({
+            imageOverlay: 'getImageOverlay',
+          }), 
+    },
+    methods:{    
+      renderImageOverlayOnBackground() {
+        if(!this.imageOverlay || !this.imageOverlayMaterial){
+        this.clearMesh(this.meshes.backgroundMesh)
+        this.meshes.backgroundMesh=null
+         return
+        }
+        let corners=this.imageOverlay.corners.map(p=>{return {...p,z:100}})
+        if(this.meshes.backgroundMesh && this.meshes.backgroundMesh.geometry){
+          let geometry=this.meshes.backgroundMesh.geometry
+          geometry=updateBufferRoofGeometry(corners,[],geometry)
+          //updateBufferRoofGeometry(corners,[],geometry)
+          this.meshes.backgroundMesh.geometry=geometry
+              
+        }else{
+          let planeGeometry = getBufferImageOverlayGeometry(corners)
+          let planeMaterial = this.imageOverlayMaterial
+          
+          this.meshes.backgroundMesh = new THREE.Mesh(planeGeometry, planeMaterial)
+          this.scene.add(this.meshes.backgroundMesh)
+        }
+        this.meshes.backgroundMesh.position.z=0.15
+        if(this.imageOverlayMaterial){
+          this.applyTextureOnMesh([this.imageOverlayMaterial],this.meshes.backgroundMesh)
+        }
+        this.meshes.backgroundMesh.visible=true
+      },
+      async changeImageOverlay(){
+        if(this.imageOverlayMaterial){
+          this.imageOverlayMaterial.dispose()
+          this.imageOverlayMaterial=null
+        }
+        await this.updateProjectionMaterials()
+      },
+      async getImageOverlayMaterial(){
+        if(!this.imageOverlay || !this.imageOverlay.url){
+          if(this.imageOverlayMaterial){
+            this.imageOverlayMaterial.dispose()
+          }
+          this.imageOverlayMaterial=null
+          return null
+        }
+
+        if(!this.imageOverlayMaterial || this.imageOverlay.url!= this.imageOverlayMaterial.userData.url){
+          this.imageOverlayMaterial = await this.newImageOverlayMaterial()
+        }else{
+          this.setImageOverlayCameraPosition()
+        }
+        return this.imageOverlayMaterial
+      },
+      removeImageOverlay(){
+        if(this.imageOverlayMaterial && this.imageOverlayMaterial.dispose)
+            this.imageOverlayMaterial.dispose()
+        this.imageOverlayMaterial=null
+        this.material.roof=this.material.roof.filter(material=>material.userData.type!='imageOverlayMaterial')
+      },
+      async newImageOverlayMaterial(){
+        return new Promise((resolve)=>{this.loader.load(this.imageOverlay.url,(texture)=>{
+                this.imageOverlayTexture=texture
+                this.setImageOverlayCameraPosition()
+                let imageOverlayProjectionMaterial = new ProjectedMaterial({
+                    camera: this.imageOverlayProjectionCamera,
+                    texture: this.imageOverlayTexture,
+                    transparent: true,
+                    side: THREE.DoubleSide,
+                    depthWrite: false
+                })
+                imageOverlayProjectionMaterial.userData={}
+                imageOverlayProjectionMaterial.userData.type="imageOverlayMaterial"
+                imageOverlayProjectionMaterial.userData.priority=2
+                imageOverlayProjectionMaterial.userData.url=this.imageOverlay.url
+                resolve(imageOverlayProjectionMaterial)
+                })
+            })
+        },
+        setImageOverlayCameraPosition(){
+          if(!this.imageOverlay || !this.imageOverlay.url) return
+          let height=getDistanceBetweenPoints(this.imageOverlay.corners[1],this.imageOverlay.corners[2])
+          let width=getDistanceBetweenPoints(this.imageOverlay.corners[0],this.imageOverlay.corners[1])
+          this.imageOverlayProjectionCamera.aspect =
+              width / height
+          let projectionAltitude = height /(2 * Math.tan((this.imageOverlayProjectionCamera.fov * Math.PI) / 360))
+
+
+              //set projection camera over background_map_center
+              let imageOverlayProjectionCameraPosition={x:0,y:0,z:projectionAltitude / 1000}
+              
+              let positionInMm=multiplyVector(0.5,addVector(this.imageOverlay.corners[0],this.imageOverlay.corners[2]))
+              imageOverlayProjectionCameraPosition.x=positionInMm.x/1000
+              imageOverlayProjectionCameraPosition.y=positionInMm.y/1000
+              
+          this.imageOverlayProjectionCamera.position.set(imageOverlayProjectionCameraPosition.x, imageOverlayProjectionCameraPosition.y, projectionAltitude / 1000)
+          this.imageOverlayProjectionCamera.lookAt(imageOverlayProjectionCameraPosition.x, imageOverlayProjectionCameraPosition.y,0)
+          let zAngle=getAngleInDegFromCanvasVector(substractVector(this.imageOverlay.corners[3],this.imageOverlay.corners[0]))
+          this.imageOverlayProjectionCamera.rotation.set(0, 0, zAngle*Math.PI/180)
+          this.imageOverlayProjectionCamera.far = projectionAltitude * 1.5
+          this.imageOverlayProjectionCamera.near = projectionAltitude * 0.8
+          this.imageOverlayProjectionCamera.updateProjectionMatrix()
+        },
+    }
+}

package/src/helper/render/index.js

@@ -9,8 +9,12 @@ import moduleField from './moduleField'
 import obstacle from './obstacle'
 import panel from './panel'
 import roof from './roof'
+import imageOverlay from './imageOverlay'
+import mapProjection from './mapProjection'
+import texture from './texture'
+import projectionMaterial from './projectionMaterial'
 
 export default {
     //mixins:[node,background,clear,edge,loader,margin,moduleField,obstacle,panel,roof,base]
-    mixins:[margin,node,background, base,roof,edge,obstacle,moduleField,panel,clear,loader]
+    mixins:[margin,node,background, base,roof,edge,obstacle,moduleField,panel,clear,loader,imageOverlay,texture,mapProjection,projectionMaterial]
 }

package/src/helper/render/loader.js

@@ -1,8 +1,9 @@
 import * as THREE from 'three'
 import ProjectedMaterial from 'three-projected-material'
+
 export default {
     methods:{
-      loadNewTexture(){
+      loadNewPanelTextures(){
         Object.values(this.pvDataMemo).forEach((component) => {
           const pvId = component.id
           if (!this.material.panel[pvId]) {
@@ -19,7 +20,7 @@ export default {
           }
         })
       },
-      async loadTextureFromModuleFields(){
+      async loadPanelsTexture(){
         for(let k=0;k<this.moduleFields.length;k++){
           let mf=this.moduleFields[k]
           const pvId = mf.data.component_id_pv_module
@@ -37,63 +38,5 @@ export default {
           }
         }
       },
-      async loadProjectionMaterial() {
-        const _this=this
-        if(!this.layoutSettings.base64_image_url) 
-        {
-          this.loader.load(require("../../assets/images/white_tile.png"),(texture)=>{
-            let projectionMaterial = new ProjectedMaterial({
-              camera: _this.cameraprojection,
-              texture: texture
-            })
-          this.material.roof = projectionMaterial
-          })
-          return
-        }
-        let projectedMaterialLoaded= await new Promise((resolve,reject) => {
-          this.loader.load(this.layoutSettings.base64_image_url,(texture)=>{
-            let backgroundImageZoomLvl=_this.layoutSettings.map_zoom
-            let backgroundImageCenter={
-              lat:_this.layoutSettings.layout_latitude,
-              lng:_this.layoutSettings.layout_longitude
-            }
-            if(_this.layoutSettings.background_map_settings){
-              backgroundImageZoomLvl=_this.layoutSettings.background_map_settings.zoom_lvl
-              backgroundImageCenter={
-                lat:_this.layoutSettings.background_map_settings.lat,
-                lng:_this.layoutSettings.background_map_settings.lng
-              }
-            }
-            _this.backgroundImagesizeInMm=_this.layoutSettings.background_map_settings.sizeInMm
-            if (_this.backgroundImagesizeInMm) {
-              _this.cameraprojection.aspect =
-                _this.backgroundImagesizeInMm.width / _this.backgroundImagesizeInMm.height
-              let projectionAltitude =
-              _this.backgroundImagesizeInMm.height /
-                (2 * Math.tan((_this.cameraprojection.fov * Math.PI) / 360))
-  
-  
-                //set projection camera over background_map_center
-                let cameraProjectionPosition={x:0,y:0,z:projectionAltitude / 1000}
-                if(_this.layoutSettings.background_map_settings && _this.layoutSettings.background_map_settings.positionInMm){
-                  let positionInMm=this.layoutSettings.background_map_settings.positionInMm
-                  cameraProjectionPosition.x=positionInMm.x/1000
-                  cameraProjectionPosition.y=positionInMm.y/1000
-                }
-              
-              _this.cameraprojection.position.set(cameraProjectionPosition.x, cameraProjectionPosition.y, projectionAltitude / 1000)
-              _this.cameraprojection.far = projectionAltitude * 16
-              _this.cameraprojection.updateProjectionMatrix()
-            }
-            
-            let projectionMaterial = new ProjectedMaterial({
-              camera: _this.cameraprojection,
-              texture: texture
-            })
-            resolve(projectionMaterial)
-          })
-        })
-        this.material.roof =projectedMaterialLoaded
-      },
     }
 }

package/src/helper/render/mapProjection.js

@@ -0,0 +1,86 @@
+import * as THREE from 'three'
+import ProjectedMaterial from 'three-projected-material'
+
+export default {
+    data(){
+      return {
+        mapProjectionTexture:null,
+        mapProjectionMaterial:null
+      }
+    },
+    methods:{
+      async changeMapProjection(){
+        if(this.mapProjectionMaterial){
+          this.mapProjectionMaterial.dispose()
+          this.mapProjectionMaterial=null
+        }
+        await this.updateProjectionMaterials()
+      },
+      async getMapProjectionMaterial(){
+        if(!this.layoutSettings.base64_image_url){
+          return null
+        }else{
+          if(!this.mapProjectionMaterial){
+            this.mapProjectionMaterial = await this.newMapProjectionMaterial()
+          }else{
+            this.setMapProjectionCameraPosition()
+          }
+        }
+        return this.mapProjectionMaterial
+      },
+     
+      async newMapProjectionMaterial() {
+            return new Promise((resolve,reject) => {
+              this.loader.load(this.layoutSettings.base64_image_url,(texture)=>{
+                this.mapProjectionTexture=texture
+                this.setMapProjectionCameraPosition()
+                let mapProjectionMaterial = new ProjectedMaterial({
+                  camera: this.cameraprojection,
+                  texture: texture,
+                  transparent: true,
+                  side: THREE.DoubleSide,
+                })
+                mapProjectionMaterial.userData={}
+                mapProjectionMaterial.userData.type="mapProjectionMaterial"
+                mapProjectionMaterial.userData.priority=1
+                mapProjectionMaterial.userData.url=this.layoutSettings.base64_image_url
+                resolve(mapProjectionMaterial)
+              })
+            })
+      },
+      setMapProjectionCameraPosition(){
+        let backgroundImageCenter={
+          lat:this.layoutSettings.layout_latitude,
+          lng:this.layoutSettings.layout_longitude
+        }
+        if(this.layoutSettings.background_map_settings){
+          backgroundImageCenter={
+            lat:this.layoutSettings.background_map_settings.lat,
+            lng:this.layoutSettings.background_map_settings.lng
+          }
+        }
+        this.backgroundImagesizeInMm=this.layoutSettings.background_map_settings.sizeInMm
+        if (this.backgroundImagesizeInMm) {
+          this.cameraprojection.aspect =
+            this.backgroundImagesizeInMm.width / this.backgroundImagesizeInMm.height
+          let projectionAltitude =
+          this.backgroundImagesizeInMm.height /
+            (2 * Math.tan((this.cameraprojection.fov * Math.PI) / 360))
+
+            //set projection camera over background_map_center
+            let cameraProjectionPosition={x:0,y:0,z:projectionAltitude / 1000}
+            if(this.layoutSettings.background_map_settings && this.layoutSettings.background_map_settings.positionInMm){
+              let positionInMm=this.layoutSettings.background_map_settings.positionInMm
+              cameraProjectionPosition.x=positionInMm.x/1000
+              cameraProjectionPosition.y=positionInMm.y/1000
+            }
+          
+          this.cameraprojection.position.set(cameraProjectionPosition.x, cameraProjectionPosition.y, projectionAltitude / 1000)
+          this.cameraprojection.far = projectionAltitude * 1.5
+          this.cameraprojection.near = projectionAltitude * 0.5
+          this.cameraprojection.updateProjectionMatrix()
+        }
+      },
+      
+    }
+}

package/src/helper/render/obstacle.js

@@ -3,7 +3,6 @@ import {
   getBufferObstacleGeometry,
   getBufferObstacleSideGeometry,
 } from './geometryHandler'
-import { material } from '../materials'
 export default {
     methods:{
       renderObstacles() {
@@ -24,13 +23,8 @@ export default {
               )
               if (geometry && geometrySide) {
                 const mesh = new THREE.Mesh(geometry, this.material.roof)
-                const meshSide = new THREE.Mesh(geometrySide, material.wall)
-                mesh.material=this.material.roof
-                if(this.material.roof && this.material.roof.project){
-                  this.material.roof.project(mesh)
-                }else{
-                  mesh.material=this.material.wall
-                }
+                const meshSide = new THREE.Mesh(geometrySide, this.material.wall)
+                this.applyTextureOnMesh(this.material.roof,mesh)
 
                 mesh.userData.version = obstaclePolygon.version
                 mesh.userData.type = 'obstacleMeshes'

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: {
@@ -206,9 +202,41 @@ export default {
             method: this.initialiseThreeMap,
             arg: []
           })
+          break
+        case 'changeMapProjection':
+          methodList.push({
+            name: 'changeMapProjection',
+            method: this.changeMapProjection,
+            arg: []
+          })
           methodList.push({
-            name: 'updateProjectionMaterial',
-            method: this.updateProjectionMaterial,
+            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: 'updateProjectionMaterials()',
+            method: this.updateProjectionMaterials,
             arg: []
           })
           break
@@ -228,11 +256,11 @@ export default {
       }
     },
     renderGeometry() {
-      this.renderBackground()
       this.renderBuilding()
       this.renderModuleFields()
       this.renderPanels()
       this.renderRoofsMargin()
+      this.updateProjectionMaterials()
     },
     renderBuilding() {
       this.renderBase()
@@ -242,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() {
@@ -320,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': {
@@ -360,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,
@@ -35,6 +36,7 @@ const init_state = {
   panelOpacity:1,
   selectedMapLayer:null,
   globalProjectProperties: [],
+  imageOverlay:null
 }
 
 const state = init_state
@@ -87,7 +89,9 @@ const getters = {
   getBuildingLocation(state) {
     return state.buildingLocation
   },
-
+  getImageOverlay(state){
+    return state.imageOverlay
+  },
   getLayoutSettings(state) {
     return state.layoutSettings
   },
@@ -116,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
   },