@eturnity/eturnity_3d 6.34.4 → 6.34.6-EPDM-8077.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eturnity/eturnity_3d",
   "private": false,
-  "version": "6.34.4",
+  "version": "6.34.6-EPDM-8077.0",
   "main": "dist/main.js",
   "scripts": {
     "dev": "vue-cli-service serve --skip-plugins @vue/cli-plugin-eslint",
@@ -19,6 +19,7 @@
     "geo-three": "^0.1.11",
     "leaflet": "^1.8.0",
     "leaflet.gridlayer.googlemutant": "^0.14.0",
+    "lodash": "4.17.21",
     "svd-js": "^1.1.1",
     "three": "^0.149.0",
     "three-projected-material": "2.2.1",

package/src/components/ThreeCanvasViewer.vue

@@ -10,7 +10,12 @@
 <script>
 import { mapActions, mapState, mapGetters, mapMutations } from 'vuex'
 import * as THREE from 'three'
-import { addVector, multiplyVector,updateComputedGeometryPolygon, normalizeVector } from '@eturnity/eturnity_maths'
+import {
+  addVector,
+  multiplyVector,
+  updateComputedGeometryPolygon,
+  normalizeVector
+} from '@eturnity/eturnity_maths'
 
 import threeMixin from '../helper/threeMixin'
 import materialMixin from '../helper/materialMixin'
@@ -72,7 +77,6 @@ export default {
     this.renderGeometry()
     this.onWindowResize()
     this.updateProjectionMaterials()
-    this.animate()
     this.$root.$on('on-roofSelected', (polygon) =>
       this.setCameraOrthogonalTo(polygon)
     )
@@ -81,6 +85,7 @@ export default {
     const polygon = this.polygons.find((p) => p.id == this.uuid)
     this.setCamera(polygon, this.view_mode)
     this.isReady.geometry = true
+    this.render()
   },
   computed: {
     ...mapState({
@@ -153,9 +158,9 @@ export default {
             geometry.boundingSphere.center.z
           ]
           let objectRadius = geometry.boundingSphere.radius
-          
+
           distance =
-          5+(objectRadius) / (Math.sin(((this.camera.fov / 2) * Math.PI) / 180))
+            5 + objectRadius / Math.sin(((this.camera.fov / 2) * Math.PI) / 180)
         }
 
         polygonRef = updateComputedGeometryPolygon(polygonRef)
@@ -197,12 +202,12 @@ export default {
             //if flat roof=> go south
             horizontalVector.y = 1
           }
-          horizontalVector=normalizeVector(horizontalVector)
+          horizontalVector = normalizeVector(horizontalVector)
           // let distanceCoefficient = 2
           // if(flatRoof){
           //   distanceCoefficient = 1.5
           // }
-          cameraMoveVector = multiplyVector(distance * 1000 , horizontalVector)
+          cameraMoveVector = multiplyVector(distance * 1000, horizontalVector)
         }
 
         const positionVector = addVector(polygonRef.meanPoint, cameraMoveVector)
@@ -253,14 +258,14 @@ export default {
     },
     render() {
       this.renderer.clear()
-      if (this.orbitControl) {
-        this.orbitControl.target.set(
-          this.orbitControl.target.x,
-          this.orbitControl.target.y,
-          2
-        )
-        this.orbitControl.update()
-      }
+      // if (this.orbitControl) {
+      //   this.orbitControl.target.set(
+      //     this.orbitControl.target.x,
+      //     this.orbitControl.target.y,
+      //     2
+      //   )
+      //   this.orbitControl.update()
+      // }
       if (['top', 'global'].includes(this.view_mode)) {
         this.renderer.render(this.scene, this.orthographicCamera)
       } else {
@@ -296,7 +301,7 @@ export default {
   height: 100%;
 }
 
-.canvas3DContainer>canvas {
+.canvas3DContainer > canvas {
   width: 100%;
   height: 100%;
 }

package/src/helper/materials.js

@@ -13,6 +13,11 @@ material.wall = new THREE.MeshLambertMaterial({
   side: THREE.DoubleSide
 })
 
+material.panelSide = new THREE.MeshLambertMaterial({
+  color: 0xdddddd,
+  side: THREE.DoubleSide
+})
+
 // TODO get Canvas image from TwoD
 material.obstacle = new THREE.MeshPhongMaterial({
   color: 0xff0000,

package/src/helper/render/base.js

@@ -5,12 +5,17 @@ import {
 } from './geometryHandler'
 export default {
   methods: {
+    data(){
+      return {
+        mergedBaseMesh:null
+      }
+    },
     renderBase() {
       //rendering of walls
-      //this.clearByType('baseMeshes')
       this.clearRemovedOnes('baseMeshes')
       let geometry
       let mesh
+      let baseGeometries=[]
       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 (
@@ -18,7 +23,6 @@ export default {
           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)
@@ -35,12 +39,17 @@ export default {
           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
         }
+        baseGeometries.push(this.meshes.baseMeshes[roofPolygon.id].geometry)
       })
+
+      this.updateOrCreateMergedMesh(
+        this.mergedBaseMesh,
+        baseGeometries,
+        this.material.wall
+      )
+
     }
   }
 }

package/src/helper/render/index.js

@@ -15,6 +15,7 @@ import texture from './texture'
 import projectionMaterial from './projectionMaterial'
 import tile from './tile'
 import tileProjection from './tileProjection'
+import mergedGeometry from './mergedGeometry'
 
 export default {
   //mixins:[node,background,clear,edge,loader,margin,moduleField,obstacle,panel,roof,base]
@@ -35,6 +36,7 @@ export default {
     mapProjection,
     projectionMaterial,
     tile,
-    tileProjection
+    tileProjection,
+    mergedGeometry
   ]
 }

package/src/helper/render/loader.js

@@ -13,8 +13,10 @@ export default {
             let texture = this.loader.load(component.texture_img_url)
             this.material.panel[pvId] = new THREE.MeshBasicMaterial({
               map: texture,
-              side: THREE.DoubleSide,
-              transparent: true
+              side: THREE.FrontSide,
+              transparent: false,
+              magFilter:THREE.NearestFilter,
+              minFilter:THREE.NearestFilter
             })
           }
         }
@@ -31,8 +33,10 @@ 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,
-              transparent: true
+              side: THREE.FrontSide,
+              transparent: false,
+              magFilter:THREE.NearestFilter,
+              minFilter:THREE.NearestFilter
             })
           }
         }

package/src/helper/render/mergedGeometry.js

@@ -0,0 +1,99 @@
+import * as THREE from 'three'
+
+export default {
+  methods: {
+    updateMergedGeometry(geometries, mergedGeometry) {
+      const mergedVertices = []
+      const mergedNormals = []
+      const mergedUvs = []
+
+      geometries.forEach((geometry) => {
+        const positions = geometry.attributes.position.array
+        const normals = geometry.attributes.normal.array
+
+        mergedVertices.push(...positions)
+        mergedNormals.push(...normals)
+
+        if (geometry.attributes.uv) {
+          const uvs = geometry.attributes.uv.array
+          mergedUvs.push(...uvs)
+        }
+      })
+
+      //position
+      if (
+        mergedGeometry.attributes.position &&
+        mergedGeometry.attributes.uv &&
+        mergedGeometry.attributes.normal &&
+        mergedGeometry.attributes.position.array.length >=
+          mergedVertices.length &&
+        mergedGeometry.attributes.uv.array.length >= mergedUvs.length &&
+        mergedGeometry.attributes.normal.array.length >= mergedNormals.length
+      ) {
+        mergedGeometry.attributes.position.array.set(mergedVertices)
+        mergedGeometry.attributes.uv.array.set(mergedUvs)
+        mergedGeometry.attributes.normal.array.set(mergedNormals)
+        
+        mergedGeometry.setDrawRange(0, mergedVertices.length / 3)
+        mergedGeometry.setDrawRange(0, mergedUvs.length / 2)
+        mergedGeometry.setDrawRange(0, mergedNormals.length / 3)
+      } else {
+        mergedGeometry.dispose()
+        mergedGeometry = null
+        mergedGeometry = this.createMergedGeometry(geometries)
+      }
+      mergedGeometry.attributes.position.needsUpdate = true
+      mergedGeometry.attributes.normal.needsUpdate = true
+      mergedGeometry.needsUpdate = true
+      return mergedGeometry
+    },
+    createMergedGeometry(geometries) {
+      const mergedGeometry = new THREE.BufferGeometry()
+      const mergedVertices = []
+      const mergedNormals = []
+      const mergedUvs = []
+
+      geometries.forEach((geometry) => {
+        const positions = geometry.attributes.position.array
+        const normals = geometry.attributes.normal.array
+
+        mergedVertices.push(...positions)
+        mergedNormals.push(...normals)
+
+        if (geometry.attributes.uv) {
+          const uvs = geometry.attributes.uv.array
+          mergedUvs.push(...uvs)
+          mergedGeometry.setAttribute(
+            'uv',
+            new THREE.BufferAttribute(new Float32Array(mergedUvs), 2)
+          )
+        }
+      })
+
+      mergedGeometry.setAttribute(
+        'position',
+        new THREE.BufferAttribute(new Float32Array(mergedVertices), 3)
+      )
+      mergedGeometry.setAttribute(
+        'normal',
+        new THREE.BufferAttribute(new Float32Array(mergedNormals), 3)
+      )
+      mergedGeometry.computeVertexNormals()
+      return mergedGeometry
+    },
+    updateOrCreateMergedMesh(mesh, geometries, material) {
+      if (!mesh) {
+        let mergedGeometry = this.createMergedGeometry(geometries)
+        mesh = new THREE.Mesh(mergedGeometry, material)
+        // Add the merged mesh to the scene
+        this.scene.add(mesh)
+      } else {
+        let mergedGeometry = this.updateMergedGeometry(
+          geometries,
+          mesh.geometry
+        )
+        mesh.geometry = mergedGeometry
+      }
+    }
+  }
+}

package/src/helper/render/obstacle.js

@@ -5,9 +5,22 @@ import {
 } from './geometryHandler'
 export default {
   methods: {
+    data() {
+      return {
+        mergedObstacleMesh: null,
+        mergedObstacleSideMesh: null
+      }
+    },
+    applyTextureOnObstacles(material = this.material.roof) {
+      this.reorderRoofMaterials()
+      if (this.mergedObstacleMesh) {
+        this.applyTextureOnMesh(material, this.mergedObstacleMesh)
+      }
+    },
     renderObstacles() {
       this.clearByType('obstacleMeshes')
-
+      let obstacleGeometries = []
+      let obstacleSideGeometries = []
       this.roofs.forEach((roofPolygon) => {
         roofPolygon.holes
           .filter((poly) => poly.layer == 'obstacle')
@@ -24,7 +37,7 @@ export default {
             if (geometry && geometrySide) {
               const mesh = new THREE.Mesh(geometry, this.material.roof)
               const meshSide = new THREE.Mesh(geometrySide, this.material.wall)
-              this.applyTextureOnMesh(this.material.roof, mesh)
+              // this.applyTextureOnMesh(this.material.roof, mesh)
 
               mesh.userData.version = obstaclePolygon.version
               mesh.userData.type = 'obstacleMeshes'
@@ -37,12 +50,6 @@ export default {
                 obstaclePolygon.id + '-' + roofPolygon.id + '_side'
               meshSide.userData.polygonId = obstaclePolygon.id
 
-              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
@@ -50,8 +57,31 @@ export default {
                 obstaclePolygon.id + '-' + roofPolygon.id + '_side'
               ] = meshSide
             }
+            obstacleGeometries.push(
+              this.meshes.obstacleMeshes[
+                obstaclePolygon.id + '-' + roofPolygon.id + '_top'
+              ].geometry
+            )
+            obstacleSideGeometries.push(
+              this.meshes.obstacleMeshes[
+                obstaclePolygon.id + '-' + roofPolygon.id + '_side'
+              ].geometry
+            )
           })
       })
+
+      // Create the mesh using the merged geometry and shared material
+      this.updateOrCreateMergedMesh(
+        this.mergedObstacleMesh,
+        obstacleGeometries,
+        this.material.roof
+      )
+      this.updateOrCreateMergedMesh(
+        this.mergedObstacleSideMesh,
+        obstacleSideGeometries,
+        this.material.wall
+      )
+      this.applyTextureOnObstacles(this.material.roof)
     }
   }
 }

package/src/helper/render/panel.js

@@ -6,6 +6,12 @@ import {
   updateBufferPanelSideGeometry
 } from './geometryHandler'
 export default {
+  data() {
+    return {
+      mergedPanelSideMesh: null,
+      mergedPanelTopMeshes: {}
+    }
+  },
   methods: {
     renderPanels() {
       this.clearRemovedOnes('panelsMeshes')
@@ -29,22 +35,28 @@ export default {
         }
       })
 
+      let panelSideGeometries = []
+      let panelTopGeometries = {}
       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]
+        let materialId = 'default_' + this.moduleTextureVersionId
+        let material = this.material.panel[materialId]
         material.transparent = true
         material.opacity = this.panelOpacity
         if (panelPolygon.moduleField.pvData) {
-          let pvId = panelPolygon.moduleField.pvData.id
-          if (this.material.panel[pvId]) {
-            material = this.material.panel[pvId]
+          if (this.material.panel[panelPolygon.moduleField.pvData.id]) {
+            materialId = panelPolygon.moduleField.pvData.id
+            material = this.material.panel[materialId]
           }
         } 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.material.panel[
+              panelPolygon.moduleField.data.component_id_pv_module
+            ]
+          ) {
+            materialId = panelPolygon.moduleField.data.component_id_pv_module
+            material = this.material.panel[materialId]
           }
         }
 
@@ -54,10 +66,17 @@ export default {
         ) {
           const geometry = getBufferPanelGeometry(panelPolygon)
           const geometrySide = getBufferPanelSideGeometry(panelPolygon)
-
+          if (!panelTopGeometries[materialId]){
+            panelTopGeometries[materialId] = []
+          }
+          panelTopGeometries[materialId].push(geometry)
+          panelSideGeometries.push(geometrySide)
           if (geometry && geometrySide) {
             const mesh = new THREE.Mesh(geometry, material)
-            const meshSide = new THREE.Mesh(geometrySide, this.material.wall)
+            const meshSide = new THREE.Mesh(
+              geometrySide,
+              this.material.panelSide
+            )
             mesh.userData.version = panelPolygon.version
             mesh.userData.type = 'panelsMeshes'
             mesh.userData.meshId = panelPolygon.id + '_top'
@@ -68,8 +87,6 @@ export default {
             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
@@ -79,18 +96,50 @@ export default {
           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(
+            let topGeometry = updateBufferPanelGeometry(
               panelPolygon,
               topMesh.geometry
             )
-            sideMesh.geometry = updateBufferPanelSideGeometry(
+            let sideGeometry = updateBufferPanelSideGeometry(
               panelPolygon,
               sideMesh.geometry
             )
+
+            topMesh.geometry = topGeometry
+            sideMesh.geometry = sideGeometry
           }
+          panelSideGeometries.push(sideMesh.geometry)
+          if (!panelTopGeometries[materialId]){
+            panelTopGeometries[materialId] = []
+          }
+          panelTopGeometries[materialId].push(topMesh.geometry)
           topMesh.material = material
         }
       })
+
+      //removing unused mesh
+      const materialIds = Object.keys(panelTopGeometries)
+      const materialIdsToRemove = Object.keys(this.mergedPanelTopMeshes).filter(
+        (key) => !materialIds.includes(key)
+      )
+      for (let materialId of materialIdsToRemove) {
+        this.clearMesh(this.mergedPanelTopMeshes[materialId])
+        delete this.mergedPanelTopMeshes[materialId]
+      }
+
+      this.updateOrCreateMergedMesh(
+        this.mergedPanelSideMesh,
+        panelSideGeometries,
+        this.material.panelSide
+      )
+
+      for (let [key, geometries] of Object.entries(panelTopGeometries)) {
+        this.updateOrCreateMergedMesh(
+          this.mergedPanelTopMeshes[key],
+          geometries,
+          this.material.panel[key]
+        )
+      }
     }
   }
 }

