@eturnity/eturnity_3d 6.34.6 → 6.34.7

package/src/helper/render/roof.js

@@ -8,8 +8,13 @@ import {
   intersectOutlines,
   verticalProjectionOnPlane
 } from '@eturnity/eturnity_maths'
-
+import {debounce} from 'lodash'
 export default {
+  data() {
+    return {
+      mergedRoofMesh: null
+    }
+  },
   methods: {
     updateRoofGeometry(geometry, roofPolygon) {
       const roofOutline = roofPolygon.outline
@@ -70,24 +75,17 @@ export default {
       return geometry
     },
 
-    applyTextureOnRoofs(material = this.material.roof) {
+    applyTextureOnRoofs(){
+      const 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)
+        this.render()
+      }
     },
     renderRoofs() {
       this.clearRemovedOnes('roofMeshes')
+      let roofGeometries = []
       this.roofs.forEach((roofPolygon) => {
         let mesh
         let geometry
@@ -98,19 +96,18 @@ export default {
         ) {
           //update mesh
           mesh = this.meshes.roofMeshes[roofPolygon.id]
+          mesh.userData.version = roofPolygon.version
           geometry = mesh.geometry
           geometry = this.updateRoofGeometry(geometry, roofPolygon)
-          //in order to be able to render multiple material on it (background and image overlay)
 
+          //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 +115,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.mergedRoofMesh = 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/texture.js

@@ -7,10 +7,13 @@ export default {
         for (let k = 0; k < materials.length; k++) {
           geometry.addGroup(0, Infinity, k)
         }
+        geometry.needsUpdate = true
         mesh.material = materials
         for (let m = 0; m < materials.length; m++) {
           if (materials[m].project) {
             materials[m].project(mesh)
+            materials[m].needsUpdate = true
+            mesh.needsUpdate = true
           }
         }
       }

package/src/helper/render/tile.js

@@ -16,7 +16,11 @@ import { cancellablePromise } from '../../utils/cancellablePromise'
 export default {
   data() {
     return {
-      pendingTiles: []
+      googleBackgroundMap: null,
+      pendingTiles: [],
+      numberOfTilesRendered: 0,
+      numberOfTilesToRender: 0,
+      tileToRender: []
     }
   },
   methods: {
@@ -35,8 +39,8 @@ export default {
         this.renderProviderTiles()
       }
     },
-    removeUnusedTiles(tileToRender) {
-      let tileToRenderIds = tileToRender.map(
+    removeUnusedTiles() {
+      let tileToRenderIds = this.tileToRender.map(
         (tileParam) =>
           'tile_' +
           tileParam.xTile +
@@ -53,13 +57,11 @@ export default {
       }
     },
     async renderProviderTiles() {
-      if (this.backgroundMap) {
-        this.backgroundMap.clear()
-        this.scene.remove(this.backgroundMap)
-        this.clearThreeObjects(this.backgroundMap)
+      if (this.googleBackgroundMap) {
+        this.googleBackgroundMap.clear()
+        this.scene.remove(this.googleBackgroundMap)
+        this.clearThreeObjects(this.googleBackgroundMap)
       }
-      this.backgroundMap = new THREE.Group()
-
       let zoomLvl = this.provider.maxZoom
 
       const latitude = this.layoutSettings.layout_latitude
@@ -75,9 +77,9 @@ export default {
         let perimeterAtLatitude =
           earthRadius * Math.cos((latitude * Math.PI) / 180) * 2000 * Math.PI
 
-        let optimizedZoomLvl =
-          Math.round(Math.log(perimeterAtLatitude / (xMax - xMin)) / Math.LN2) +
-          1
+        let optimizedZoomLvl = Math.round(
+          Math.log(perimeterAtLatitude / (xMax - xMin)) / Math.LN2
+        )
         if (optimizedZoomLvl < zoomLvl) {
           zoomLvl = optimizedZoomLvl
         }
@@ -106,10 +108,15 @@ export default {
       xTileMax = xTileMax + 1 - (xTileMax % 2)
       yTileMin = yTileMin - (yTileMin % 2)
       yTileMax = yTileMax + 1 - (yTileMax % 2)
-      let tileToRender = []
+      this.tileToRender = []
       for (let xTile = xTileMin; xTile <= xTileMax; xTile++) {
         for (let yTile = yTileMin; yTile <= yTileMax; yTile++) {
-          tileToRender.push({ xTile, yTile, zoomLvl, isTileOnRoofBound: true })
+          this.tileToRender.push({
+            xTile,
+            yTile,
+            zoomLvl,
+            isTileOnRoofBound: true
+          })
         }
       }
 
@@ -136,7 +143,7 @@ export default {
               yTile - yTileMin <= yMinOdd ||
               yTileMax - yTile <= yMaxEven
             ) {
-              tileToRender.push({
+              this.tileToRender.push({
                 xTile,
                 yTile,
                 zoomLvl,
@@ -146,12 +153,13 @@ export default {
           }
         }
       }
-      await this.removeUnusedTiles(tileToRender)
-      for (let k in tileToRender) {
-        let xTile = tileToRender[k].xTile
-        let yTile = tileToRender[k].yTile
-        zoomLvl = tileToRender[k].zoomLvl
-        let isTileOnRoofBound = tileToRender[k].isTileOnRoofBound
+      this.numberOfTilesToRender = this.tileToRender.length
+      this.numberOfTilesRendered = 0
+      for (let k in this.tileToRender) {
+        let xTile = this.tileToRender[k].xTile
+        let yTile = this.tileToRender[k].yTile
+        zoomLvl = this.tileToRender[k].zoomLvl
+        let isTileOnRoofBound = this.tileToRender[k].isTileOnRoofBound
         this.renderTile(xTile, yTile, zoomLvl, isTileOnRoofBound)
       }
     },
@@ -194,8 +202,6 @@ export default {
         }
         texture.generateMipmaps = false
         texture.format = THREE.RGBAFormat
-        texture.magFilter = THREE.LinearFilter
-        texture.minFilter = THREE.LinearFilter
         texture.needsUpdate = true
         let corners = tileToCorners(x, y, zoomLvl, latitude, longitude)
         corners = corners.map((c) => {
@@ -229,23 +235,33 @@ export default {
             mesh.userData.type = 'tileMeshes'
             mesh.userData.meshId = meshId
             mesh.userData.mapLayer = this.provider.mapLayer
-            this.meshes.tileMeshes[meshId] = mesh
-            this.scene.add(mesh)
+            mesh.name = meshId
+
+            if (!this.scene.getObjectByName(meshId)) {
+              this.meshes.tileMeshes[meshId] = mesh
+              this.scene.add(this.meshes.tileMeshes[meshId])
+            }
           }
         }
-        //image.parentNode.removeChild(image);
         this.removeTileFromPending(meshId, mapLayer)
+        this.numberOfTilesRendered++
+        if (this.numberOfTilesRendered == this.numberOfTilesToRender) {
+          this.removeUnusedTiles()
+          this.render()
+        }
       })
     },
     async renderGoogleTiles() {
       this.clearByType('tileMeshes')
-      if (this.backgroundMap) {
-        this.backgroundMap.clear()
-        this.scene.remove(this.backgroundMap)
-        this.clearThreeObjects(this.backgroundMap)
+      if (!this.googleBackgroundMap) {
+        this.googleBackgroundMap = new THREE.Group()
+        this.scene.add(this.googleBackgroundMap)
+      }
+      this.googleBackgroundMap.visible = true
+      this.googleBackgroundMap.name = 'googleBackgroundMap'
+      if (!this.scene.getObjectByName('googleBackgroundMap')) {
+        this.scene.add(this.googleBackgroundMap)
       }
-      this.backgroundMap = new THREE.Group()
-
       let googleMapType = 'satellite'
       switch (this.selectedMapLayer.key) {
         case 'googleLayerRoadmap':
@@ -298,13 +314,12 @@ export default {
 
       let planeGeometry = []
       let planeMaterial = []
-      let texture = []
       let zoomLevels = [
         roofsBoundZoomLvl,
         roofsBoundZoomLvl - 2,
         roofsBoundZoomLvl - 4
       ]
-
+      this.numberOfTilesToRender = zoomLevels.length
       for (
         let indexGoogleBackground = 0;
         indexGoogleBackground < zoomLevels.length;
@@ -336,39 +351,53 @@ export default {
         let googleBackgroundUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${
           roofsBoundCenterLatLng.lat + ',' + roofsBoundCenterLatLng.lng
         }&maptype=${googleMapType}&zoom=${zoomLevel}&size=${size}x${size}&key=${apiKey}`
-        texture[indexGoogleBackground] = await this.loader.load(
-          googleBackgroundUrl
-        )
-        texture[indexGoogleBackground].wrapS = 1 //THREE.RepeatWrapping
-        texture[indexGoogleBackground].wrapT = 1 //THREE.RepeatWrapping
-        // texture[indexGoogleBackground].offset.y += 0.1
+        this.loader.load(googleBackgroundUrl, (texture) => {
+          texture[indexGoogleBackground] = texture
 
-        if (indexGoogleBackground == 0) {
-          this.newGoogleTileMaterial(
-            texture[indexGoogleBackground],
-            sizeInMeter,
-            roofsBoundCenterMeter,
-            googleMapType
+          if (indexGoogleBackground == 0) {
+            this.newGoogleTileMaterial(
+              texture[indexGoogleBackground],
+              sizeInMeter,
+              roofsBoundCenterMeter,
+              googleMapType
+            )
+          }
+          planeMaterial[indexGoogleBackground] = new THREE.MeshBasicMaterial({
+            map: texture[indexGoogleBackground],
+            side: THREE.DoubleSide
+          })
+          backgroundPlane[indexGoogleBackground] = new THREE.Mesh(
+            planeGeometry[indexGoogleBackground],
+            planeMaterial[indexGoogleBackground]
           )
-        }
-        planeMaterial[indexGoogleBackground] = new THREE.MeshBasicMaterial({
-          map: texture[indexGoogleBackground],
-          side: THREE.DoubleSide
+          backgroundPlane[indexGoogleBackground].position.x =
+            roofsBoundCenterMeter.x
+          backgroundPlane[indexGoogleBackground].position.y =
+            roofsBoundCenterMeter.y
+          backgroundPlane[indexGoogleBackground].position.z =
+            -indexGoogleBackground / 2
+          backgroundPlane[indexGoogleBackground].visible = true
+          backgroundPlane[indexGoogleBackground].needsUpdate = true
+          backgroundPlane[indexGoogleBackground].userData.index =
+            indexGoogleBackground
+          const meshToRemove = this.googleBackgroundMap.children.find(
+            (mesh) => mesh.userData.index == indexGoogleBackground
+          )
+          if (meshToRemove) {
+            this.googleBackgroundMap.remove(meshToRemove)
+          }
+          this.googleBackgroundMap.add(backgroundPlane[indexGoogleBackground])
+
+          this.numberOfTilesRendered++
+          if (this.numberOfTilesRendered == this.numberOfTilesToRender) {
+            this.googleBackgroundMap.needsUpdate = true
+            this.googleBackgroundMap.visible = true
+            this.render()
+          }
         })
-        backgroundPlane[indexGoogleBackground] = new THREE.Mesh(
-          planeGeometry[indexGoogleBackground],
-          planeMaterial[indexGoogleBackground]
-        )
-        backgroundPlane[indexGoogleBackground].position.x =
-          roofsBoundCenterMeter.x
-        backgroundPlane[indexGoogleBackground].position.y =
-          roofsBoundCenterMeter.y
-        backgroundPlane[indexGoogleBackground].position.z =
-          -indexGoogleBackground / 2
-        this.backgroundMap.add(backgroundPlane[indexGoogleBackground])
-        backgroundPlane[indexGoogleBackground].needsUpdate = true
       }
-      this.scene.add(this.backgroundMap)
+
+      this.render()
     }
   },
   watch: {

package/src/helper/render/tileProjection.js

@@ -10,7 +10,7 @@ export default {
     }
   },
   methods: {
-    async newGoogleTileMaterial(texture, sizeInMeter, center, mapLayer) {
+    newGoogleTileMaterial(texture, sizeInMeter, center, mapLayer) {
       if (!this.material.roof) {
         this.material.roof = []
       }
@@ -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

@@ -10,24 +10,23 @@ export default {
       lastTic: new Date().getTime() * 1e4,
       //lastTic:(new Date()).getTime()
       lastGeometryEventIdDone: -1,
-      backgroundImagesizeInMm: null
+      backgroundImagesizeInMm: null,
+      meshes : {
+        baseMeshes: {},
+        roofMeshes: {},
+        flatRoofMeshes: {},
+        obstacleMeshes: {},
+        panelsMeshes: {},
+        nodeMeshes: null,
+        edgeMeshes: {},
+        roofMarginMeshes: {},
+        moduleFieldsMeshes: {},
+        tileMeshes: {}
+      }
     }
   },
   created() {
-    this.meshes = {
-      baseMeshes: {},
-      roofMeshes: {},
-      flatRoofMeshes: {},
-      obstacleMeshes: {},
-      panelsMeshes: {},
-      nodeMeshes: null,
-      edgeMeshes: {},
-      roofMarginMeshes: {},
-      moduleFieldsMeshes: {},
-      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
@@ -121,12 +120,73 @@ export default {
         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: []
           })
+          methodList.push({
+            name: 'showPanels',
+            method: this.showPanels,
+            arg: []
+          })
+          break
+        case 'moveBuilding':
+          methodList.push({
+            name: 'renderRoofs',
+            method: this.renderRoofs,
+            arg: []
+          })
+          methodList.push({
+            name: 'renderEdges',
+            method: this.renderEdges,
+            arg: []
+          })
+          methodList.push({
+            name: 'renderBase',
+            method: this.renderBase,
+            arg: []
+          })
+          methodList.push({
+            name: 'renderObstacles',
+            method: this.renderObstacles,
+            arg: []
+          })
+          break
+        case 'updateOutlineXY': //params.polygon,?index
+          if (params.layer == 'roof') {
+            methodList.push({
+              name: 'renderRoofs',
+              method: this.renderRoofs,
+              arg: []
+            })
+            methodList.push({
+              name: 'renderEdges',
+              method: this.renderEdges,
+              arg: []
+            })
+            methodList.push({
+              name: 'renderBase',
+              method: this.renderBase,
+              arg: []
+            })
+            methodList.push({
+              name: 'renderObstacles',
+              method: this.renderObstacles,
+              arg: []
+            })
+          } else if (params.layer == 'obstacle') {
+            methodList.push({
+              name: 'renderRoofs',
+              method: this.renderRoofs,
+              arg: []
+            })
+            methodList.push({
+              name: 'renderObstacles',
+              method: this.renderObstacles,
+              arg: []
+            })
+          }
           break
         case 'removePanels': //params.panels
         case 'removeModuleField': //params:moduleField
@@ -180,8 +240,23 @@ export default {
           break
         case 'roofInclineDirectionChange':
           methodList.push({
-            name: 'renderBuilding',
-            method: this.renderBuilding,
+            name: 'renderRoofs',
+            method: this.renderRoofs,
+            arg: []
+          })
+          methodList.push({
+            name: 'renderEdges',
+            method: this.renderEdges,
+            arg: []
+          })
+          methodList.push({
+            name: 'renderBase',
+            method: this.renderBase,
+            arg: []
+          })
+          methodList.push({
+            name: 'renderObstacles',
+            method: this.renderObstacles,
             arg: []
           })
           break
@@ -198,38 +273,26 @@ export default {
             method: this.debouncedRenderTiles,
             arg: []
           })
+          break
+        case 'hidePanels':
           methodList.push({
-            name: 'changeMapProjection',
-            method: this.changeMapProjection,
+            name: 'hidePanels',
+            method: this.hidePanels,
             arg: []
           })
+          break
+        case 'showPanels':
           methodList.push({
-            name: 'applyTextureOnRoofs',
-            method: this.applyTextureOnRoofs,
+            name: 'showPanels',
+            method: this.showPanels,
             arg: []
           })
           break
-        // methodList.push({
-        //   name: 'removeImageOverlay',
-        //   method: this.removeImageOverlay,
-        //   arg: []
-        // })
-        // methodList.push({
-        //   name: 'applyTextureOnBackground',
-        //   method: this.renderImageOverlayOnBackground,
-        //   arg: []
-        // })
-        // methodList.push({
-        //   name: 'applyTextureOnRoofs',
-        //   method: this.applyTextureOnRoofs,
-        //   arg: []
-        // })
-        // break
         case 'removeImageOverlay':
         case 'changeImageOverlay':
         case 'updateImageOverlay':
           methodList.push({
-            name: 'updateProjectionMaterials()',
+            name: 'updateProjectionMaterials',
             method: this.updateProjectionMaterials,
             arg: []
           })
@@ -267,7 +330,6 @@ export default {
 
     async initializeProjectionMaterial() {
       await this.updateProjectionMaterials()
-      this.applyTextureOnRoofs()
     },
 
     getCanvasOffset() {

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)
@@ -81,6 +78,9 @@ export default {
           this.renderer.domElement
         )
         this.orbitControl.maxPolarAngle = (Math.PI / 2) * (87 / 90)
+        this.orbitControl.addEventListener('change', () => {
+          this.orbitControlChange()
+        })
       }
       window.addEventListener('resize', this.onWindowResize, false)
 
@@ -88,6 +88,18 @@ export default {
       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