@eturnity/eturnity_3d 6.29.0 → 6.29.2

package/src/helper/renderMixin.js

@@ -1,46 +1,10 @@
-import {mapState, mapGetters } from 'vuex'
+import { mapState, mapGetters } from 'vuex'
+import renderMixin from './render'
+import cameraMixin from './cameraMixin'
 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',
-  'roofMeshes',
-  'flatRoofMeshes',
-  'obstacleMeshes',
-  'panelsMeshes',
-  'nodeMeshes',
-  'edgeMeshes',
-  'roofMarginMeshes',
-  'moduleFieldsMeshes'
-]
 
 export default {
+  mixins: [renderMixin, cameraMixin],
   data() {
     return {
       meshes: {
@@ -57,7 +21,7 @@ export default {
       lastTic: new Date().getTime() * 1e4,
       //lastTic:(new Date()).getTime()
       lastGeometryEventIdDone: -1,
-      backgroundImagesizeInMm:null,
+      backgroundImagesizeInMm: null
     }
   },
   created() {
@@ -72,7 +36,7 @@ export default {
       roofMarginMeshes: {},
       moduleFieldsMeshes: {}
     }
-    if(this.wallColor){
+    if (this.wallColor) {
       let wallColor = new THREE.Color(this.wallColor)
       this.material.wall.color.set(wallColor)
     }
@@ -80,7 +44,8 @@ export default {
 
   computed: {
     ...mapState({
-      moduleTextureVersionId: (state) => state.threeDModule.moduleTextureVersionId,
+      moduleTextureVersionId: (state) =>
+        state.threeDModule.moduleTextureVersionId,
       wallColor: (state) => state.threeDModule.wallColor,
       selectedMapLayer: (state) => state.threeDModule.selectedMapLayer,
       pvDataMemo: (state) => state.threeDModule.pvDataMemo
@@ -89,13 +54,13 @@ export default {
       selectedTool: 'getSelectedTool',
       roofs: 'getRoofs',
       lastGeometryEventId: 'getLastGeometryEventId',
-      roofsBounds:'getRoofsBounds',
+      roofsBounds: 'getRoofsBounds',
       geometryEvents: 'getGeometryEvents'
     }),
-    layerKey(){
-      if(this.selectedMapLayer){
+    layerKey() {
+      if (this.selectedMapLayer) {
         return this.selectedMapLayer.key
-      }else{
+      } else {
         return null
       }
     },
@@ -139,8 +104,7 @@ export default {
           this.renderMethods(methodList)
         }
       }
-      
-      
+
       this.lastGeometryEventIdDone = this.lastGeometryEventId
     },
     renderingMethodsByEvent(geometryEvent) {
@@ -245,13 +209,13 @@ export default {
             arg: []
           })
           break
-          case 'clearPanelFromChangingRoofs':
-            methodList.push({
-              name: 'clearPanelsFromChangingRoofs',
-              method: this.clearPanelsFromChangingRoofs,
-              arg: [params.roofIds]
-            })
-            break
+        case 'clearPanelFromChangingRoofs':
+          methodList.push({
+            name: 'clearPanelsFromChangingRoofs',
+            method: this.clearPanelsFromChangingRoofs,
+            arg: [params.roofIds]
+          })
+          break
       }
       return methodList
     },
@@ -276,675 +240,33 @@ export default {
       this.renderFlatRoofs()
     },
 
-    renderBackground() {
-      if(!this.background_map){
-        this.initialiseThreeMap()
-      }
-    },
-    applyTextureOnRoofs(){
-      this.roofs.forEach(roof=>{
+    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){
+        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)
-        })
-      })
-    },
-    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
-            }
+        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)
           })
