@eturnity/eturnity_3d 6.34.1 → 6.34.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eturnity/eturnity_3d",
   "private": false,
-  "version": "6.34.1",
+  "version": "6.34.2",
   "main": "dist/main.js",
   "scripts": {
     "dev": "vue-cli-service serve --skip-plugins @vue/cli-plugin-eslint",

package/src/components/ThreeCanvasViewer.vue

@@ -31,7 +31,7 @@ export default {
         1000
       ),
       provider: null,
-      cameraprojection: null,
+      cameraProjection: null,
       texture: null,
       renderer: new THREE.WebGLRenderer({
         antialias: true,
@@ -72,7 +72,7 @@ export default {
     await this.loadPanelsTexture()
     this.renderGeometry()
     this.onWindowResize()
-    // this.updateProjectionMaterials()
+    this.updateProjectionMaterials()
     this.animate()
     this.$root.$on('on-roofSelected', (polygon) =>
       this.setCameraOrthogonalTo(polygon)

package/src/helper/render/imageOverlay.js

@@ -113,7 +113,7 @@ export default {
           })
           imageOverlayProjectionMaterial.userData = {}
           imageOverlayProjectionMaterial.userData.type = 'imageOverlayMaterial'
-          imageOverlayProjectionMaterial.userData.priority = 2
+          imageOverlayProjectionMaterial.priority = 20
           imageOverlayProjectionMaterial.userData.url = this.imageOverlay.url
           resolve(imageOverlayProjectionMaterial)
         })

package/src/helper/render/index.js

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

package/src/helper/render/mapProjection.js

@@ -35,7 +35,7 @@ export default {
           this.mapProjectionTexture = texture
           this.setMapProjectionCameraPosition()
           let mapProjectionMaterial = new ProjectedMaterial({
-            camera: this.cameraprojection,
+            camera: this.cameraProjection,
             texture: texture,
             transparent: true,
             side: THREE.DoubleSide
@@ -63,12 +63,12 @@ export default {
       this.backgroundImagesizeInMm =
         this.layoutSettings.background_map_settings.sizeInMm
       if (this.backgroundImagesizeInMm) {
-        this.cameraprojection.aspect =
+        this.cameraProjection.aspect =
           this.backgroundImagesizeInMm.width /
           this.backgroundImagesizeInMm.height
         let projectionAltitude =
           this.backgroundImagesizeInMm.height /
-          (2 * Math.tan((this.cameraprojection.fov * Math.PI) / 360))
+          (2 * Math.tan((this.cameraProjection.fov * Math.PI) / 360))
 
         //set projection camera over background_map_center
         let cameraProjectionPosition = {
@@ -86,14 +86,14 @@ export default {
           cameraProjectionPosition.y = positionInMm.y / 1000
         }
 
-        this.cameraprojection.position.set(
+        this.cameraProjection.position.set(
           cameraProjectionPosition.x,
           cameraProjectionPosition.y,
           projectionAltitude / 1000
         )
-        this.cameraprojection.far = projectionAltitude * 1.5
-        this.cameraprojection.near = projectionAltitude * 0.5
-        this.cameraprojection.updateProjectionMatrix()
+        this.cameraProjection.far = projectionAltitude * 1.5
+        this.cameraProjection.near = projectionAltitude * 0.5
+        this.cameraProjection.updateProjectionMatrix()
       }
     }
   }

package/src/helper/render/projectionMaterial.js

@@ -35,7 +35,6 @@ export default {
         this.material.roof[index].dispose()
         this.material.roof.splice(index, 1)
         this.material.roof = [...this.material.roof]
-        this.reorderRoofMaterials()
       }
 
       index = this.material.roof.findIndex(
@@ -50,13 +49,11 @@ export default {
             ...this.material.roof,
             this.imageOverlayMaterial
           ]
-          this.reorderRoofMaterials()
         }
       } else if (index >= 0) {
         this.material.roof[index].dispose()
         this.material.roof.splice(index, 1)
         this.material.roof = [...this.material.roof]
-        this.reorderRoofMaterials()
       }
       this.renderImageOverlayOnBackground()
       this.applyTextureOnRoofs()

package/src/helper/render/roof.js

@@ -70,18 +70,19 @@ export default {
       return geometry
     },
 
-    applyTextureOnRoofs() {
+    applyTextureOnRoofs(material = this.material.roof) {
+      this.reorderRoofMaterials()
       this.roofs.forEach((roof) => {
         //roofs
         let mesh = this.meshes.roofMeshes[roof.id]
-        this.applyTextureOnMesh(this.material.roof, mesh)
+        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(this.material.roof, meshObstacle)
+            this.applyTextureOnMesh(material, meshObstacle)
           })
       })
     },

package/src/helper/render/tile.js

@@ -8,13 +8,14 @@ import {
   latLngToTileXY,
   tileToCorners
 } from '@eturnity/eturnity_maths'
+import { earthRadius } from '../../config'
 
-import {cancellablePromise} from '../../utils/cancellablePromise'
+import { cancellablePromise } from '../../utils/cancellablePromise'
 
 export default {
   data() {
     return {
-      pendingTiles: [],
+      pendingTiles: []
     }
   },
   methods: {
@@ -56,14 +57,26 @@ export default {
       this.backgroundMap = new THREE.Group()
 
       let zoomLvl = this.provider.maxZoom
+
       const latitude = this.layoutSettings.layout_latitude
       const longitude = this.layoutSettings.layout_longitude
       let { xMin, xMax, yMin, yMax } = this.roofsBounds
+
       if (xMin == Infinity) {
         xMin = 0
         yMin = 0
         xMax = 0
         yMax = 0
+      } else {
+        let perimeterAtLatitude =
+          earthRadius * Math.cos((latitude * Math.PI) / 180) * 2000 * Math.PI
+
+        let optimizedZoomLvl =
+          Math.round(Math.log(perimeterAtLatitude / (xMax - xMin)) / Math.LN2) +
+          1
+        if (optimizedZoomLvl < zoomLvl) {
+          zoomLvl = optimizedZoomLvl
+        }
       }
       let { lat: latMin, lng: lngMin } = distanceToDeltaLatLng(
         xMin,
@@ -92,11 +105,11 @@ export default {
       let tileToRender = []
       for (let xTile = xTileMin; xTile <= xTileMax; xTile++) {
         for (let yTile = yTileMin; yTile <= yTileMax; yTile++) {
-          tileToRender.push({ xTile, yTile, zoomLvl })
+          tileToRender.push({ xTile, yTile, zoomLvl, isTileOnRoofBound: true })
         }
       }
 
-      for (let k = 0; k < 3; k++) {
+      while (zoomLvl > 16) {
         xTileMin = xTileMin / 2 - 1
         xTileMax = (xTileMax + 1) / 2
         yTileMin = yTileMin / 2 - 1
@@ -119,7 +132,12 @@ export default {
               yTile - yTileMin <= yMinOdd ||
               yTileMax - yTile <= yMaxEven
             ) {
-              tileToRender.push({ xTile, yTile, zoomLvl })
+              tileToRender.push({
+                xTile,
+                yTile,
+                zoomLvl,
+                isTileOnRoofBound: false
+              })
             }
           }
         }
@@ -129,19 +147,22 @@ export default {
         let xTile = tileToRender[k].xTile
         let yTile = tileToRender[k].yTile
         zoomLvl = tileToRender[k].zoomLvl
-        this.renderTile(xTile, yTile, zoomLvl)
+        let isTileOnRoofBound = tileToRender[k].isTileOnRoofBound
+        this.renderTile(xTile, yTile, zoomLvl, isTileOnRoofBound)
       }
     },
-    removeTileFromPending(meshId,mapLayer){
+    removeTileFromPending(meshId, mapLayer) {
       this.pendingTiles = this.pendingTiles.filter(
         (t) => t.meshId != meshId || t.mapLayer != mapLayer
       )
     },
-    async renderTile(x, y, zoomLvl) {
+    async renderTile(x, y, zoomLvl, isTileOnRoofBound = false) {
       const meshId = 'tile_' + x + '_' + y + '_' + zoomLvl
       const mapLayer = this.provider.mapLayer
       if (
-        this.pendingTiles.find(t=>t.meshId==meshId && t.mapLayer==mapLayer)
+        this.pendingTiles.find(
+          (t) => t.meshId == meshId && t.mapLayer == mapLayer
+        )
       ) {
         return
       }
@@ -154,15 +175,19 @@ export default {
       const latitude = this.layoutSettings.layout_latitude
       const longitude = this.layoutSettings.layout_longitude
       let geometry, material
-      const imagePromise=cancellablePromise(this.provider.fetchTile(zoomLvl, x, y))
-      this.pendingTiles.push({ x, y, zoomLvl, mapLayer, meshId, imagePromise})
-      imagePromise.then((image) =>{
-
+      const imagePromise = cancellablePromise(
+        this.provider.fetchTile(zoomLvl, x, y)
+      )
+      this.pendingTiles.push({ x, y, zoomLvl, mapLayer, meshId, imagePromise })
+      imagePromise.then((image) => {
         if (!image) {
-          this.removeTileFromPending(meshId,mapLayer)
+          this.removeTileFromPending(meshId, mapLayer)
           return
         }
         const texture = new THREE.Texture(image)
+        if (isTileOnRoofBound) {
+          this.newTileMaterial(texture, x, y, zoomLvl, mapLayer)
+        }
         texture.generateMipmaps = false
         texture.format = THREE.RGBAFormat
         texture.magFilter = THREE.LinearFilter
@@ -205,10 +230,129 @@ export default {
           }
         }
         //image.parentNode.removeChild(image);
-        this.removeTileFromPending(meshId,mapLayer)
+        this.removeTileFromPending(meshId, mapLayer)
       })
     },
-    renderGoogleTiles() {
+    async renderGoogleTiles() {
+      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 roofsBoundZoomLvl = 19
+      let { xMin, xMax, yMin, yMax } = this.roofsBounds
+      if (xMin == Infinity) {
+        xMin = 0
+        yMin = 0
+        xMax = 0
+        yMax = 0
+      }
+      let roofsBoundCenterMeter = {
+        x: (xMax + xMin) / 2000,
+        y: (yMax + yMin) / 2000
+      }
+      let deltaLatLng = distanceToDeltaLatLng(
+        roofsBoundCenterMeter.x,
+        roofsBoundCenterMeter.y,
+        this.layoutSettings.layout_latitude
+      )
+      let roofsBoundCenterLatLng = {
+        lat: this.layoutSettings.layout_latitude + deltaLatLng.lat,
+        lng: this.layoutSettings.layout_longitude + deltaLatLng.lng
+      }
+
+      let apiKey = process.env.VUE_APP_GOOGLE_MAP_API_KEY
+      let backgroundPlane = []
+      let size = 640
+      let planeGeometry = []
+      let planeMaterial = []
+      let texture = []
+      let zoomLevels = [
+        roofsBoundZoomLvl,
+        roofsBoundZoomLvl - 2,
+        roofsBoundZoomLvl - 4
+      ]
+
+      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 *
+            6378137) /
+          (256 * Math.pow(2, zoomLevel))
+        let sizeInMeter = groundResolution * size
+        planeGeometry[indexGoogleBackground] = new THREE.PlaneGeometry(
+          sizeInMeter,
+          sizeInMeter * 0.9
+        )
+
+        //to remove attribution in bottom of the image
+        var uvs = new Float32Array([
+          0, 0.95, 1, 0.95, 0, 0.05, 1, 0.05, 0, 0.05, 1, 0.95
+        ])
+        planeGeometry[indexGoogleBackground].setAttribute(
+          'uv',
+          new THREE.BufferAttribute(uvs, 2)
+        )
+        planeGeometry[indexGoogleBackground].computeVertexNormals()
+
+        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
+
+        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]
+        )
+        backgroundPlane[indexGoogleBackground].position.x =
+          roofsBoundCenterMeter.x
+        backgroundPlane[indexGoogleBackground].position.y =
+          roofsBoundCenterMeter.y
+        backgroundPlane[indexGoogleBackground].position.z =
+          -indexGoogleBackground / 2
+        this.backgroundMap.add(backgroundPlane[indexGoogleBackground])
+      }
+      this.scene.add(this.backgroundMap)
+    },
+    async renderGoogleTilesCenter() {
       this.clearByType('tileMeshes')
       if (this.backgroundMap) {
         this.backgroundMap.clear()
@@ -237,6 +381,7 @@ export default {
       let planeMaterial = []
       let texture = []
       let zoomLevels = [19, 16]
+
       for (
         let indexGoogleBackground = 0;
         indexGoogleBackground < zoomLevels.length;
@@ -260,7 +405,16 @@ export default {
           this.layoutSettings.layout_longitude
         }&maptype=${googleMapType}&zoom=${zoomLevel}&size=${size}x${size}&key=${apiKey}`
 
-        texture[indexGoogleBackground] = this.loader.load(googleBackgroundUrl)
+        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
@@ -276,16 +430,14 @@ export default {
       this.scene.add(this.backgroundMap)
     }
   },
-  watch:{
-    selectedMapLayer(newMapLayer){
-      this.pendingTiles = this.pendingTiles.filter(
-        (t) => {
-          if(t.mapLayer != newMapLayer.key){
-            t.imagePromise.cancel()
-            return false
-          }
+  watch: {
+    selectedMapLayer(newMapLayer) {
+      this.pendingTiles = this.pendingTiles.filter((t) => {
+        if (t.mapLayer != newMapLayer.key) {
+          t.imagePromise.cancel()
+          return false
         }
-      )
+      })
     }
   }
 }

package/src/helper/render/tileProjection.js

@@ -0,0 +1,124 @@
+import * as THREE from 'three'
+import ProjectedMaterial from 'three-projected-material'
+import { tileToCorners } from '@eturnity/eturnity_maths'
+import { earthRadius } from '../../config'
+export default {
+  data() {
+    return {
+      tileProjectionTextures: [],
+      tileProjectionMaterials: []
+    }
+  },
+  methods: {
+    async newGoogleTileMaterial(texture, sizeInMeter, center, mapLayer) {
+      if (!this.material.roof) {
+        this.material.roof = []
+      }
+      const cameraProjection = new THREE.OrthographicCamera(
+        center.x - sizeInMeter / 2,
+        center.x + sizeInMeter / 2,
+        center.y + sizeInMeter / 2,
+        center.y - sizeInMeter / 2,
+        100,
+        10000
+      )
+      // cameraProjection.position.set(0, 0, 1)
+      // cameraProjection.up.set(0, 0, 1)
+      let tileProjectionMaterial = new ProjectedMaterial({
+        camera: cameraProjection,
+        texture: texture,
+        transparent: true,
+        side: THREE.DoubleSide
+      })
+      tileProjectionMaterial.userData = {}
+      tileProjectionMaterial.userData.type = 'tileProjectionMaterial'
+      tileProjectionMaterial.userData.materialId =
+        'material_' +
+        sizeInMeter +
+        '_' +
+        center.x +
+        '_' +
+        center.y +
+        '_' +
+        mapLayer
+      tileProjectionMaterial.userData.mapLayer = mapLayer
+      tileProjectionMaterial.userData.priority = 10
+      this.material.roof.push(tileProjectionMaterial)
+      this.applyTextureOnRoofs()
+    },
+    async newTileMaterial(texture, x, y, zoom, mapLayer) {
+      if (!this.material.roof) {
+        this.material.roof = []
+      }
+      const cameraProjection = new THREE.OrthographicCamera(
+        -1,
+        1,
+        -1,
+        1,
+        100,
+        10000
+      )
+      cameraProjection.position.set(0, 0, 1)
+      cameraProjection.up.set(0, 0, 1)
+      let tileProjectionMaterial = new ProjectedMaterial({
+        camera: cameraProjection,
+        texture: texture,
+        transparent: true,
+        side: THREE.DoubleSide
+      })
+      tileProjectionMaterial.userData = {}
+      tileProjectionMaterial.userData.type = 'tileProjectionMaterial'
+      tileProjectionMaterial.userData.materialId =
+        'material_' + x + '_' + y + '_' + zoom + '_' + mapLayer
+      tileProjectionMaterial.userData.mapLayer = mapLayer
+      tileProjectionMaterial.priority = 10
+      this.setTileCameraPosition(cameraProjection, x, y, zoom)
+      this.material.roof.push(tileProjectionMaterial)
+      this.applyTextureOnRoofs()
+    },
+    disposeTileMaterial(material) {
+      material.texture.dispose()
+      material.dispose()
+    },
+    disposeTileMaterialDifferentMapLayer(mapLayer) {
+      if (!this.material.roof) return
+      this.material.roof = this.material.roof.filter((m) => {
+        if (
+          m.userData.type == 'tileProjectionMaterial' &&
+          m.userData.mapLayer != mapLayer
+        ) {
+          this.disposeTileMaterial(m)
+          return false
+        }
+        return true
+      })
+    },
+    setTileCameraPosition(camera, x, y, zoom) {
+      const latitude = this.layoutSettings.layout_latitude
+      const longitude = this.layoutSettings.layout_longitude
+      let corners = tileToCorners(x, y, zoom, latitude, longitude)
+      let height, width, tileCenter
+      let numberOfTiles = Math.pow(2, zoom)
+      height =
+        (2000 * Math.PI * earthRadius * Math.cos((latitude * Math.PI) / 180)) /
+        numberOfTiles
+      width = height
+      tileCenter = {
+        x: (corners[0].x + corners[2].x) / 2,
+        y: (corners[0].y + corners[2].y) / 2
+      }
+
+      camera.left = corners[0].x / 1000
+      camera.right = corners[2].x / 1000
+      camera.bottom = corners[0].y / 1000
+      camera.top = corners[2].y / 1000
+
+      camera.updateProjectionMatrix()
+    }
+  },
+  watch: {
+    selectedMapLayer(newMapLayer) {
+      this.disposeTileMaterialDifferentMapLayer(newMapLayer.key)
+    }
+  }
+}

package/src/helper/renderMixin.js

@@ -355,7 +355,7 @@ export default {
     this.renderer = null
     this.scene = null
     this.camera = null
-    this.cameraprojection = null
+    this.cameraProjection = null
     Object.values(this.material).forEach((m) => {
       if (m && m.dispose) m.dispose()
     })

package/src/helper/threeMixin.js

@@ -43,16 +43,16 @@ export default {
       this.camera.position.set(0, -100, 50)
       this.camera.up.set(0, 0, 1)
 
-      this.cameraprojection = new THREE.PerspectiveCamera(
+      this.cameraProjection = new THREE.PerspectiveCamera(
         1,
         300 / 300,
         100,
         1000
       )
-      this.cameraprojection.position.set(0, 0, 24)
-      this.cameraprojection.up.set(0, 0, 1)
+      this.cameraProjection.position.set(0, 0, 24)
+      this.cameraProjection.up.set(0, 0, 1)
 
-      // const helper = new THREE.CameraHelper( this.cameraprojection );
+      // const helper = new THREE.CameraHelper( this.cameraProjection );
       // this.scene.add( helper );
 
       // const axesHelper = new THREE.AxesHelper( 20 );