@eturnity/eturnity_3d 6.34.0 → 6.34.1

package/src/helper/cameraMixin.js

@@ -1,97 +1,101 @@
 import TWEEN from 'tween'
-import {
-  addVector,
-  multiplyVector,
-} from '@eturnity/eturnity_maths'
+import { addVector, multiplyVector } from '@eturnity/eturnity_maths'
 
 export default {
-    methods:{
-        setCameraGlobalPosition() {
-            if(this.roofs.length==0)return
-            let bounds=this.roofsBounds
-            let targetVector={x:(bounds.xMax+bounds.xMin)/2000,y:(bounds.yMax+bounds.yMin)/2000,z:0}
-            let objectRadius_m=Math.max((bounds.xMax-bounds.xMin)/2000,(bounds.yMax-bounds.yMin)/2000)
-            let distance =
-                5 + objectRadius_m / Math.sin(((this.camera.fov / 2) * Math.PI) / 180)
-            let cameraMoveVector = { x: 0, y: 0, z: distance }
-            const positionVector = addVector(targetVector, cameraMoveVector)
-            const position = [
-              positionVector.x,
-              positionVector.y - distance,
-              positionVector.z
-            ]
-            let target=[
-              targetVector.x,
-              targetVector.y,
-              targetVector.z
-            ]
-           
-            this.setTweenTo(position,target)
-          },
-          setCameraOrthogonalTo(polygon) {
-            if (polygon) {
-              let polygonRef = polygon
-              const targetVector = polygonRef.meanPoint
-              const target = [
-                targetVector.x / 1000,
-                targetVector.y / 1000,
-                targetVector.z / 1000
-              ]
-              const positionVector = addVector(
-                polygonRef.meanPoint,
-                multiplyVector(45000, polygonRef.normalVector)
-              )
-              const position = [
-                positionVector.x / 1000,
-                positionVector.y / 1000 - 1,
-                positionVector.z / 1000
-              ]
-              this.setTweenTo(position,target)
-            }
-          },
-          setCameraSideTo(polygon) {
-            if (polygon) {
-              let polygonRef = polygon
-              const targetVector = polygonRef.meanPoint
-              const target = [
-                targetVector.x / 1000,
-                targetVector.y / 1000,
-                targetVector.z / 1000
-              ]
-              let sideVector={x:-Math.cos((polygonRef.direction+45)*Math.PI/180),y:Math.sin((polygonRef.direction+45)*Math.PI/180),z: 0}
-              const positionVector = addVector(
-                polygonRef.meanPoint,
-                multiplyVector(45000, sideVector)
-              )
-              const position = [
-                positionVector.x / 1000,
-                positionVector.y / 1000,
-                positionVector.z / 1000 +5
-              ]
-              this.setTweenTo(position,target)
-            }
-          },
-          setTweenTo(position,target){
-            if (this.orbitControl) {
-              this.tweenOrbit = new TWEEN.Tween(this.orbitControl.target)
-                .to({ x: target[0], y: target[1], z: target[2] }, 2000)
-                .easing(TWEEN.Easing.Sinusoidal.Out)
-                .onUpdate(() => {
-                  if(this.orbitControl && this.orbitControl.update)
-                    this.orbitControl.update()
-                })
-                .start()
-            }
-            if (this.camera) {
-              this.tweenCamera = new TWEEN.Tween(this.camera.position)
-                .to({ x: position[0], y: position[1], z: position[2] }, 2000)
-                .easing(TWEEN.Easing.Sinusoidal.Out)
-                .onUpdate(() => {
-                  if(this.orbitControl && this.orbitControl.update)
-                    this.orbitControl.update()
-                })
-                .start()
-            }
-          },
+  methods: {
+    setCameraGlobalPosition() {
+      if (this.roofs.length == 0) return
+      let bounds = this.roofsBounds
+      let targetVector = {
+        x: (bounds.xMax + bounds.xMin) / 2000,
+        y: (bounds.yMax + bounds.yMin) / 2000,
+        z: 0
+      }
+      let objectRadius_m = Math.max(
+        (bounds.xMax - bounds.xMin) / 2000,
+        (bounds.yMax - bounds.yMin) / 2000
+      )
+      let distance =
+        5 + objectRadius_m / Math.sin(((this.camera.fov / 2) * Math.PI) / 180)
+      let cameraMoveVector = { x: 0, y: 0, z: distance }
+      const positionVector = addVector(targetVector, cameraMoveVector)
+      const position = [
+        positionVector.x,
+        positionVector.y - distance,
+        positionVector.z
+      ]
+      let target = [targetVector.x, targetVector.y, targetVector.z]
+
+      this.setTweenTo(position, target)
+    },
+    setCameraOrthogonalTo(polygon) {
+      if (polygon) {
+        let polygonRef = polygon
+        const targetVector = polygonRef.meanPoint
+        const target = [
+          targetVector.x / 1000,
+          targetVector.y / 1000,
+          targetVector.z / 1000
+        ]
+        const positionVector = addVector(
+          polygonRef.meanPoint,
+          multiplyVector(45000, polygonRef.normalVector)
+        )
+        const position = [
+          positionVector.x / 1000,
+          positionVector.y / 1000 - 1,
+          positionVector.z / 1000
+        ]
+        this.setTweenTo(position, target)
+      }
+    },
+    setCameraSideTo(polygon) {
+      if (polygon) {
+        let polygonRef = polygon
+        const targetVector = polygonRef.meanPoint
+        const target = [
+          targetVector.x / 1000,
+          targetVector.y / 1000,
+          targetVector.z / 1000
+        ]
+        let sideVector = {
+          x: -Math.cos(((polygonRef.direction + 45) * Math.PI) / 180),
+          y: Math.sin(((polygonRef.direction + 45) * Math.PI) / 180),
+          z: 0
+        }
+        const positionVector = addVector(
+          polygonRef.meanPoint,
+          multiplyVector(45000, sideVector)
+        )
+        const position = [
+          positionVector.x / 1000,
+          positionVector.y / 1000,
+          positionVector.z / 1000 + 5
+        ]
+        this.setTweenTo(position, target)
+      }
+    },
+    setTweenTo(position, target) {
+      if (this.orbitControl) {
+        this.tweenOrbit = new TWEEN.Tween(this.orbitControl.target)
+          .to({ x: target[0], y: target[1], z: target[2] }, 2000)
+          .easing(TWEEN.Easing.Sinusoidal.Out)
+          .onUpdate(() => {
+            if (this.orbitControl && this.orbitControl.update)
+              this.orbitControl.update()
+          })
+          .start()
+      }
+      if (this.camera) {
+        this.tweenCamera = new TWEEN.Tween(this.camera.position)
+          .to({ x: position[0], y: position[1], z: position[2] }, 2000)
+          .easing(TWEEN.Easing.Sinusoidal.Out)
+          .onUpdate(() => {
+            if (this.orbitControl && this.orbitControl.update)
+              this.orbitControl.update()
+          })
+          .start()
+      }
     }
-}
+  }
+}

