@eturnity/eturnity_3d 6.30.0-qa-6.31.0 → 6.31.0

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@eturnity/eturnity_3d",
   "private": false,
-  "version": "6.30.0-qa-6.31.0",
+  "version": "6.31.0",
   "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.30.0-qa-6.31.0",
+    "@eturnity/eturnity_maths": "6.31.0",
     "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 materialMixin from '../helper/materialMixin'
+import { material } from '../helper/materials'
 import renderMixin from '../helper/renderMixin'
 export default {
   name: 'ThreeCanvas',
@@ -28,6 +28,7 @@ export default {
       provider:null,
       cameraprojection: null,
       texture: null,
+      material: material,
       renderer: new THREE.WebGLRenderer({
         antialias: true,
         preserveDrawingBuffer: true
@@ -56,21 +57,21 @@ export default {
       areModuleFieldsVisible:false
     }
   },
-  mixins: [renderMixin,threeMixin,materialMixin],
+  mixins: [renderMixin,threeMixin],
   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.loadPanelsTexture()
+    await this.loadTextureFromModuleFields()
     this.renderGeometry()
     this.onWindowResize()
-    // this.updateProjectionMaterials()
     this.animate()
     this.$root.$on('on-roofSelected',(polygon)=>this.setCameraOrthogonalTo(polygon))
-    this.initializeProjectionMaterial()
+    this.updateProjectionMaterial()
     
     const polygon = this.polygons.find((p) => p.id == this.uuid)
     this.setCamera(polygon, this.view_mode)
@@ -82,7 +83,6 @@ 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,6 +91,7 @@ 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.4
+export const beamOpacity=0.3
 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/materials.js

@@ -0,0 +1,62 @@
+import * as THREE from 'three'
+import {beamColor,beamOpacity,node3DColor,node3dOpacity,defaultTextureUrls} from '../config'
+const material=[]
+
+material.wall = new THREE.MeshLambertMaterial({
+        color: 0xdddddd,
+        side:THREE.DoubleSide
+    })
+
+// TODO get Canvas image from TwoD
+material.obstacle = new THREE.MeshPhongMaterial({
+        color: 0xff0000,
+        side:THREE.DoubleSide,
+    })
+
+material.edge=new THREE.MeshPhongMaterial({ color: beamColor,transparent:true,opacity:beamOpacity })
+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
+material.panel={}
+    
+    for(let k=0;k<defaultTextureUrls.length;k++){
+        let texture=loader.load(defaultTextureUrls[k], function (texture) {})
+        material.panel['default_'+k] = new THREE.MeshBasicMaterial({
+            map: texture,
+            side: THREE.DoubleSide,
+            transparent: true
+        })
+    }
+
+material.flatRoof = new THREE.MeshPhongMaterial({
+        color: 0x00ff00,
+        specular: 0x009900,
+        shininess: 0,
+        flatShading: true,
+        side:THREE.DoubleSide,
+        transparent:true,
+        opacity:0.5
+    })
+
+material.moduleField = new THREE.MeshPhongMaterial({
+        color: 0xfc9d03,
+        specular: 0x000000,
+        shininess: 0,
+        flatShading: true,
+        side:THREE.DoubleSide,
+        transparent:true,
+        opacity:0.6
+})    
+material.curvedRoof = new THREE.MeshPhongMaterial({
+        color: 0xffff00,
+        specular: 0x009900,
+        shininess: 0,
+        flatShading: true,
+        side:THREE.DoubleSide,
+        transparent:true,
+        opacity:0.5
+    })
+
+
+export {material}

package/src/helper/render/background.js

@@ -1,8 +1,40 @@
 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 (false &&
+            if (
               obj.material[prop] !== null &&
               typeof obj.material[prop].dispose === 'function'
             )
               obj.material[prop].dispose()
           })
-          if(obj.material.dispose) obj.material.dispose()
+          obj.material.dispose()
         }
       },
       clearPanelsFromChangingRoofs(roofIds){

package/src/helper/render/edge.js

@@ -1,43 +1,6 @@
 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
@@ -51,16 +14,67 @@ export default {
             cylinder = this.meshes.edgeMeshes[edge.id]
             if (cylinder) {
               //update
-              this.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 != 0) {
+                let scaleRatio = newLength / oldLength
+                //let scaleVector=direction.multiplyScalar(scaleRatio-1)
+                cylinder.scale.set(1, newLength, 1)
+                cylinder.userData.cylinderLength = newLength
+              }
+              cylinder.updateMatrix()
               //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=this.setCylinderPosition(cylinder,edge)
-              
+              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.userData.edgeId = edge.id
-              
+              cylinder.matrixAutoUpdate = false
               this.meshes.edgeMeshes[edge.id] = cylinder
               this.scene.add(cylinder)
   

package/src/helper/render/geometryHandler.js

@@ -375,56 +375,6 @@ 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],
@@ -434,6 +384,7 @@ 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/index.js

@@ -9,12 +9,8 @@ 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,imageOverlay,texture,mapProjection,projectionMaterial]
+    mixins:[margin,node,background, base,roof,edge,obstacle,moduleField,panel,clear,loader]
 }

package/src/helper/render/loader.js

@@ -1,9 +1,8 @@
 import * as THREE from 'three'
 import ProjectedMaterial from 'three-projected-material'