-          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
-            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
-            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
-              if(this.material.roof.project) 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
-                if(this.material.roof.project) 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) => {
-        if(!moduleFieldPolygon.data.number_of_panels_override && !this.areModuleFieldsVisible )return
-        const geometry = getBufferModuleFieldGeometry(moduleFieldPolygon)
-        if (geometry) {
-          const mesh = new THREE.Mesh(geometry, this.material.moduleField)
-          geometry.dispose()
-          mesh.matrixAutoUpdate = false
-          mesh.userData.version = moduleFieldPolygon.version
-          mesh.userData.type = 'moduleFieldsMeshes'
-          mesh.userData.meshId = moduleFieldPolygon.id
-          mesh.userData.polygonId = moduleFieldPolygon.id
-          this.scene.add(mesh)
-          this.meshes.moduleFieldsMeshes[moduleFieldPolygon.id] = mesh
-        }
-      })
-    },
-    clearPanelsFromChangingRoofs(roofIds){
-      const roofs=this.polygons.filter(polygon=>roofIds.includes(polygon.id))
-      roofs.forEach(roof=>roof.moduleFields.forEach(mf=>mf.panels.forEach(panel=>{
-            let meshTop=this.meshes.panelsMeshes[panel.id+'_top']
-            let meshSide=this.meshes.panelsMeshes[panel.id+'_side']
-            if(meshTop || meshSide){
-              this.clearMesh(meshTop)
-              this.clearMesh(meshSide)
-            }
-          })
-        )
-      )
-    },
-    renderPanels() {
-      this.clearRemovedOnes('panelsMeshes')
-      Object.values(this.meshes.panelsMeshes).forEach((mesh) => {
-        //clear UserDeactivatedModules
-        if (
-          this.polygons.find(
-            (poly) =>
-              poly.id == mesh.userData.polygonId &&
-              poly.layer == 'user_deactivated_panel'
-          )
-        ) {
-          this.clearMesh(mesh)
-        }
-        //clear panel on moduleField with overriden number of panel
-        let panel=this.polygons.find(poly=>mesh.userData.polygonId==poly.id)
-        if (
-          !panel || panel.moduleField.data.number_of_panels_override
-        ) {
-          this.clearMesh(mesh)
-        }
-      })
-
-      this.panels.forEach((panelPolygon) => {
-        //definition of the material
-        if(panelPolygon.moduleField.data.number_of_panels_override) return
-         let material = this.material.panel['default_'+this.moduleTextureVersionId]
-         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)
-          }
-          topMesh.material= material
-          
-        }
-      })
-    },
-    async updateProjectionMaterial(){
+    async updateProjectionMaterial() {
       await this.loadProjectionMaterial()
       this.applyTextureOnRoofs()
       this.renderBackground()
     },
-    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 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(() => {
-            if(this.orbitControl){
-              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(() => {
-            if(this.orbitControl){
-              this.orbitControl.update()
-            } 
-          })
-          .start()
-      }
-    },
     getCanvasOffset() {
       if (!this.$refs.canvas3DContainer) return { top: 0, left: 0 }
       var box = this.$refs.canvas3DContainer.getBoundingClientRect()
@@ -992,94 +314,6 @@ export default {
         // 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]) {
-          if (!mf.data.texture_img_url) {
-            this.material.panel[pvId] = this.material.panel.default
-          } else {    
-            let texture = await this.loader.load(mf.data.texture_img_url)
-            this.material.panel[pvId] = new THREE.MeshBasicMaterial({
-              map: texture,
-              side: THREE.DoubleSide
-            })
-          }
-        }
-      }
     }
   },
   watch: {
@@ -1092,8 +326,8 @@ export default {
         this.loadNewTexture()
       }
     },
-    'material.panel':{
-      handler(){
+    'material.panel': {
+      handler() {
         this.renderPanels()
       }
     },
@@ -1110,10 +344,10 @@ export default {
     if (this.tweenCamera) {
       this.tweenCamera = null
     }
-    clearThreeObjects(this.scene)
-    if(this.three_map){
+    this.clearThreeObjects(this.scene)
+    if (this.three_map) {
       this.three_map.clear()
-      clearThreeObjects(this.three_map)
+      this.clearThreeObjects(this.three_map)
     }
     this.renderer.clear()
     this.renderer.dispose()