package/src/helper/customProvider.js

@@ -1,16 +1,15 @@
-import {
-  MapProvider,
-} from 'geo-three'
+import { MapProvider } from 'geo-three'
 import getLayers from '../utils/layers'
 export class CustomProvider extends MapProvider {
   constructor(address, map_layer) {
     super()
-	
+
     const layer = getLayers().find((layer) => layer.key == map_layer)
     this.layer = layer
-    
+    this.mapLayer = map_layer
+    this.maxZoom = this.layer.layerData.options.maxNativeZoom || 20
     this.defaultImage = document.createElement('img')
-    this.defaultImage.src=require('../assets/images/white_tile.png')
+    this.defaultImage.src = require('../assets/images/white_tile.png')
     this.defaultImage.crossOrigin = 'Anonymous'
     this.url = layer
       ? layer.layerData._url
@@ -22,16 +21,13 @@ export class CustomProvider extends MapProvider {
     const minZoomLayer = this.layer.layerData.options.minZoom || 9
     const maxZoomLayer = this.layer.layerData.options.maxNativeZoom || 20
     return new Promise((resolve, reject) => {
-      
       if (zoom < minZoomLayer) {
-		    resolve(this.defaultImage)
-      } else if(zoom > maxZoomLayer){
-
-      }
-      else {
+        resolve(this.defaultImage)
+      } else if (zoom > maxZoomLayer) {
+      } else {
         var image = document.createElement('img')
         image.onload = function () {
-          image.style.backgroundColor="red"
+          image.style.backgroundColor = 'red'
           resolve(image)
         }
         image.onerror = function () {
@@ -40,33 +36,37 @@ export class CustomProvider extends MapProvider {
 
         image.crossOrigin = 'Anonymous'
         let imageSrc = this.url
-        if(this.layer.key=="bkgHexagonGermanyLayer"){
-          const numTiles = Math.pow(2, zoom);
-          const tileX = x;
-          const tileY = (numTiles-1)-y;
-          const earthPerimeter=6378137*Math.PI*2
-          const resolution_mPerTile=earthPerimeter/numTiles
+        if (this.layer.key == 'bkgHexagonGermanyLayer') {
+          const numTiles = Math.pow(2, zoom)
+          const tileX = x
+          const tileY = numTiles - 1 - y
+          const earthPerimeter = 6378137 * Math.PI * 2
+          const resolution_mPerTile = earthPerimeter / numTiles
 
-          const xMin=tileX*resolution_mPerTile-(earthPerimeter/2)
-          const xMax=xMin+resolution_mPerTile
-          const yMin=tileY*resolution_mPerTile-(earthPerimeter/2)
-          const yMax=yMin+resolution_mPerTile
+          const xMin = tileX * resolution_mPerTile - earthPerimeter / 2
+          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}`
-        }else{
+          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}`
+        } else {
           imageSrc = imageSrc.replace('{x}', x)
           imageSrc = imageSrc.replace('{y}', y)
           imageSrc = imageSrc.replace('{z}', zoom)
           //imageSrc = imageSrc.replace('{s}', 'a')
-          if(this.layer.layerData.options.subdomains){
-            const subDomain=this.layer.layerData.options.subdomains[Math.abs((x << zoom) + y)%this.layer.layerData.options.subdomains.length]
+          if (this.layer.layerData.options.subdomains) {
+            const subDomain =
+              this.layer.layerData.options.subdomains[
+                Math.abs((x << zoom) + y) %
+                  this.layer.layerData.options.subdomains.length
+              ]
             imageSrc = imageSrc.replace('{s}', subDomain)
           }
           imageSrc = imageSrc.replace('{format}', 'image/jpeg')
           //imageSrc = imageSrc.replace('{format}', 'image/png')
           imageSrc = imageSrc.replace('{tileMatrixSet}', 'PM')
         }
-      image.src = imageSrc
+        image.src = imageSrc
       }
     })
   }

package/src/helper/materialMixin.js

@@ -1,75 +1,91 @@
 import * as THREE from 'three'
-import {beamColor,beamOpacity,node3DColor,node3dOpacity,defaultTextureUrls} from '../config'
+import {
+  beamColor,
+  beamOpacity,
+  node3DColor,
+  node3dOpacity,
+  defaultTextureUrls
+} from '../config'
 export default {
-    data(){
-        return {
-            material:{}
-        }
-    },
-    created(){
-        let wallColor=0xdddddd
-        if(this.wallColor){
-            wallColor = new THREE.Color(this.wallColor)
-        }
-        this.material.wall = new THREE.MeshLambertMaterial({
-            color: wallColor,
-            side:THREE.DoubleSide
-        })
+  data() {
+    return {
+      material: {}
+    }
+  },
+  created() {
+    let wallColor = 0xdddddd
+    if (this.wallColor) {
+      wallColor = new THREE.Color(this.wallColor)
+    }
+    this.material.wall = new THREE.MeshLambertMaterial({
+      color: wallColor,
+      side: THREE.DoubleSide
+    })
+
+    this.material.obstacle = new THREE.MeshPhongMaterial({
+      color: 0xff0000,
+      side: THREE.DoubleSide
+    })
+
+    this.material.edge = new THREE.MeshPhongMaterial({
+      color: beamColor,
+      transparent: true,
+      opacity: beamOpacity
+    })
+    this.material.node = new THREE.PointsMaterial({
+      size: 0.05,
+      sizeAttenuation: true,
+      color: node3DColor,
+      opacity: node3dOpacity,
+      transparent: true
+    })
+    const loader = new THREE.TextureLoader()
+    // loader.crossOrigin = 'anonymous'
+    // texture.minFilter = THREE.LinearFilter
+    this.material.panel = {}
+
+    for (let k = 0; k < defaultTextureUrls.length; k++) {
+      let texture = loader.load(defaultTextureUrls[k], function (texture) {})
+      this.material.panel['default_' + k] = new THREE.MeshBasicMaterial({
+        map: texture,
+        side: THREE.DoubleSide
+      })
+    }
+    this.material.roof = [this.material.wall]
+
+    this.material.flatRoof = new THREE.MeshPhongMaterial({
+      color: 0x00ff00,
+      specular: 0x009900,
+      shininess: 0,
+      flatShading: true,
+      side: THREE.DoubleSide,
+      transparent: true,
+      opacity: 0.5
+    })
 
-        this.material.obstacle = new THREE.MeshPhongMaterial({
-            color: 0xff0000,
-            side:THREE.DoubleSide,
-        })
-    
-        this.material.edge=new THREE.MeshPhongMaterial({ color: beamColor,transparent:true,opacity:beamOpacity })
-        this.material.node=new THREE.PointsMaterial( { size: 0.05, sizeAttenuation: true,color: node3DColor, opacity:node3dOpacity, transparent: true } );
-        const loader = new THREE.TextureLoader()
-        // loader.crossOrigin = 'anonymous'
-        // texture.minFilter = THREE.LinearFilter
-        this.material.panel={}
-        
-        for(let k=0;k<defaultTextureUrls.length;k++){
-            let texture=loader.load(defaultTextureUrls[k], function (texture) {})
-            this.material.panel['default_'+k] = new THREE.MeshBasicMaterial({
-                map: texture,
-                side: THREE.DoubleSide,
-            })
-        }
-        this.material.roof=[this.material.wall]
-    
-        this.material.flatRoof = new THREE.MeshPhongMaterial({
-            color: 0x00ff00,
-            specular: 0x009900,
-            shininess: 0,
-            flatShading: true,
-            side:THREE.DoubleSide,
-            transparent:true,
-            opacity:0.5
-        })
-    
-        this.material.moduleField = new THREE.MeshPhongMaterial({
-            color: 0xfc9d03,
-            specular: 0x000000,
-            shininess: 0,
-            flatShading: true,
-            side:THREE.DoubleSide,
-            transparent:true,
-            opacity:0.8
-        })    
-        this.material.curvedRoof = new THREE.MeshPhongMaterial({
-            color: 0xffff00,
-            specular: 0x009900,
-            shininess: 0,
-            flatShading: true,
-            side:THREE.DoubleSide,
-            transparent:true,
-            opacity:0.5
-        })
-    },
-    watch: {
-        wallColor(color) {
-          let wallColor = new THREE.Color(color)
-          this.material.wall.color.set(wallColor)
-        },
+    this.material.moduleField = new THREE.MeshPhongMaterial({
+      color: 0xfc9d03,
+      specular: 0x000000,
+      shininess: 0,
+      flatShading: true,
+      side: THREE.DoubleSide,
+      transparent: true,
+      opacity: 0.8
+    })
+    this.material.curvedRoof = new THREE.MeshPhongMaterial({
+      color: 0xffff00,
+      specular: 0x009900,
+      shininess: 0,
+      flatShading: true,
+      side: THREE.DoubleSide,
+      transparent: true,
+      opacity: 0.5
+    })
+  },
+  watch: {
+    wallColor(color) {
+      let wallColor = new THREE.Color(color)
+      this.material.wall.color.set(wallColor)
     }
+  }
 }

package/src/helper/materials.js

@@ -1,62 +1,77 @@
 import * as THREE from 'three'
-import {beamColor,beamOpacity,node3DColor,node3dOpacity,defaultTextureUrls} from '../config'
-const material=[]
+import {
+  beamColor,
+  beamOpacity,
+  node3DColor,
+  node3dOpacity,
+  defaultTextureUrls
+} from '../config'
+const material = []
 
 material.wall = new THREE.MeshLambertMaterial({
-        color: 0xdddddd,
-        side:THREE.DoubleSide
-    })
+  color: 0xdddddd,
+  side: THREE.DoubleSide
+})
 
 // TODO get Canvas image from TwoD
 material.obstacle = new THREE.MeshPhongMaterial({
-        color: 0xff0000,
-        side:THREE.DoubleSide,
-    })
+  color: 0xff0000,
+  side: THREE.DoubleSide
+})
 
-material.edge=new THREE.MeshPhongMaterial({ color: beamColor,transparent:true,opacity:beamOpacity })
-material.node=new THREE.PointsMaterial( { size: 0.05, sizeAttenuation: true,color: node3DColor, opacity:node3dOpacity, transparent: true } );
-    const loader = new THREE.TextureLoader()
-    // loader.crossOrigin = 'anonymous'
-    // texture.minFilter = THREE.LinearFilter
-material.panel={}
-    
-    for(let k=0;k<defaultTextureUrls.length;k++){
-        let texture=loader.load(defaultTextureUrls[k], function (texture) {})
-        material.panel['default_'+k] = new THREE.MeshBasicMaterial({
-            map: texture,
-            side: THREE.DoubleSide,
-            transparent: true
-        })
-    }
+material.edge = new THREE.MeshPhongMaterial({
+  color: beamColor,
+  transparent: true,
+  opacity: beamOpacity
+})
+material.node = new THREE.PointsMaterial({
+  size: 0.05,
+  sizeAttenuation: true,
+  color: node3DColor,
+  opacity: node3dOpacity,
+  transparent: true
+})
+const loader = new THREE.TextureLoader()
+// loader.crossOrigin = 'anonymous'
+// texture.minFilter = THREE.LinearFilter
+material.panel = {}
+
+for (let k = 0; k < defaultTextureUrls.length; k++) {
+  let texture = loader.load(defaultTextureUrls[k], function (texture) {})
+  material.panel['default_' + k] = new THREE.MeshBasicMaterial({
+    map: texture,
+    side: THREE.DoubleSide,
+    transparent: true
+  })
+}
 
 material.flatRoof = new THREE.MeshPhongMaterial({
-        color: 0x00ff00,
-        specular: 0x009900,
-        shininess: 0,
-        flatShading: true,
-        side:THREE.DoubleSide,
-        transparent:true,
-        opacity:0.5
-    })
+  color: 0x00ff00,
+  specular: 0x009900,
+  shininess: 0,
+  flatShading: true,
+  side: THREE.DoubleSide,
+  transparent: true,
+  opacity: 0.5
+})
 
 material.moduleField = new THREE.MeshPhongMaterial({
-        color: 0xfc9d03,
-        specular: 0x000000,
-        shininess: 0,
-        flatShading: true,
-        side:THREE.DoubleSide,
-        transparent:true,
-        opacity:0.6
-})    
+  color: 0xfc9d03,
+  specular: 0x000000,
+  shininess: 0,
+  flatShading: true,
+  side: THREE.DoubleSide,
+  transparent: true,
+  opacity: 0.6
+})
 material.curvedRoof = new THREE.MeshPhongMaterial({
-        color: 0xffff00,
-        specular: 0x009900,
-        shininess: 0,
-        flatShading: true,
-        side:THREE.DoubleSide,
-        transparent:true,
-        opacity:0.5
-    })
-
+  color: 0xffff00,
+  specular: 0x009900,
+  shininess: 0,
+  flatShading: true,
+  side: THREE.DoubleSide,
+  transparent: true,
+  opacity: 0.5
+})
 
-export {material}
+export { material }

package/src/helper/render/background.js

@@ -1,8 +1,5 @@
 import * as THREE from 'three'
 
-
 export default {
-    methods:{
-      
-    }
-}
+  methods: {}
+}