@eturnity/eturnity_3d 7.42.2 → 7.42.3-qa-25.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eturnity/eturnity_3d",
   "private": false,
-  "version": "7.42.2",
+  "version": "7.42.3-qa-25.0",
   "files": [
     "dist",
     "src"
@@ -15,9 +15,9 @@
     "prettier": "prettier --write \"**/*.{js,vue}\""
   },
   "dependencies": {
-    "@eturnity/eturnity_maths": "7.42.1",
+    "@eturnity/eturnity_maths": "7.42.2-qa-25.0",
     "@originjs/vite-plugin-commonjs": "1.0.3",
-    "core-js": "2.6.12",
+    "core-js": "3.30.2",
     "cors": "2.8.5",
     "earcut": "2.2.4",
     "express": "4.18.2",
@@ -26,7 +26,7 @@
     "leaflet.gridlayer.googlemutant": "0.14.0",
     "lodash": "4.17.21",
     "svd-js": "1.1.1",
-    "three": "0.142.0",
+    "three": "0.167.0",
     "tween": "0.9.0",
     "uuid": "9.0.0",
     "vite-plugin-require": "1.2.14",

package/src/Overlay/GLBOverlay.js

@@ -35,6 +35,8 @@ export default class GLBOverlay extends ThreeDModelOverlay {
           this.type = 'custom_3d_model'
         }
         overlayMesh.traverse((object) => {
+          object.castShadow = true
+          object.receiveShadow = true
           if (object.material) {
             object.material.metalness = 0
           }

package/src/Overlay/Overlay.js

@@ -150,6 +150,8 @@ export default class Overlay extends Item {
       }
 
       const callback = (texture) => {
+        texture.encoding = THREE.sRGBEncoding
+        texture.colorSpace = THREE.SRGBColorSpace
         texture.needsUpdate = true
         this.setImageOverlayCameraPosition()
         let imageOverlayProjectionMaterial = new ProjectedMaterial({
@@ -157,6 +159,7 @@ export default class Overlay extends Item {
           texture,
           transparent: true,
           side: THREE.DoubleSide,
+          shadowSide: THREE.DoubleSide,
         })
 
         imageOverlayProjectionMaterial.userData = {}

package/src/Overlay/ThreeDModelOverlay.js

@@ -424,7 +424,7 @@ export default class ThreeDModelOverlay extends Overlay {
       ambientLight.name = 'overlayAmbientLight'
       scene.add(ambientLight)
       const light = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.8)
-      ambientLight.name = 'overlayHemisphereLight'
+      light.name = 'overlayHemisphereLight'
       scene.add(light)
 
       // Set camera position and look at the center of the model

package/src/helper/cameraMixin.js

@@ -17,7 +17,7 @@ export default {
   },
   created() {
     this.perspectiveCamera = new THREE.PerspectiveCamera(
-      50,
+      80,
       300 / 300,
       1,
       50000

package/src/helper/customProvider.js

@@ -48,8 +48,18 @@ export class CustomProvider extends MapProvider {
           const xMax = xMin + resolution_mPerTile
           const yMin = tileY * resolution_mPerTile - earthPerimeter / 2
           const yMax = yMin + resolution_mPerTile
-
-          imageSrc += `&service=WMS&request=GetMap&layers=rgb&styles=&format=image%2Fjpeg&transparent=false&version=1.1.1&id=bkg_image&layerTypeAPI=bkgHexagonGermanyLayer&width=256&height=256&srs=EPSG%3A3857&bbox=${xMin},${yMin},${xMax},${yMax}`
+          imageSrc =
+            imageSrc +
+            '&service=WMS' +
+            '&request=GetMap' +
+            '&layers=BKG_DOP20,dop10' +
+            '&format=image%2Fpng' +
+            '&transparent=false' +
+            '&version=1.3.0' +
+            '&width=256' +
+            '&height=256' +
+            '&srs=EPSG%3A3857' +
+            `&bbox=${xMin},${yMin},${xMax},${yMax}`
         } else if (this.layer.key == 'azureSatelliteLayer') {
           const { apiVersion, tilesetId, subscriptionKey } =
             this.layer.layerData.options

package/src/helper/initializeThree.js

@@ -8,6 +8,8 @@ export default {
       preserveDrawingBuffer: true,
       powerPreference: 'high-performance',
     })
+    this.renderer.shadowMap.enabled = true
+    this.renderer.shadowMap.type = THREE.BasicShadowMap
     this.raycaster = new THREE.Raycaster()
     this.loader = new THREE.TextureLoader()
   },

package/src/helper/materialMixin.js

@@ -22,11 +22,13 @@ export default {
       side: THREE.DoubleSide,
     })
 
-    this.material.wall = new THREE.MeshLambertMaterial({
+    this.material.wall = new THREE.MeshPhongMaterial({
       color: wallColor,
       side: THREE.DoubleSide,
       transparent: true,
       opacity: this.wallColor == '#ffffff00' ? 0.2 : 1,
+      shadowSide: THREE.DoubleSide,
+      flatShading: true,
     })
 
     this.material.obstacle = new THREE.MeshPhongMaterial({
@@ -69,9 +71,13 @@ export default {
         defaultTextureUrls[k],
         function (texture) {}
       )
-      this.material.panel['default_' + k] = new THREE.MeshBasicMaterial({
+      texture.encoding = THREE.sRGBEncoding
+      texture.colorSpace = THREE.SRGBColorSpace
+      this.material.panel['default_' + k] = new THREE.MeshPhongMaterial({
         map: texture,
         side: THREE.DoubleSide,
+        shadowSide: THREE.DoubleSide,
+        flatShading: true,
       })
     }
     this.material.panel['userDeactivatedPanel'] = new THREE.MeshBasicMaterial({
@@ -94,6 +100,7 @@ export default {
       specular: 0x009900,
       shininess: 0,
       flatShading: true,
+      shadowSide: THREE.DoubleSide,
       side: THREE.DoubleSide,
       transparent: true,
       opacity: 0.5,
@@ -104,6 +111,7 @@ export default {
       specular: 0x009900,
       shininess: 0,
       flatShading: true,
+      shadowSide: THREE.DoubleSide,
       side: THREE.DoubleSide,
       transparent: true,
       opacity: 0.4,
@@ -114,6 +122,7 @@ export default {
       specular: 0x009900,
       shininess: 0,
       flatShading: true,
+      shadowSide: THREE.DoubleSide,
       side: THREE.DoubleSide,
       transparent: true,
       opacity: 0.5,
@@ -143,6 +152,7 @@ export default {
       specular: 0x009900,
       shininess: 0,
       flatShading: true,
+      shadowSide: THREE.DoubleSide,
       side: THREE.DoubleSide,
       transparent: true,
       opacity: 0.5,

package/src/helper/render/base.js

@@ -39,6 +39,8 @@ export default {
           mesh.userData.polygonId = roofPolygon.id
           mesh.matrixAutoUpdate = false
           mesh.frustumCulled = false
+          mesh.receiveShadow = true
+          mesh.castShadow = true
           this.meshes.baseMeshes[roofPolygon.id] = mesh
         }
         baseGeometries.push(this.meshes.baseMeshes[roofPolygon.id].geometry)
@@ -50,6 +52,8 @@ export default {
         this.material.wall
       )
       this.mergedBaseMesh.renderOrder = 10
+      this.mergedBaseMesh.receiveShadow = true
+      this.mergedBaseMesh.castShadow = true
     },
   },
 }

package/src/helper/render/loader.js

@@ -10,10 +10,14 @@ export default {
             this.material.panel[pvId] = this.material.panel.default
           } else {
             const texture = this.loader.load(component.texture_img_url)
-            this.material.panel[pvId] = new THREE.MeshBasicMaterial({
+            texture.encoding = THREE.sRGBEncoding
+            texture.colorSpace = THREE.SRGBColorSpace
+            this.material.panel[pvId] = new THREE.MeshPhongMaterial({
               map: texture,
               side: THREE.FrontSide,
               transparent: false,
+              shadowSide: THREE.DoubleSide,
+              flatShading: true,
             })
           }
         }
@@ -30,10 +34,14 @@ export default {
           } else {
             await new Promise((resolve) => {
               this.loader.load(mf.data.texture_img_url, (texture) => {
-                this.material.panel[pvId] = new THREE.MeshBasicMaterial({
+                texture.encoding = THREE.sRGBEncoding
+                texture.colorSpace = THREE.SRGBColorSpace
+                this.material.panel[pvId] = new THREE.MeshPhongMaterial({
                   map: texture,
                   side: THREE.FrontSide,
                   transparent: false,
+                  shadowSide: THREE.DoubleSide,
+                  flatShading: true,
                 })
                 resolve(texture)
               })

package/src/helper/render/margin.js

@@ -40,6 +40,7 @@ export default {
               specular: 0x009900,
               shininess: 0,
               flatShading: true,
+              shadowSide: THREE.DoubleSide,
               side: THREE.DoubleSide,
               transparent: true,
               opacity: 0.8,
@@ -65,6 +66,7 @@ export default {
                 specular: 0x009900,
                 shininess: 0,
                 flatShading: true,
+                shadowSide: THREE.DoubleSide,
                 side: THREE.DoubleSide,
                 transparent: true,
                 opacity: 0.8,

package/src/helper/render/obstacle.js

@@ -82,6 +82,11 @@ export default {
         this.material.wall
       )
       this.mergedObstacleSideMesh.renderOrder = 10
+      //shadow
+      this.mergedObstacleSideMesh.receiveShadow = true
+      this.mergedObstacleSideMesh.castShadow = true
+      this.mergedObstacleMesh.receiveShadow = true
+      this.mergedObstacleMesh.castShadow = true
       this.applyTextureOnObstacles(this.material.roof)
     },
   },

package/src/helper/render/panel.js

@@ -162,7 +162,6 @@ export default {
             mesh.userData.type = 'panelsMeshes'
             mesh.userData.meshId = panelPolygon.id + '_top'
             mesh.userData.polygonId = panelPolygon.id
-            //this.scene.add(mesh)
             mesh.matrixAutoUpdate = false
             this.meshes.panelsMeshes[panelPolygon.id + '_top'] = mesh
           }
@@ -214,6 +213,8 @@ export default {
           this.material.panel[key],
           'panelTop_' + key
         )
+        this.mergedPanelTopMeshes[key].receiveShadow = true
+        this.mergedPanelTopMeshes[key].castShadow = true
         this.mergedPanelTopMeshes[key].renderOrder = 10
       }
       if (this.arePanelVisible) {

package/src/helper/render/roof.js

@@ -114,6 +114,8 @@ export default {
             mesh.userData.meshId = roofPolygon.id
             mesh.userData.polygonId = roofPolygon.id
             mesh.frustumCulled = false
+            mesh.receiveShadow = true
+            mesh.castShadow = true
             this.meshes.roofMeshes[roofPolygon.id] = mesh
             this.scene.add(mesh)
           }

package/src/helper/render/tile.js

@@ -280,15 +280,18 @@ export default {
               mesh.userData.meshId = meshId
               mesh.frustumCulled = false
               mesh.needsUpdate = true
+              mesh.receiveShadow = true
+              mesh.castShadow = false
               mesh.updateMatrix()
             } else {
-              material = new THREE.MeshBasicMaterial({
+              texture.encoding = THREE.sRGBEncoding
+              texture.colorSpace = THREE.SRGBColorSpace
+              material = new THREE.MeshPhongMaterial({
                 map: texture,
                 color: 0xffffff,
                 side: THREE.FrontSide,
                 transparent: false,
-                // opacity:isTileOnRoofBound?0.8:1,
-                // color:isTileOnRoofBound?'red':'white'
+                shininess: 0,
               })
               material.map = texture
               material.needsUpdate = true
@@ -299,7 +302,8 @@ export default {
                 mesh.userData.meshId = meshId
                 mesh.userData.mapLayer = this.provider.mapLayer
                 mesh.name = meshId
-
+                mesh.receiveShadow = true
+                mesh.castShadow = false
                 if (!this.scene.getObjectByName(meshId)) {
                   this.meshes.tileMeshes[meshId] = mesh
                   this.scene.add(this.meshes.tileMeshes[meshId])
@@ -383,6 +387,7 @@ export default {
 
       let planeGeometry = []
       let planeMaterial = []
+      let planeTexture = []
       let zoomLevels = [
         roofsBoundZoomLvl,
         roofsBoundZoomLvl - 2,
@@ -423,18 +428,21 @@ export default {
         this.isReady.texturesToLoad++
         this.loader.load(googleBackgroundUrl, (texture) => {
           this.isReady.texturesLoaded++
-          texture[indexGoogleBackground] = texture
+          texture.encoding = THREE.sRGBEncoding
+          texture.colorSpace = THREE.SRGBColorSpace
+          planeTexture[indexGoogleBackground] = texture
           if (indexGoogleBackground == 0) {
             this.newGoogleTileMaterial(
-              texture[indexGoogleBackground],
+              planeTexture[indexGoogleBackground],
               sizeInMeter,
               roofsBoundCenterMeter,
               googleMapType
             )
           }
-          planeMaterial[indexGoogleBackground] = new THREE.MeshBasicMaterial({
-            map: texture[indexGoogleBackground],
+          planeMaterial[indexGoogleBackground] = new THREE.MeshPhongMaterial({
+            map: planeTexture[indexGoogleBackground],
             side: THREE.DoubleSide,
+            shininess: 0,
           })
           backgroundPlane[indexGoogleBackground] = new THREE.Mesh(
             planeGeometry[indexGoogleBackground],
@@ -448,6 +456,9 @@ export default {
             -indexGoogleBackground / 2
           backgroundPlane[indexGoogleBackground].visible = true
           backgroundPlane[indexGoogleBackground].needsUpdate = true
+
+          backgroundPlane[indexGoogleBackground].receiveShadow = true
+          backgroundPlane[indexGoogleBackground].castShadow = false
           backgroundPlane[indexGoogleBackground].userData.index =
             indexGoogleBackground
           const meshToRemove = this.googleBackgroundMap.children.find(
@@ -462,6 +473,8 @@ export default {
           if (this.numberOfTilesRendered == this.numberOfTilesToRender) {
             this.googleBackgroundMap.needsUpdate = true
             this.googleBackgroundMap.visible = true
+            this.googleBackgroundMap.receiveShadow = true
+            this.googleBackgroundMap.castShadow = false
             this.render()
           }
         })

package/src/helper/render/tileProjection.js

@@ -27,6 +27,7 @@ export default {
         texture: texture,
         transparent: true,
         side: THREE.DoubleSide,
+        shadowSide: THREE.DoubleSide
       })
       tileProjectionMaterial.camera = cameraProjection
       tileProjectionMaterial.userData = {}

package/src/helper/threeMixin.js

@@ -7,6 +7,11 @@ import materialMixin from './materialMixin'
 import renderMixin from './renderMixin'
 import initializeThree from './initializeThree'
 import { MAP_LAYER_TYPE } from '../utils/constants'
+import {
+  fromSphericalCoordinatesToENU,
+  addVector,
+  multiplyVector,
+} from '@eturnity/eturnity_maths'
 export default {
   data() {
     return {
@@ -50,6 +55,8 @@ export default {
 
       this.initialiseSky()
 
+      this.updateSunLight()
+
       this.initialiseThreeMap()
 
       if (isInteractive) {
@@ -105,40 +112,94 @@ export default {
       })
     },
     initialiseLights() {
-      // const ambientLight = new THREE.AmbientLight(0xffffff, 0.5)
-      var hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444)
-      hemiLight.position.set(0, 0, 300)
-      this.scene.add(hemiLight)
-      let directionalLight = new THREE.DirectionalLight(0xffffff, 0.5)
-      directionalLight.position.set(0, 1000, 500)
-      let directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.5)
-      directionalLight2.position.set(0, -1000, 500)
-      this.scene.add(directionalLight)
-      this.scene.add(directionalLight2)
+      const ambientLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.8)
+      ambientLight.position.set(0, 0, 1)
+      this.scene.add(ambientLight)
+      var light = new THREE.DirectionalLight(0xffffff, 3)
+      light.name = 'sunLight'
+      light.position.set(0, 10, 100)
+      light.castShadow = true
+
+      // Shadow settings
+      light.shadow.mapSize.width = 2048 // High quality shadow map
+      light.shadow.mapSize.height = 2048
+      light.shadow.camera.near = 0.5
+      light.shadow.camera.far = 500
+      light.shadow.camera.left = -5
+      light.shadow.camera.right = 5
+      light.shadow.camera.top = 5
+      light.shadow.camera.bottom = -5
+      light.shadow.bias = -0.001
+      light.shadow.intensity = 1
+      // Add the light to the scene
+      this.scene.add(light)
     },
     initialiseSky() {
       // Add Sky
       let sky = new Sky()
       sky.scale.setScalar(450000)
+      sky.name = 'sky'
       this.scene.add(sky)
       this.clearThreeObjects(sky)
-      let sun = new THREE.Vector3()
-
       const uniforms = sky.material.uniforms
       uniforms.up.value = new THREE.Vector3(0, 0, 1)
       uniforms['turbidity'].value = 20
-      uniforms['rayleigh'].value = 0.06
+      uniforms['rayleigh'].value = 0.3
       uniforms['mieCoefficient'].value = 0.01
       uniforms['mieDirectionalG'].value = 0.1
-      const elevation = 10
-      const azimuth = -20
-      const phi = THREE.MathUtils.degToRad(90 - elevation)
-      const theta = THREE.MathUtils.degToRad(azimuth)
-
-      sun.setFromSphericalCoords(1, phi, theta)
-
-      uniforms['sunPosition'].value.copy(sun)
-      sun = null
+    },
+    updateSunLight() {
+      //require sunPosition (state) and projectBoundingSphere (getter) to work
+      let altitude = (35 * Math.PI) / 180
+      let azimuth = 0
+      if (this.sunPosition) {
+        altitude = this.sunPosition.altitude
+        azimuth = this.sunPosition.azimuth
+      }
+      let {
+        x: xSun,
+        y: ySun,
+        z: zSun,
+      } = fromSphericalCoordinatesToENU(1, altitude, azimuth)
+      let sunVector = new THREE.Vector3(xSun, ySun, zSun)
+      const sunLight = this.scene.getObjectByName('sunLight')
+      const sky = this.scene.getObjectByName('sky')
+      if (sky) {
+        const uniforms = sky.material.uniforms
+        uniforms['sunPosition'].value.copy(sunVector)
+      }
+      if (sunLight) {
+        let center = { x: 0, y: 0, z: 0 }
+        let radius = 1
+        if (this.projectBoundingSphere) {
+          sunLight.castShadow = true
+          radius = this.projectBoundingSphere.radius
+          center = this.projectBoundingSphere.center
+        } else {
+          sunLight.castShadow = false
+        }
+        let sunVectorPosition = addVector(
+          center,
+          multiplyVector(radius, sunVector)
+        )
+        sunLight.position.set(
+          sunVectorPosition.x,
+          sunVectorPosition.y,
+          sunVectorPosition.z
+        )
+        sunLight.shadow.camera.near = 0
+        sunLight.shadow.camera.far = 500
+        sunLight.shadow.camera.left = -radius
+        sunLight.shadow.camera.right = radius
+        sunLight.shadow.camera.top = radius
+        sunLight.shadow.camera.bottom = -radius
+        sunLight.shadow.camera.updateProjectionMatrix()
+        sunLight.shadow.camera.updateMatrix()
+        sunLight.target.position.set(center.x, center.y, center.z)
+        sunLight.target.updateMatrixWorld()
+        sunLight.visible = altitude > 0
+      }
+      this.render()
     },
     initialiseThreeMap() {
       //Extention of the map with geo-map

package/src/utils/layers.js

@@ -155,12 +155,12 @@ function getLayers() {
     }
   )
   const bkgHexagonImage = L.tileLayer.wms(
-    'https://terramapserver.org/Proxy/geoserver/BKG/wms?kid=eag20.1',
+    'https://geo.terramapserver.de/Proxy/Demo/wms?kid=hXgn.Demo_sXDLWAsF33',
     {
-      layers: 'rgb',
-      id: 'bkg_image',
-      attribution:
-        '&copy; <a href="https://www.bkg.bund.de" target="_blank">Bundesamt für Kartographie und Geodäsie</a>',
+      layers: 'BKG_DOP20,dop10',
+      format: 'image/png',
+      id: 'bkgHexagonImage',
+      attribution: `© GeoBasis-DE/BKG ${new Date().getFullYear()}, powered by HxGN`,
       maxZoom: leafletMapLayersConfig['bkgHexagonGermanyLayer']['maxZoom'],
       maxNativeZoom:
         leafletMapLayersConfig['bkgHexagonGermanyLayer']['maxNativeZoom'],
@@ -274,7 +274,7 @@ function getLayers() {
       layerData: ignLayerMap,
     },
     {
-      name: 'BKG satellite image',
+      name: 'Hexagon (satellite)',
       key: 'bkgHexagonGermanyLayer',
       layerData: bkgHexagonImage,
     },