package/src/helper/render/roof.js

@@ -10,6 +10,11 @@ import {
 } from '@eturnity/eturnity_maths'
 
 export default {
+  data() {
+    return {
+      mergedRoofMesh: null
+    }
+  },
   methods: {
     updateRoofGeometry(geometry, roofPolygon) {
       const roofOutline = roofPolygon.outline
@@ -72,22 +77,13 @@ export default {
 
     applyTextureOnRoofs(material = this.material.roof) {
       this.reorderRoofMaterials()
-      this.roofs.forEach((roof) => {
-        //roofs
-        let mesh = this.meshes.roofMeshes[roof.id]
-        this.applyTextureOnMesh(material, mesh)
-        //obstacle on roof
-        roof.holes
-          .filter((p) => p.layer == 'obstacle')
-          .forEach((obstacle) => {
-            let meshObstacle =
-              this.meshes.obstacleMeshes[obstacle.id + '-' + roof.id + '_top']
-            this.applyTextureOnMesh(material, meshObstacle)
-          })
-      })
+      if (this.mergedRoofMesh) {
+        this.applyTextureOnMesh(material, this.mergedRoofMesh)
+      }
     },
     renderRoofs() {
       this.clearRemovedOnes('roofMeshes')
+      let roofGeometries = []
       this.roofs.forEach((roofPolygon) => {
         let mesh
         let geometry
@@ -100,17 +96,16 @@ export default {
           mesh = this.meshes.roofMeshes[roofPolygon.id]
           geometry = mesh.geometry
           geometry = this.updateRoofGeometry(geometry, roofPolygon)
+
           //in order to be able to render multiple material on it (background and image overlay)
 
           mesh.geometry = geometry
-          this.applyTextureOnMesh(this.material.roof, mesh)
-          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
@@ -118,19 +113,22 @@ export default {
             mesh.userData.meshId = roofPolygon.id
             mesh.userData.polygonId = roofPolygon.id
             mesh.matrixAutoUpdate = false
-            this.scene.add(mesh)
-            this.applyTextureOnMesh(this.material.roof, mesh)
-            mesh.frustumCulled = false
             this.meshes.roofMeshes[roofPolygon.id] = mesh
           }
         }
+        roofGeometries.push(this.meshes.roofMeshes[roofPolygon.id].geometry)
       })
+      // Create the mesh using the merged geometry and shared material
+      this.updateOrCreateMergedMesh(
+        this.mergedRoofMesh,
+        roofGeometries,
+        this.material.roof
+      )
+      this.applyTextureOnMesh(this.material.roof, this.mergedRoofMesh)
     },
     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) {

package/src/helper/render/tile.js

@@ -9,6 +9,7 @@ import {
   tileToCorners
 } from '@eturnity/eturnity_maths'
 import { earthRadius } from '../../config'
+import { debounce } from 'lodash'
 
 import { cancellablePromise } from '../../utils/cancellablePromise'
 
@@ -19,6 +20,9 @@ export default {
     }
   },
   methods: {
+    debouncedRenderTiles: debounce(function () {
+      this.renderTiles()
+    }, 1000),
     async renderTiles() {
       if (
         !this.selectedMapLayer ||
@@ -72,8 +76,7 @@ export default {
           earthRadius * Math.cos((latitude * Math.PI) / 180) * 2000 * Math.PI
 
         let optimizedZoomLvl =
-          Math.round(Math.log(perimeterAtLatitude / (xMax - xMin)) / Math.LN2) +
-          1
+          Math.round(Math.log(perimeterAtLatitude / (xMax - xMin)) / Math.LN2)
         if (optimizedZoomLvl < zoomLvl) {
           zoomLvl = optimizedZoomLvl
         }
@@ -229,8 +232,8 @@ export default {
             this.scene.add(mesh)
           }
         }
-        //image.parentNode.removeChild(image);
         this.removeTileFromPending(meshId, mapLayer)
+        this.render()
       })
     },
     async renderGoogleTiles() {
@@ -254,6 +257,7 @@ export default {
           googleMapType = 'terrain'
           break
       }
+      let size = 640
       let roofsBoundZoomLvl = 19
       let { xMin, xMax, yMin, yMax } = this.roofsBounds
       if (xMin == Infinity) {
@@ -261,14 +265,26 @@ export default {
         yMin = 0
         xMax = 0
         yMax = 0
+      } else {
+        let roofBoundSizeInMeter = Math.max(xMax - xMin, yMax - yMin) / 1000
+
+        let exactZoomLvl = Math.log2(
+          (Math.cos((this.layoutSettings.layout_latitude * Math.PI) / 180) *
+            2 *
+            Math.PI *
+            earthRadius *
+            size) /
+            (256 * roofBoundSizeInMeter)
+        )
+        roofsBoundZoomLvl = Math.min(roofsBoundZoomLvl, parseInt(exactZoomLvl))
       }
       let roofsBoundCenterMeter = {
         x: (xMax + xMin) / 2000,
         y: (yMax + yMin) / 2000
       }
       let deltaLatLng = distanceToDeltaLatLng(
-        roofsBoundCenterMeter.x*1000,
-        roofsBoundCenterMeter.y*1000,
+        roofsBoundCenterMeter.x * 1000,
+        roofsBoundCenterMeter.y * 1000,
         this.layoutSettings.layout_latitude
       )
       let roofsBoundCenterLatLng = {
@@ -278,7 +294,7 @@ export default {
 
       let apiKey = process.env.VUE_APP_GOOGLE_MAP_API_KEY
       let backgroundPlane = []
-      let size = 640
+
       let planeGeometry = []
       let planeMaterial = []
       let texture = []
@@ -299,8 +315,8 @@ export default {
             2 *
             Math.PI *
             earthRadius) /
-          ( Math.pow(2, zoomLevel))
-        let sizeInMeter = groundResolution * size / 256
+          (256 * Math.pow(2, zoomLevel))
+        let sizeInMeter = groundResolution * size
         planeGeometry[indexGoogleBackground] = new THREE.PlaneGeometry(
           sizeInMeter,
           sizeInMeter * 0.9
@@ -324,7 +340,6 @@ export default {
         )
         texture[indexGoogleBackground].wrapS = 1 //THREE.RepeatWrapping
         texture[indexGoogleBackground].wrapT = 1 //THREE.RepeatWrapping
-        // texture[indexGoogleBackground].offset.y += 0.1
 
         if (indexGoogleBackground == 0) {
           this.newGoogleTileMaterial(
@@ -349,85 +364,10 @@ export default {
         backgroundPlane[indexGoogleBackground].position.z =
           -indexGoogleBackground / 2
         this.backgroundMap.add(backgroundPlane[indexGoogleBackground])
+        backgroundPlane[indexGoogleBackground].needsUpdate = true
       }
       this.scene.add(this.backgroundMap)
-    },
-    async renderGoogleTilesCenter() {
-      this.clearByType('tileMeshes')
-      if (this.backgroundMap) {
-        this.backgroundMap.clear()
-        this.scene.remove(this.backgroundMap)
-        this.clearThreeObjects(this.backgroundMap)
-      }
-      this.backgroundMap = new THREE.Group()
-
-      let googleMapType = 'satellite'
-      switch (this.selectedMapLayer.key) {
-        case 'googleLayerRoadmap':
-          googleMapType = 'roadmap'
-          break
-        case 'googleLayer':
-          googleMapType = 'satellite'
-          break
-        case 'googleLayerTerrain':
-          googleMapType = 'terrain'
-          break
-      }
-
-      let apiKey = process.env.VUE_APP_GOOGLE_MAP_API_KEY
-      let backgroundPlane = []
-      let size = 640
-      let planeGeometry = []
-      let planeMaterial = []
-      let texture = []
-      let zoomLevels = [19, 16]
-
-      for (
-        let indexGoogleBackground = 0;
-        indexGoogleBackground < zoomLevels.length;
-        indexGoogleBackground++
-      ) {
-        let zoomLevel = zoomLevels[indexGoogleBackground]
-        let groundResolution =
-          (Math.cos((this.layoutSettings.layout_latitude * Math.PI) / 180) *
-            2 *
-            Math.PI *
-            earthRadius) /
-          (256 * Math.pow(2, zoomLevel))
-        let sizeInMeter = groundResolution * size
-        planeGeometry[indexGoogleBackground] = new THREE.PlaneGeometry(
-          sizeInMeter,
-          sizeInMeter
-        )
-        let googleBackgroundUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${
-          this.layoutSettings.layout_latitude +
-          ',' +
-          this.layoutSettings.layout_longitude
-        }&maptype=${googleMapType}&zoom=${zoomLevel}&size=${size}x${size}&key=${apiKey}`
-
-        texture[indexGoogleBackground] = await this.loader.load(
-          googleBackgroundUrl
-        )
-        if (indexGoogleBackground == 0) {
-          this.newGoogleTileMaterial(
-            texture[indexGoogleBackground],
-            sizeInMeter,
-            googleMapType
-          )
-        }
-        planeMaterial[indexGoogleBackground] = new THREE.MeshBasicMaterial({
-          map: texture[indexGoogleBackground],
-          side: THREE.DoubleSide
-        })
-        backgroundPlane[indexGoogleBackground] = new THREE.Mesh(
-          planeGeometry[indexGoogleBackground],
-          planeMaterial[indexGoogleBackground]
-        )
-        backgroundPlane[indexGoogleBackground].position.z =
-          -indexGoogleBackground / 2
-        this.backgroundMap.add(backgroundPlane[indexGoogleBackground])
-      }
-      this.scene.add(this.backgroundMap)
+      this.render()
     }
   },
   watch: {

package/src/helper/render/tileProjection.js

@@ -22,8 +22,6 @@ export default {
         100,
         10000
       )
-      // cameraProjection.position.set(0, 0, 1)
-      // cameraProjection.up.set(0, 0, 1)
       let tileProjectionMaterial = new ProjectedMaterial({
         camera: cameraProjection,
         texture: texture,
@@ -45,6 +43,7 @@ export default {
       tileProjectionMaterial.userData.priority = 10
       this.material.roof.push(tileProjectionMaterial)
       this.applyTextureOnRoofs()
+      this.applyTextureOnObstacles()
     },
     async newTileMaterial(texture, x, y, zoom, mapLayer) {
       if (!this.material.roof) {
@@ -75,6 +74,7 @@ export default {
       this.setTileCameraPosition(cameraProjection, x, y, zoom)
       this.material.roof.push(tileProjectionMaterial)
       this.applyTextureOnRoofs()
+      this.applyTextureOnObstacles()
     },
     disposeTileMaterial(material) {
       material.texture.dispose()

package/src/helper/renderMixin.js

@@ -27,7 +27,6 @@ export default {
       tileMeshes: {}
     }
   },
-
   computed: {
     ...mapState({
       moduleTextureVersionId: (state) =>
@@ -76,7 +75,6 @@ export default {
       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(
@@ -87,9 +85,10 @@ export default {
             }
           }
         }
-        if (methodList.length) {
-          this.renderMethods(methodList)
-        }
+      }
+      if (methodList.length) {
+        this.renderMethods(methodList)
+        this.render()
       }
 
       this.lastGeometryEventIdDone = this.lastGeometryEventId
@@ -193,6 +192,11 @@ export default {
           })
           break
         case 'changeMapProjection':
+          methodList.push({
+            name: 'renderTiles',
+            method: this.debouncedRenderTiles,
+            arg: []
+          })
           methodList.push({
             name: 'changeMapProjection',
             method: this.changeMapProjection,
@@ -203,11 +207,6 @@ export default {
             method: this.applyTextureOnRoofs,
             arg: []
           })
-          methodList.push({
-            name: 'renderTiles',
-            method: this.renderTiles,
-            arg: []
-          })
           break
         // methodList.push({
         //   name: 'removeImageOverlay',

package/src/helper/threeMixin.js

@@ -14,7 +14,6 @@ export default {
       // Add Sky
       let sky = new Sky()
       sky.scale.setScalar(450000)
-      // sky.rotateX( - Math.PI / 2 );
       this.scene.add(sky)
       this.clearThreeObjects(sky)
       let sun = new THREE.Vector3()
@@ -36,7 +35,6 @@ export default {
       sun = null
     },
     initialiseThree(isInteractive = true) {
-      //this.loader.crossOrigin = null
 
       this.scene.background = new THREE.Color(0xb0b0b0)
 
@@ -68,7 +66,6 @@ export default {
       this.scene.add(directionalLight)
       this.scene.add(directionalLight2)
 
-      // this.renderer.setClearColor('#ffffff');
       this.renderer.setPixelRatio(window.devicePixelRatio)
       this.renderer.toneMappingExposure = 0.01
       this.$refs.canvas3DContainer.appendChild(this.renderer.domElement)
@@ -82,12 +79,27 @@ export default {
         )
         this.orbitControl.maxPolarAngle = (Math.PI / 2) * (87 / 90)
       }
+      this.orbitControl.addEventListener('change', () => {
+        this.orbitControlChange()
+      })
       window.addEventListener('resize', this.onWindowResize, false)
 
       ambientLight.dispose()
       directionalLight.dispose()
       directionalLight2.dispose()
     },
+    orbitControlChange() {
+      if (this.orbitControl.target.z != 0) {
+        this.orbitControl.target.set(
+          this.orbitControl.target.x,
+          this.orbitControl.target.y,
+          0
+        )
+        this.orbitControl.update()
+      } else {
+        this.render()
+      }
+    },
     onWindowResize() {
       this.camera.aspect = window.innerWidth / window.innerHeight
       this.camera.updateProjectionMatrix()
@@ -95,7 +107,6 @@ export default {
       this.canvasHeight = this.$refs.canvas3DContainer.clientHeight
       this.canvasWidth = this.$refs.canvas3DContainer.clientWidth
       this.resizeCanvasToDisplaySize()
-      //this.renderer.setSize(window.innerWidth / 2, window.innerHeight / 2)
     },
     resizeCanvasToDisplaySize() {
       const canvas = this.renderer.domElement