@eturnity/eturnity_3d 0.0.4

package/src/helper/renderMixin.js

@@ -0,0 +1,1132 @@
+import {mapState, mapGetters } from 'vuex'
+import * as THREE from 'three'
+import TWEEN from 'tween'
+import {
+  maximumGapLimit,
+  colorArrayBase,
+} from '../config'
+import {
+  addVector,
+  multiplyVector,
+  verticalProjectionOnPlane,
+} from '@eturnity/eturnity_maths'
+import {
+  getBufferWallGeometry,
+  updateBufferWallGeometry,
+  getBufferRoofGeometry,
+  updateBufferRoofGeometry,
+  getBufferObstacleGeometry,
+  getBufferObstacleSideGeometry,
+  getBufferModuleFieldGeometry,
+  getBufferPanelGeometry,
+  updateBufferPanelGeometry,
+  getBufferPanelSideGeometry,
+  updateBufferPanelSideGeometry,
+  getBufferRoofMarginGeometry
+} from './geometryHandler'
+import ProjectedMaterial from 'three-projected-material'
+import { material } from './materials'
+import { intersectOutlines } from '@eturnity/eturnity_maths'
+import clearThreeObjects from './clearThreeObjects'
+const meshTypes = [
+  'baseMeshes',
+  'backgroundMesh',
+  'roofMeshes',
+  'flatRoofMeshes',
+  'obstacleMeshes',
+  'panelsMeshes',
+  'nodeMeshes',
+  'edgeMeshes',
+  'roofMarginMeshes',
+  'moduleFieldsMeshes'
+]
+
+export default {
+  data() {
+    return {
+      meshes: {
+        baseMeshes: {},
+        backgroundMesh: null,
+        roofMeshes: {},
+        flatRoofMeshes: {},
+        obstacleMeshes: {},
+        panelsMeshes: {},
+        nodeMeshes: null,
+        edgeMeshes: {},
+        roofMarginMeshes: {},
+        moduleFieldsMeshes: {}
+      },
+      lastTic: new Date().getTime() * 1e4,
+      //lastTic:(new Date()).getTime()
+      lastGeometryEventIdDone: -1,
+      backgroundImagesizeInMm:null,
+    }
+  },
+  created() {
+    this.meshes = {
+      baseMeshes: {},
+      backgroundMesh: null,
+      roofMeshes: {},
+      flatRoofMeshes: {},
+      obstacleMeshes: {},
+      panelsMeshes: {},
+      nodeMeshes: null,
+      edgeMeshes: {},
+      roofMarginMeshes: {},
+      moduleFieldsMeshes: {}
+    }
+  },
+
+  computed: {
+    ...mapState({
+      module_texture_version_id: (state) => state.threeDModule.module_texture_version_id,
+      selectedMapLayer: (state) => state.threeDModule.selectedMapLayer,
+      pvDataMemo: (state) => state.threeDModule.pvDataMemo
+    }),
+    ...mapGetters({
+      selectedTool: 'getSelectedTool',
+      roofs: 'getRoofs',
+      lastGeometryEventId: 'getLastGeometryEventId',
+      roofsBounds:'getRoofsBounds',
+      geometryEvents: 'getGeometryEvents'
+    }),
+    layerKey(){
+      if(this.selectedMapLayer){
+        return this.selectedMapLayer.key
+      }else{
+        return null
+      }
+    },
+    polygonIds() {
+      return this.polygons.map((p) => p.id)
+    },
+    edgeIds() {
+      return this.edges.map((p) => p.id)
+    },
+    nodeIds() {
+      return this.nodes.map((p) => p.id)
+    },
+    fullRenderNeeded() {
+      return !!this.geometryEvents.find(
+        (e) => e.id > this.lastGeometryEventIdDone && e.name == 'full'
+      )
+    },
+    geometryEventsToDo() {
+      return this.geometryEvents.filter(
+        (e) => e.id > this.lastGeometryEventIdDone
+      )
+    }
+  },
+  methods: {
+    refreshRendering(e) {
+      let methodList = []
+      if (this.fullRenderNeeded) {
+        methodList = this.renderingMethodsByEvent({ name: 'full' })
+        this.renderMethods(methodList)
+      } else {
+        for (let geometryEvent of this.geometryEventsToDo) {
+          for (let renderingMethod of this.renderingMethodsByEvent(
+            geometryEvent
+          )) {
+            if (!methodList.map((m) => m.name).includes(renderingMethod.name)) {
+              methodList.push(renderingMethod)
+            }
+          }
+        }
+        if (methodList.length) {
+          this.renderMethods(methodList)
+        }
+      }
+      
+      
+      this.lastGeometryEventIdDone = this.lastGeometryEventId
+    },
+    renderingMethodsByEvent(geometryEvent) {
+      const name = geometryEvent.name
+      const params = geometryEvent.params
+      let methodList = []
+      switch (name) {
+        case 'setCameraGlobalPosition':
+          methodList.push({
+            name: 'setCameraGlobalPosition',
+            method: this.setCameraGlobalPosition,
+            arg: []
+          })
+          break
+        case 'toolChange': //params.toolName
+        case 'marginIsSameChange': //params.polygon
+        case 'marginDifferentChange': //params.polygon,index
+        case 'marginSameChange': //params.polygon
+          methodList.push({
+            name: 'renderRoofsMargin',
+            method: this.renderRoofsMargin,
+            arg: []
+          })
+          break
+        case 'full':
+        case 'removeNodes': //params.nodes
+        case 'removeEdges': //params.edges
+        case 'translate': //params.edges
+        case 'updateOutlineXY': //params.polygon,?index
+          methodList.push({
+            name: 'renderGeometry',
+            method: this.renderGeometry,
+            arg: []
+          })
+          break
+        case 'removePanels': //params.panels
+        case 'removeModuleField': //params:moduleField
+        case 'textureLoaded':
+        case 'alignOnSelectedEdge':
+        case 'newModuleField':
+        case 'reactivatePanel':
+        case 'deactivatePanels': //params.panels
+          methodList.push({
+            name: 'renderPanels',
+            method: this.renderPanels,
+            arg: []
+          })
+          break
+        case 'addPointToPolygon': //params.polygon,index
+        case 'removeObstacle': //params:obstacle
+        case 'removeRoof': //params:roof
+        case 'newObstacle':
+        case 'newRoofs':
+        case 'moveNodesZ': //params.nodes
+        case 'solveFlatness': //params.roof
+          methodList.push({
+            name: 'renderBuilding',
+            method: this.renderBuilding,
+            arg: []
+          })
+          methodList.push({
+            name: 'renderPanels',
+            method: this.renderPanels,
+            arg: []
+          })
+          break
+        case 'selectedRoofChange':
+          methodList.push({
+            name: 'renderFlatRoofs',
+            method: this.renderFlatRoofs,
+            arg: []
+          })
+          break
+        case 'subHandleSelectionChange':
+        case 'masterHandleSelectionChange':
+        case 'unselectAllHandle':
+          methodList.push({
+            name: 'renderBuilding',
+            method: this.renderBuilding,
+            arg: []
+          })
+          break
+        case 'parallelChange': //params.obstacle
+        case 'obstacleHeightChange': //params.obstacle
+          methodList.push({
+            name: 'renderObstacles',
+            method: this.renderObstacles,
+            arg: []
+          })
+          break
+        case 'roofInclineDirectionChange':
+          methodList.push({
+            name: 'renderBuilding',
+            method: this.renderBuilding,
+            arg: []
+          })
+          break
+        case 'backgroundTextureChange':
+          methodList.push({
+            name: 'initialiseThreeMap',
+            method: this.initialiseThreeMap,
+            arg: []
+          })
+          methodList.push({
+            name: 'updateProjectionMaterial',
+            method: this.updateProjectionMaterial,
+            arg: []
+          })
+          break
+      }
+      return methodList
+    },
+    async renderMethods(methodList) {
+      for (let item of methodList) {
+        await item.method(...item.arg)
+      }
+    },
+    renderGeometry() {
+      // if (this.mapConfig.sizeInMm) {
+      //   if (!this.meshes.backgroundMesh) {
+      this.renderBackground()
+      //   }
+      // }
+      this.renderBuilding()
+      this.renderPanels()
+      this.renderRoofsMargin()
+    },
+    renderBuilding() {
+      this.renderBase()
+      this.renderRoofs()
+      this.renderObstacles()
+      this.renderNodes()
+      this.renderEdges()
+      this.renderFlatRoofs()
+    },
+
+    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()
+      // let geometry = new THREE.PlaneGeometry(this.backgroundImagesizeInMm.width / 1000,this.backgroundImagesizeInMm.height / 1000)
+      // const backgroundMesh = new THREE.Mesh(geometry, this.material.roof)
+      // this.material.roof.project(backgroundMesh)
+      // this.scene.add(backgroundMesh)
+      // // this.scene.remove(this.meshes.backgroundMesh)
+      // this.meshes.backgroundMesh = backgroundMesh
+      // backgroundMesh.matrixAutoUpdate = true
+      }
+    },
+    applyTextureOnRoofs(){
+      this.roofs.forEach(roof=>{
+        //roofs
+        let mesh=this.meshes.roofMeshes[roof.id]
+        mesh.material=this.material.roof
+        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
+          this.material.roof.project(meshObstacle)
+        })
+      })
+      //background tile
+      this.meshes.backgroundMesh.material=this.material.roof
+      this.material.roof.project(this.meshes.backgroundMesh)
+    },
+    renderBase() {
+      //rendering of walls
+      //this.clearByType('baseMeshes')
+      this.clearRemovedOnes('baseMeshes')
+      let geometry
+      let mesh
+      this.roofs.forEach((roofPolygon) => {
+        //everythime the essencials data are changed, version goes up. we compare polygon version and mesh version to know if we have to rerender
+        if (
+          this.meshes.baseMeshes[roofPolygon.id] &&
+          this.meshes.baseMeshes[roofPolygon.id].userData.version <
+            roofPolygon.version
+        ) {
+          //this.clearMesh(this.meshes.baseMeshes[roofPolygon.id])
+          mesh = this.meshes.baseMeshes[roofPolygon.id]
+          geometry = mesh.geometry
+          geometry = updateBufferWallGeometry(roofPolygon, geometry)
+          mesh.geometry = geometry
+          mesh.updateMatrix()
+        }
+        if (!this.meshes.baseMeshes[roofPolygon.id]) {
+          //create
+          geometry = getBufferWallGeometry(roofPolygon)
+          mesh = new THREE.Mesh(geometry, this.material.wall)
+          mesh.userData.version = roofPolygon.version
+          mesh.userData.type = 'baseMeshes'
+          mesh.userData.meshId = roofPolygon.id
+          mesh.userData.polygonId = roofPolygon.id
+          mesh.matrixAutoUpdate = false
+          mesh.frustumCulled = false
+          //geometry.dispose()
+          //geometry=null
+          this.scene.add(mesh)
+          this.meshes.baseMeshes[roofPolygon.id] = mesh
+        }
+      })
+    },
+    updateRoofGeometry(geometry, roofPolygon) {
+      const roofOutline = roofPolygon.outline
+      let cropedHolesOutline = roofPolygon.holes
+        .filter((h) => h.layer == 'obstacle')
+        .map((h) => {
+          //let's crop obstacle with roof outline
+          const cropedHoleOutline =
+            intersectOutlines(h.outline, roofPolygon.outline)[0] || []
+          const outline = cropedHoleOutline.map((p) => {
+            return {
+              x: p.x,
+              y: p.y,
+              z: verticalProjectionOnPlane(
+                p,
+                roofPolygon.normalVector,
+                roofPolygon.flatOutline[0]
+              ).z
+            }
+          })
+          return outline
+        })
+
+      cropedHolesOutline = cropedHolesOutline.filter((outline) => !!outline)
+      geometry = updateBufferRoofGeometry(
+        roofOutline,
+        cropedHolesOutline,
+        geometry
+      )
+
+      return geometry
+    },
+    createRoofGeometry(roofPolygon) {
+      const roofOutline = roofPolygon.outline
+      let cropedHolesOutline = roofPolygon.holes
+        .filter((h) => h.layer == 'obstacle')
+        .map((h) => {
+          //let's crop obstacle with roof outline
+          const cropedHoleOutline =
+          intersectOutlines(h.outline, roofPolygon.outline)[0] || []
+          const outline = cropedHoleOutline.map((p) => {
+            return {
+              x: p.x,
+              y: p.y,
+              z: verticalProjectionOnPlane(
+                p,
+                roofPolygon.normalVector,
+                roofPolygon.flatOutline[0]
+              ).z
+            }
+          })
+          return outline
+        })
+
+      cropedHolesOutline = cropedHolesOutline.filter((outline) => !!outline)
+      let geometry = getBufferRoofGeometry(roofOutline, cropedHolesOutline)
+
+      return geometry
+    },
+    renderRoofs() {
+      this.clearRemovedOnes('roofMeshes')
+      this.roofs.forEach((roofPolygon) => {
+        let mesh
+        let geometry
+        if (
+          this.meshes.roofMeshes[roofPolygon.id] &&
+          this.meshes.roofMeshes[roofPolygon.id].userData.version <
+            roofPolygon.version
+        ) {
+          //update mesh
+          mesh = this.meshes.roofMeshes[roofPolygon.id]
+          geometry = mesh.geometry
+          geometry = this.updateRoofGeometry(geometry, roofPolygon)
+          mesh.geometry = geometry
+          if(this.material.roof){
+            mesh.material=this.material.roof
+            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
+            mesh.userData.type = 'roofMeshes'
+            mesh.userData.meshId = roofPolygon.id
+            mesh.userData.polygonId = roofPolygon.id
+            mesh.matrixAutoUpdate = false
+            this.scene.add(mesh)
+            if(this.material.roof){
+              mesh.material=this.material.roof
+              this.material.roof.project(mesh)
+            }
+            mesh.frustumCulled = false
+            this.meshes.roofMeshes[roofPolygon.id] = mesh
+          }
+        }
+      })
+    },
+    renderFlatRoofs() {
+      //this.clearRemovedOnes('flatRoofMeshes')
+      this.clearByType('flatRoofMeshes')
+      this.roofs.forEach((roofPolygon) => {
+        //if(this.meshes.flatRoofMeshes[roofPolygon.id])
+        if(roofPolygon.maximumGap < maximumGapLimit) return
+        let geometry = getBufferRoofGeometry(roofPolygon.flatOutline)
+        if (geometry) {
+          const material =this.material.curvedRoof
+          const mesh = new THREE.Mesh(geometry, material)
+          geometry.dispose()
+          geometry = null
+          mesh.itemData = roofPolygon
+          mesh.frustumCulled = false
+          this.scene.add(mesh)
+          this.meshes.flatRoofMeshes[roofPolygon.id] = mesh
+        }
+      })
+    },
+    renderRoofsMargin() {
+      this.clearByType('roofMarginMeshes')
+
+      if (this.selectedTool == 'selectMargin') {
+        this.roofs.forEach((roofPolygon) => {
+          const geometries = getBufferRoofMarginGeometry(roofPolygon)
+
+          geometries.forEach((geometry, index) => {
+            if (geometry) {
+              const marginColor = roofPolygon.margins.isSameMargin
+                ? colorArrayBase[0]
+                : colorArrayBase[index % colorArrayBase.length]
+              let material = new THREE.MeshPhongMaterial({
+                color: marginColor,
+                specular: 0x009900,
+                shininess: 0,
+                flatShading: true,
+                side: THREE.DoubleSide,
+                transparent: true,
+                opacity: 0.8
+              })
+              const mesh = new THREE.Mesh(geometry, material)
+              geometry.dispose()
+              this.scene.add(mesh)
+              this.meshes.roofMarginMeshes[roofPolygon.id + '_' + index] = mesh
+            }
+          })
+          roofPolygon.holes.forEach((obstaclePolygon) => {
+            const geometries = getBufferRoofMarginGeometry(
+              obstaclePolygon,
+              roofPolygon
+            )
+            geometries.forEach((geometry, index) => {
+              if (geometry) {
+                const marginColor = obstaclePolygon.margins.isSameMargin
+                  ? colorArrayBase[0]
+                  : colorArrayBase[index % colorArrayBase.length]
+                let material = new THREE.MeshPhongMaterial({
+                  color: marginColor,
+                  specular: 0x009900,
+                  shininess: 0,
+                  flatShading: true,
+                  side: THREE.DoubleSide,
+                  transparent: true,
+                  opacity: 0.8
+                })
+                const mesh = new THREE.Mesh(geometry, material)
+                geometry.dispose()
+                geometry = null
+                material.dispose()
+                material = null
+                this.scene.add(mesh)
+                this.meshes.roofMarginMeshes[
+                  obstaclePolygon.id + '_' + roofPolygon.id + '_' + index
+                ] = mesh
+              }
+            })
+          })
+        })
+      }
+    },
+    renderNodes() {
+      let geometry
+      if (this.meshes.nodeMeshes) {
+        geometry = this.meshes.nodeMeshes.geometry
+        geometry.attributes.position.needsUpdate = true
+      } else {
+        geometry = new THREE.BufferGeometry()
+      }
+      // let geometry = new THREE.SphereGeometry(node3DRadius, 4, 4)
+      const vertices = []
+      this.nodes
+        .filter((node) => node.layer == 'roof')
+        .forEach((node) => {
+          vertices.push(node.x / 1000, node.y / 1000, node.z / 1000)
+        })
+
+      if (
+        geometry.attributes.position &&
+        geometry.attributes.position.array.length <= vertices.length
+      ) {
+        let positions = geometry.attributes.position.array
+        for (let k in vertices) {
+          positions[k] = vertices[k]
+        }
+        geometry.setDrawRange(0, vertices.length / 3)
+      } else {
+        geometry.setAttribute(
+          'position',
+          new THREE.Float32BufferAttribute(vertices, 3)
+        )
+      }
+      let material = this.material.node
+      const nodeMeshes = new THREE.Points(geometry, material)
+      nodeMeshes.userData.version = 0
+      nodeMeshes.userData.type = 'nodeMeshes'
+      nodeMeshes.userData.meshId = null
+      nodeMeshes.userData.polygonId = null
+      nodeMeshes.matrixAutoUpdate = false
+      this.meshes.nodeMeshes = nodeMeshes
+      this.scene.add(nodeMeshes)
+     
+    },
+    renderEdges() {
+      this.clearEdgesRemovedOnes('edgeMeshes')
+      let cylinder
+      //this.clearByType('edgeMeshes')
+      // const material = new THREE.LineBasicMaterial( { color: beamColor,transparent:true,opacity:beamOpacity ,sizeAttenuation: true} );
+      // material.linewidth=5
+      const material = this.material.edge
+      this.edges
+        .filter((edge) => edge.layer == 'roof')
+        .forEach((edge) => {
+          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()
+            //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.userData.edgeId = edge.id
+            cylinder.matrixAutoUpdate = false
+            this.meshes.edgeMeshes[edge.id] = cylinder
+            this.scene.add(cylinder)
+
+          }
+        })
+    },
+
+    renderObstacles() {
+      this.clearByType('obstacleMeshes')
+
+      this.roofs.forEach((roofPolygon) => {
+        roofPolygon.holes
+          .filter((poly) => poly.layer == 'obstacle')
+          .forEach((obstaclePolygon) => {
+            const geometry = getBufferObstacleGeometry(
+              obstaclePolygon,
+              roofPolygon
+            )
+
+            const geometrySide = getBufferObstacleSideGeometry(
+              obstaclePolygon,
+              roofPolygon
+            )
+            if (geometry && geometrySide) {
+              const mesh = new THREE.Mesh(geometry, this.material.roof)
+              const meshSide = new THREE.Mesh(geometrySide, material.wall)
+              geometry.dispose()
+              geometrySide.dispose()
+              if(this.material.roof){
+                mesh.material=this.material.roof
+                this.material.roof.project(mesh)
+              }
+              mesh.matrixAutoUpdate = false
+              meshSide.matrixAutoUpdate = false
+              mesh.frustumCulled = false
+              meshSide.frustumCulled = false
+              this.scene.add(mesh)
+              this.scene.add(meshSide)
+              this.meshes.obstacleMeshes[
+                obstaclePolygon.id + '-' + roofPolygon.id + '_top'
+              ] = mesh
+              this.meshes.obstacleMeshes[
+                obstaclePolygon.id + '-' + roofPolygon.id + '_side'
+              ] = meshSide
+            }
+          })
+      })
+    },
+    renderModuleFields() {
+      this.clearByType('moduleFieldsMeshes')
+
+      this.moduleFields.forEach((moduleFieldPolygon) => {
+        const geometry = getBufferModuleFieldGeometry(moduleFieldPolygon)
+        if (geometry) {
+          const mesh = new THREE.Mesh(geometry, this.material.moduleField)
+          geometry.dispose()
+          mesh.matrixAutoUpdate = false
+          this.scene.add(mesh)
+          this.meshes.moduleFieldsMeshes[moduleFieldPolygon.id] = mesh
+        }
+      })
+    },
+    renderPanels() {
+      this.clearRemovedOnes('panelsMeshes')
+      //clear UserDeactivatedModules
+      Object.values(this.meshes.panelsMeshes).forEach((mesh) => {
+        if (
+          this.polygons.find(
+            (poly) =>
+              poly.id == mesh.userData.polygonId &&
+              poly.layer == 'user_deactivated_panel'
+          )
+        ) {
+          this.clearMesh(mesh)
+        }
+      })
+
+      this.panels.forEach((panelPolygon) => {
+         
+        //definition of the material
+         let material = this.material.panel['default_'+this.module_texture_version_id]
+         console.log("material Texture",panelPolygon,panelPolygon.moduleField,panelPolygon.moduleField.pvData)
+         if (panelPolygon.moduleField.pvData) {
+           let pvId = panelPolygon.moduleField.pvData.id
+           if (this.material.panel[pvId]) {
+             material = this.material.panel[pvId]
+           }
+         }else if(panelPolygon.moduleField.data){
+          let pvId = panelPolygon.moduleField.data.component_id_pv_module
+          if (this.material.panel[pvId]) {
+            material = this.material.panel[pvId]
+          }
+         }
+
+        if (
+          !this.meshes.panelsMeshes[panelPolygon.id + '_top'] ||
+          !this.meshes.panelsMeshes[panelPolygon.id + '_side'] 
+        ) {
+          const geometry = getBufferPanelGeometry(panelPolygon)
+          const geometrySide = getBufferPanelSideGeometry(panelPolygon)
+
+          if (geometry && geometrySide) {
+
+              const mesh = new THREE.Mesh(geometry, material)
+              const meshSide = new THREE.Mesh(geometrySide, this.material.wall)
+              mesh.userData.version = panelPolygon.version
+              mesh.userData.type = 'panelsMeshes'
+              mesh.userData.meshId = panelPolygon.id + '_top'
+              mesh.userData.polygonId = panelPolygon.id
+              meshSide.userData.version = panelPolygon.version
+              meshSide.userData.type = 'panelsMeshes'
+              meshSide.userData.meshId = panelPolygon.id + '_side'
+              meshSide.userData.polygonId = panelPolygon.id
+              geometry.dispose()
+              geometrySide.dispose()
+              this.scene.add(mesh)
+              this.scene.add(meshSide)
+              mesh.matrixAutoUpdate = false
+              meshSide.matrixAutoUpdate = false
+              this.meshes.panelsMeshes[panelPolygon.id + '_top'] = mesh
+              this.meshes.panelsMeshes[panelPolygon.id + '_side'] = meshSide
+          }  
+        }else{
+          const topMesh=this.meshes.panelsMeshes[panelPolygon.id + '_top']
+          const sideMesh=this.meshes.panelsMeshes[panelPolygon.id + '_side']
+          if(panelPolygon.version>topMesh.userData.version){
+            topMesh.geometry=updateBufferPanelGeometry(panelPolygon,topMesh.geometry)
+            sideMesh.geometry=updateBufferPanelSideGeometry(panelPolygon,sideMesh.geometry)
+          }
+          let pvId = panelPolygon.moduleField.pvData.id
+          topMesh.material= material
+          
+        }
+      })
+    },
+    async updateProjectionMaterial(){
+      await this.loadProjectionMaterial()
+      this.applyTextureOnRoofs()
+      this.renderBackground()
+    },
+    async loadProjectionMaterial() {
+      if(!this.layoutSettings.base64_image_url) return
+      const _this=this
+      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 averageLat=(_this.layoutSettings.layout_latitude+_this.layoutSettings.background_map_settings.lat)/2
+                // let deltaLat=_this.layoutSettings.background_map_settings.lat-_this.layoutSettings.layout_latitude
+                // let deltaLng=_this.layoutSettings.background_map_settings.lng-_this.layoutSettings.layout_longitude
+                // let {x:x_mm,y:y_mm}=deltaLatLngToDistance(deltaLat,deltaLng,averageLat)
+                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
+    },
+    setCameraGlobalPosition() {
+      if(this.roofs.length==0)return
+      let bounds=this.roofsBounds
+      let targetVector={x:(bounds.xMax+bounds.xMin)/2000,y:(bounds.yMax+bounds.yMin)/2000,z:0}
+      let objectRadius_m=Math.max((bounds.xMax-bounds.xMin)/2000,(bounds.yMax-bounds.yMin)/2000)
+      let distance =
+          5 + objectRadius_m / Math.sin(((this.camera.fov / 2) * Math.PI) / 180)
+      let cameraMoveVector = { x: 0, y: 0, z: distance }
+      const positionVector = addVector(targetVector, cameraMoveVector)
+      const position = [
+        positionVector.x,
+        positionVector.y - distance,
+        positionVector.z
+      ]
+      let target=[
+        targetVector.x,
+        targetVector.y,
+        targetVector.z
+      ]
+     
+      this.setTweenTo(position,target)
+    },
+    setCameraOrthogonalTo(polygon) {
+      if (polygon) {
+        let polygonRef = polygon
+        const targetVector = polygonRef.meanPoint
+        const target = [
+          targetVector.x / 1000,
+          targetVector.y / 1000,
+          targetVector.z / 1000
+        ]
+        const positionVector = addVector(
+          polygonRef.meanPoint,
+          multiplyVector(45000, polygonRef.normalVector)
+        )
+        const position = [
+          positionVector.x / 1000,
+          positionVector.y / 1000 - 1,
+          positionVector.z / 1000
+        ]
+        this.setTweenTo(position,target)
+      }
+    },
+    setCameraSideTo(polygon) {
+      if (polygon) {
+        let polygonRef = polygon
+        const targetVector = polygonRef.meanPoint
+        const target = [
+          targetVector.x / 1000,
+          targetVector.y / 1000,
+          targetVector.z / 1000
+        ]
+        let sideVector={x:-Math.cos((polygonRef.direction+45)*Math.PI/180),y:Math.sin((polygonRef.direction+45)*Math.PI/180),z: 0}
+        const positionVector = addVector(
+          polygonRef.meanPoint,
+          multiplyVector(45000, sideVector)
+        )
+        const position = [
+          positionVector.x / 1000,
+          positionVector.y / 1000,
+          positionVector.z / 1000 +5
+        ]
+        this.setTweenTo(position,target)
+      }
+    },
+    setTweenTo(position,target){
+      if (this.orbitControl) {
+        this.tweenOrbit = new TWEEN.Tween(this.orbitControl.target)
+          .to({ x: target[0], y: target[1], z: target[2] }, 2000)
+          .easing(TWEEN.Easing.Sinusoidal.Out)
+          .onUpdate(() => {
+            this.orbitControl.update()
+          })
+          .start()
+      }
+      if (this.camera) {
+        this.tweenCamera = new TWEEN.Tween(this.camera.position)
+          .to({ x: position[0], y: position[1], z: position[2] }, 2000)
+          .easing(TWEEN.Easing.Sinusoidal.Out)
+          .onUpdate(() => {
+            this.orbitControl.update()
+          })
+          .start()
+      }
+    },
+    getCanvasOffset() {
+      if (!this.$refs.canvas3DContainer) return { top: 0, left: 0 }
+      var box = this.$refs.canvas3DContainer.getBoundingClientRect()
+
+      var body = document.body
+      var docEl = document.documentElement
+
+      var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop
+      var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft
+
+      var clientTop = docEl.clientTop || body.clientTop || 0
+      var clientLeft = docEl.clientLeft || body.clientLeft || 0
+
+      var top = box.top + scrollTop - clientTop
+      var left = box.left + scrollLeft - clientLeft
+      body = null
+      docEl = null
+      box = null
+      return { top: Math.round(top), left: Math.round(left) }
+    },
+    onWindowResize() {
+      this.camera.aspect = window.innerWidth / window.innerHeight
+      this.camera.updateProjectionMatrix()
+      this.canvasOffset = this.getCanvasOffset()
+      this.canvasHeight = this.$refs.canvas3DContainer.clientHeight
+      this.canvasWidth = this.$refs.canvas3DContainer.clientWidth
+      this.resizeCanvasToDisplaySize()
+      //this.renderer.setSize(window.innerWidth / 2, window.innerHeight / 2)
+    },
+    resizeCanvasToDisplaySize() {
+      let canvas = this.renderer.domElement
+      // look up the size the canvas is being displayed
+      const width = canvas.clientWidth
+      const height = canvas.clientHeight
+
+      // adjust displayBuffer size to match
+      if (canvas.width !== width || canvas.height !== height) {
+        // you must pass false here or three.js sadly fights the browser
+        this.renderer.setSize(width, height, false)
+        this.renderer.setViewport(0, 0, width, height)
+
+        this.camera.aspect = width / height
+        this.camera.updateProjectionMatrix()
+
+        // update any render target sizes here
+      }
+      canvas = null
+    },
+    clearMesh(mesh) {
+      if (!mesh) return
+      this.scene.remove(mesh)
+      if (mesh.geometry && mesh.geometry.dispose) {
+        mesh.geometry.dispose()
+        mesh.geometry = null
+      }
+      if (mesh.material && mesh.material.dispose) {
+        mesh.material.dispose()
+        mesh.material = null
+      }
+      if (
+        mesh.userData.meshId &&
+        this.meshes[mesh.userData.type][mesh.userData.meshId]
+      ) {
+        delete this.meshes[mesh.userData.type][mesh.userData.meshId]
+      } else {
+        this.meshes[mesh.userData.type] = null
+      }
+      mesh = null
+    },
+    clearEdgesRemovedOnes() {
+      Object.values(this.meshes['edgeMeshes']).forEach((mesh) => {
+        if (!this.edgeIds.includes(mesh.userData.edgeId)) {
+          this.clearMesh(mesh)
+        }
+      })
+    },
+    clearNodesRemovedOnes() {
+      Object.values(this.meshes['nodeMeshes']).forEach((mesh) => {
+        if (!this.nodeIds.includes(mesh.userData.nodeId)) {
+          this.clearMesh(mesh)
+        }
+      })
+    },
+    clearRemovedOnes(type) {
+      Object.values(this.meshes[type]).forEach((mesh) => {
+        if (!this.polygonIds.includes(mesh.userData.polygonId)) {
+          this.clearMesh(mesh)
+        }
+      })
+    },
+    clearByType(type) {
+      Object.values(this.meshes[type]).forEach((mesh) => {
+        mesh.geometry.dispose()
+        mesh.geometry = null
+        if (mesh.material.dispose) {
+          mesh.material.dispose()
+        }
+        mesh.material = null
+        this.scene.remove(mesh)
+      })
+      this.meshes[type] = {}
+      this.renderer.renderLists.dispose()
+    },
+    loadNewTexture(){
+      Object.values(this.pvDataMemo).forEach((component) => {
+        const pvId = component.id
+        if (!this.material.panel[pvId]) {
+          if (!component.texture_img_url) {
+            this.material.panel[pvId] = this.material.panel.default
+          } else {           
+            let texture = this.loader.load(component.texture_img_url)
+            this.material.panel[pvId] = new THREE.MeshBasicMaterial({
+              map: texture,
+              side: THREE.DoubleSide
+            })
+          }
+        }
+      })
+    },
+    async loadTextureFromModuleFields(){
+      for(let k=0;k<this.moduleFields.length;k++){
+        let mf=this.moduleFields[k]
+        const pvId = mf.data.component_id_pv_module
+        if (!this.material.panel[pvId]) {
+          console.log('TEXTURE NOT YET in material',this.material)
+          if (!mf.data.texture_img_url) {
+            console.log('no texture for this mf=>go to default')
+            this.material.panel[pvId] = this.material.panel.default
+          } else {    
+            console.log('load texture ...')       
+            let texture = await this.loader.load(mf.data.texture_img_url)
+            this.material.panel[pvId] = new THREE.MeshBasicMaterial({
+              map: texture,
+              side: THREE.DoubleSide
+            })
+          }
+        }
+      }
+    }
+  },
+  watch: {
+    pvDataMemo: {
+      handler(val) {
+        this.loadNewTexture()
+      }
+    },
+    'material.panel':{
+      handler(){
+        this.renderPanels()
+      }
+    },
+    geometryEventsToDo(val) {
+      if (val.length > 0) {
+        this.refreshRendering()
+      }
+    }
+  },
+  beforeDestroy() {
+    if (this.tweenOrbit) {
+      this.tweenOrbit = null
+    }
+    if (this.tweenCamera) {
+      this.tweenCamera = null
+    }
+    clearThreeObjects(this.scene)
+    if(this.three_map){
+      this.three_map.clear()
+      clearThreeObjects(this.three_map)
+    }
+    this.renderer.clear()
+    this.renderer.dispose()
+    this.orbitControl.dispose()
+
+    this.renderer = null
+    this.scene = null
+    this.camera = null
+    this.cameraprojection = null
+    this.material.forEach((m) => m.dispose())
+    this.material = null
+    this.orbitControl = null
+    this.raycaster = null
+    this.loader = null
+    this.provider = null
+    window.removeEventListener('resize', this.onWindowResize, false)
+  }
+}