-
 export default {
     methods:{
-      loadNewPanelTextures(){
+      loadNewTexture(){
         Object.values(this.pvDataMemo).forEach((component) => {
           const pvId = component.id
           if (!this.material.panel[pvId]) {
@@ -20,7 +19,7 @@ export default {
           }
         })
       },
-      async loadPanelsTexture(){
+      async loadTextureFromModuleFields(){
         for(let k=0;k<this.moduleFields.length;k++){
           let mf=this.moduleFields[k]
           const pvId = mf.data.component_id_pv_module
@@ -38,5 +37,63 @@ 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/obstacle.js

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

package/src/helper/render/roof.js

@@ -32,8 +32,7 @@ export default {
                 return outline
             })
 
-            cropedHolesOutline = cropedHolesOutline.filter((outline) => !!outline && outline.length>0)
-
+            cropedHolesOutline = cropedHolesOutline.filter((outline) => !!outline)
             geometry = updateBufferRoofGeometry(
             roofOutline,
             cropedHolesOutline,
@@ -69,19 +68,6 @@ 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) => {
@@ -96,18 +82,17 @@ 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
-            this.applyTextureOnMesh(this.material.roof,mesh)
-            
+            if(this.material.roof){
+                mesh.material=this.material.roof
+                if(this.material.roof && this.material.roof.project) this.material.roof.project(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
@@ -116,7 +101,10 @@ export default {
                 mesh.userData.polygonId = roofPolygon.id
                 mesh.matrixAutoUpdate = false
                 this.scene.add(mesh)
-                this.applyTextureOnMesh(this.material.roof,mesh)
+                if(this.material.roof){
+                mesh.material=this.material.roof
+                if(this.material.roof.project) this.material.roof.project(mesh)
+                }
                 mesh.frustumCulled = false
                 this.meshes.roofMeshes[roofPolygon.id] = mesh
             }

package/src/helper/renderMixin.js

@@ -36,6 +36,10 @@ export default {
       roofMarginMeshes: {},
       moduleFieldsMeshes: {}
     }
+    if (this.wallColor) {
+      let wallColor = new THREE.Color(this.wallColor)
+      this.material.wall.color.set(wallColor)
+    }
   },
 
   computed: {
@@ -202,41 +206,9 @@ 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: 'updateProjectionMaterials()',
-            method: this.updateProjectionMaterials,
+            name: 'updateProjectionMaterial',
+            method: this.updateProjectionMaterial,
             arg: []
           })
           break
@@ -256,11 +228,11 @@ export default {
       }
     },
     renderGeometry() {
+      this.renderBackground()
       this.renderBuilding()
       this.renderModuleFields()
       this.renderPanels()
       this.renderRoofsMargin()
-      this.updateProjectionMaterials()
     },
     renderBuilding() {
       this.renderBase()
@@ -270,10 +242,32 @@ export default {
       this.renderEdges()
       this.renderFlatRoofs()
     },
-   
-    async initializeProjectionMaterial(){
-      await this.updateProjectionMaterials()
+
+    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()
       this.applyTextureOnRoofs()
+      this.renderBackground()
     },
 
     getCanvasOffset() {
@@ -326,9 +320,13 @@ export default {
     }
   },
   watch: {
+    wallColor(color) {
+      let wallColor = new THREE.Color(color)
+      this.material.wall.color.set(wallColor)
+    },
     pvDataMemo: {
       handler(val) {
-        this.loadNewPanelTextures()
+        this.loadNewTexture()
       }
     },
     'material.panel': {
@@ -362,10 +360,7 @@ export default {
     this.scene = null
     this.camera = null
     this.cameraprojection = null
-    Object.values(this.material).forEach((m) =>{
-      if(m && m.dispose)
-        m.dispose()
-    } )
+    this.material.forEach((m) => m.dispose())
     this.material = null
     this.orbitControl = null
     this.raycaster = null

package/src/store/hydrateData.js

@@ -11,12 +11,10 @@ import {
 } from '../helper/UpdateRoofObstacleRelations'
 
 export async function hydrateData({ state, commit }, data) {
-  console.log('hydrateData',data)
   let roofsResponse = data.roofs
   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)}
@@ -31,17 +29,9 @@ 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,7 +19,6 @@ const init_state = {
   cancelTokenGlobal: '',
   globalProjectProperties: [],
   buildingLocation: null,
-  imageOverlay:null,
   layoutSettings: {
     base64_image_url: null,
     layout_latitude: null,
@@ -36,7 +35,6 @@ const init_state = {
   panelOpacity:1,
   selectedMapLayer:null,
   globalProjectProperties: [],
-  imageOverlay:null
 }
 
 const state = init_state
@@ -89,9 +87,7 @@ const getters = {
   getBuildingLocation(state) {
     return state.buildingLocation
   },
-  getImageOverlay(state){
-    return state.imageOverlay
-  },
+
   getLayoutSettings(state) {
     return state.layoutSettings
   },
@@ -120,9 +116,6 @@ const mutations = {
   mutate_layoutSettings(state, value) {
     state.layoutSettings = value
   },
-  mutate_imageOverlay(state, value) {
-    state.imageOverlay = value
-  },
   mutate_selectedZoom(state, value) {
     state.selectedZoom = value
   },

package/src/helper/materialMixin.js

@@ -1,75 +0,0 @@
-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/imageOverlay.js

@@ -1,126 +0,0 @@
-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/mapProjection.js

@@ -1,86 +0,0 @@
-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/projectionMaterial.js

@@ -1,57 +0,0 @@
-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/texture.js

@@ -1,19 +0,0 @@
-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)
-                    }
-                }
-            }
-        },
-    }
-}