@eturnity/eturnity_3d 6.30.0 → 6.31.1

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@eturnity/eturnity_3d",
   "private": false,
-  "version": "6.30.0",
+  "version": "6.31.1",
   "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.29.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/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/materials.js

@@ -25,6 +25,7 @@ material.panel={}
         material.panel['default_'+k] = new THREE.MeshBasicMaterial({
             map: texture,
             side: THREE.DoubleSide,
+            transparent: true
         })
     }
 
@@ -45,7 +46,7 @@ material.moduleField = new THREE.MeshPhongMaterial({
         flatShading: true,
         side:THREE.DoubleSide,
         transparent:true,
-        opacity:0.8
+        opacity:0.6
 })    
 material.curvedRoof = new THREE.MeshPhongMaterial({
         color: 0xffff00,

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/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]) {
@@ -12,13 +13,14 @@ export default {
               let texture = this.loader.load(component.texture_img_url)
               this.material.panel[pvId] = new THREE.MeshBasicMaterial({
                 map: texture,
-                side: THREE.DoubleSide
+                side: THREE.DoubleSide,
+                transparent: true
               })
             }
           }
         })
       },
-      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
@@ -29,69 +31,12 @@ export default {
               let texture = await this.loader.load(mf.data.texture_img_url)
               this.material.panel[pvId] = new THREE.MeshBasicMaterial({
                 map: texture,
-                side: THREE.DoubleSide
+                side: THREE.DoubleSide,
+                transparent: true
               })
             }
           }
         }
       },
-      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/panel.js

@@ -33,6 +33,8 @@ export default {
           //definition of the material
           if(panelPolygon.moduleField.data.number_of_panels_override) return
            let material = this.material.panel['default_'+this.moduleTextureVersionId]
+           material.transparent=true
+           material.opacity=this.panelOpacity
            if (panelPolygon.moduleField.pvData) {
              let pvId = panelPolygon.moduleField.pvData.id
              if (this.material.panel[pvId]) {