@eturnity/eturnity_3d 6.34.0 → 6.34.1

package/src/helper/render/imageOverlay.js

@@ -1,5 +1,5 @@
 import * as THREE from 'three'
-import {mapGetters} from 'vuex'
+import { mapGetters } from 'vuex'
 import ProjectedMaterial from 'three-projected-material'
 import {
   substractVector,
@@ -8,119 +8,170 @@ import {
   getDistanceBetweenPoints,
   getAngleInDegFromCanvasVector
 } from '@eturnity/eturnity_maths'
-import {getBufferImageOverlayGeometry,updateBufferRoofGeometry} from './geometryHandler'
+import {
+  getBufferImageOverlayGeometry,
+  updateBufferRoofGeometry
+} from './geometryHandler'
 
 export default {
-    data(){
-        return {
-            imageOverlayProjectionCamera: new THREE.PerspectiveCamera(1, 300 / 300, 100, 1000),
-            imageOverlayTexture:null,
-            imageOverlayMaterial:null,
-        }
+  data() {
+    return {
+      imageOverlayProjectionCamera: new THREE.PerspectiveCamera(
+        1,
+        300 / 300,
+        100,
+        1000
+      ),
+      imageOverlayTexture: null,
+      imageOverlayMaterial: null
+    }
+  },
+  computed: {
+    ...mapGetters({
+      imageOverlay: 'getImageOverlay'
+    })
+  },
+  methods: {
+    renderImageOverlayOnBackground() {
+      if (!this.imageOverlay || !this.imageOverlayMaterial) {
+        this.clearMesh(this.meshes.backgroundMesh)
+        this.meshes.backgroundMesh = null
+        return
+      }
+      let corners = this.imageOverlay.corners.map((p) => {
+        return { ...p, z: 100 }
+      })
+      if (this.meshes.backgroundMesh && this.meshes.backgroundMesh.geometry) {
+        let geometry = this.meshes.backgroundMesh.geometry
+        geometry = updateBufferRoofGeometry(corners, [], geometry)
+        //updateBufferRoofGeometry(corners,[],geometry)
+        this.meshes.backgroundMesh.geometry = geometry
+      } else {
+        let planeGeometry = getBufferImageOverlayGeometry(corners)
+        let planeMaterial = this.imageOverlayMaterial
+
+        this.meshes.backgroundMesh = new THREE.Mesh(
+          planeGeometry,
+          planeMaterial
+        )
+        this.scene.add(this.meshes.backgroundMesh)
+      }
+      this.meshes.backgroundMesh.position.z = 0.15
+      if (this.imageOverlayMaterial) {
+        this.applyTextureOnMesh(
+          [this.imageOverlayMaterial],
+          this.meshes.backgroundMesh
+        )
+      }
+      this.meshes.backgroundMesh.visible = true
     },
-    computed:{
-        ...mapGetters({
-            imageOverlay: 'getImageOverlay',
-          }), 
+    async changeImageOverlay() {
+      if (this.imageOverlayMaterial) {
+        this.imageOverlayMaterial.dispose()
+        this.imageOverlayMaterial = null
+      }
+      await this.updateProjectionMaterials()
     },
-    methods:{    
-      renderImageOverlayOnBackground() {
-        if(!this.imageOverlay || !this.imageOverlayMaterial){
-        this.clearMesh(this.meshes.backgroundMesh)
-        this.meshes.backgroundMesh=null
-         return
-        }
-        let corners=this.imageOverlay.corners.map(p=>{return {...p,z:100}})
-        if(this.meshes.backgroundMesh && this.meshes.backgroundMesh.geometry){
-          let geometry=this.meshes.backgroundMesh.geometry
-          geometry=updateBufferRoofGeometry(corners,[],geometry)
-          //updateBufferRoofGeometry(corners,[],geometry)
-          this.meshes.backgroundMesh.geometry=geometry
-              
-        }else{
-          let planeGeometry = getBufferImageOverlayGeometry(corners)
-          let planeMaterial = this.imageOverlayMaterial
-          
-          this.meshes.backgroundMesh = new THREE.Mesh(planeGeometry, planeMaterial)
-          this.scene.add(this.meshes.backgroundMesh)
-        }
-        this.meshes.backgroundMesh.position.z=0.15
-        if(this.imageOverlayMaterial){
-          this.applyTextureOnMesh([this.imageOverlayMaterial],this.meshes.backgroundMesh)
-        }
-        this.meshes.backgroundMesh.visible=true
-      },
-      async changeImageOverlay(){
-        if(this.imageOverlayMaterial){
+    async getImageOverlayMaterial() {
+      if (!this.imageOverlay || !this.imageOverlay.url) {
+        if (this.imageOverlayMaterial) {
           this.imageOverlayMaterial.dispose()
-          this.imageOverlayMaterial=null
-        }
-        await this.updateProjectionMaterials()
-      },
-      async getImageOverlayMaterial(){
-        if(!this.imageOverlay || !this.imageOverlay.url){
-          if(this.imageOverlayMaterial){
-            this.imageOverlayMaterial.dispose()
-          }
-          this.imageOverlayMaterial=null
-          return null
         }
+        this.imageOverlayMaterial = null
+        return null
+      }
 
-        if(!this.imageOverlayMaterial || this.imageOverlay.url!= this.imageOverlayMaterial.userData.url){
-          this.imageOverlayMaterial = await this.newImageOverlayMaterial()
-        }else{
+      if (
+        !this.imageOverlayMaterial ||
+        this.imageOverlay.url != this.imageOverlayMaterial.userData.url
+      ) {
+        this.imageOverlayMaterial = await this.newImageOverlayMaterial()
+      } else {
+        this.setImageOverlayCameraPosition()
+      }
+      return this.imageOverlayMaterial
+    },
+    removeImageOverlay() {
+      if (this.imageOverlayMaterial && this.imageOverlayMaterial.dispose)
+        this.imageOverlayMaterial.dispose()
+      this.imageOverlayMaterial = null
+      this.material.roof = this.material.roof.filter(
+        (material) => material.userData.type != 'imageOverlayMaterial'
+      )
+    },
+    async newImageOverlayMaterial() {
+      return new Promise((resolve) => {
+        this.loader.load(this.imageOverlay.url, (texture) => {
+          this.imageOverlayTexture = texture
           this.setImageOverlayCameraPosition()
-        }
-        return this.imageOverlayMaterial
-      },
-      removeImageOverlay(){
-        if(this.imageOverlayMaterial && this.imageOverlayMaterial.dispose)
-            this.imageOverlayMaterial.dispose()
-        this.imageOverlayMaterial=null
-        this.material.roof=this.material.roof.filter(material=>material.userData.type!='imageOverlayMaterial')
-      },
-      async newImageOverlayMaterial(){
-        return new Promise((resolve)=>{this.loader.load(this.imageOverlay.url,(texture)=>{
-                this.imageOverlayTexture=texture
-                this.setImageOverlayCameraPosition()
-                let imageOverlayProjectionMaterial = new ProjectedMaterial({
-                    camera: this.imageOverlayProjectionCamera,
-                    texture: this.imageOverlayTexture,
-                    transparent: true,
-                    side: THREE.DoubleSide,
-                    depthWrite: false
-                })
-                imageOverlayProjectionMaterial.userData={}
-                imageOverlayProjectionMaterial.userData.type="imageOverlayMaterial"
-                imageOverlayProjectionMaterial.userData.priority=2
-                imageOverlayProjectionMaterial.userData.url=this.imageOverlay.url
-                resolve(imageOverlayProjectionMaterial)
-                })
-            })
-        },
-        setImageOverlayCameraPosition(){
-          if(!this.imageOverlay || !this.imageOverlay.url) return
-          let height=getDistanceBetweenPoints(this.imageOverlay.corners[1],this.imageOverlay.corners[2])
-          let width=getDistanceBetweenPoints(this.imageOverlay.corners[0],this.imageOverlay.corners[1])
-          this.imageOverlayProjectionCamera.aspect =
-              width / height
-          let projectionAltitude = height /(2 * Math.tan((this.imageOverlayProjectionCamera.fov * Math.PI) / 360))
+          let imageOverlayProjectionMaterial = new ProjectedMaterial({
+            camera: this.imageOverlayProjectionCamera,
+            texture: this.imageOverlayTexture,
+            transparent: true,
+            side: THREE.DoubleSide,
+            depthWrite: false
+          })
+          imageOverlayProjectionMaterial.userData = {}
+          imageOverlayProjectionMaterial.userData.type = 'imageOverlayMaterial'
+          imageOverlayProjectionMaterial.userData.priority = 2
+          imageOverlayProjectionMaterial.userData.url = this.imageOverlay.url
+          resolve(imageOverlayProjectionMaterial)
+        })
+      })
+    },
+    setImageOverlayCameraPosition() {
+      if (!this.imageOverlay || !this.imageOverlay.url) return
+      let height = getDistanceBetweenPoints(
+        this.imageOverlay.corners[1],
+        this.imageOverlay.corners[2]
+      )
+      let width = getDistanceBetweenPoints(
+        this.imageOverlay.corners[0],
+        this.imageOverlay.corners[1]
+      )
+      this.imageOverlayProjectionCamera.aspect = width / height
+      let projectionAltitude =
+        height /
+        (2 * Math.tan((this.imageOverlayProjectionCamera.fov * Math.PI) / 360))
+
+      //set projection camera over background_map_center
+      let imageOverlayProjectionCameraPosition = {
+        x: 0,
+        y: 0,
+        z: projectionAltitude / 1000
+      }
 
+      let positionInMm = multiplyVector(
+        0.5,
+        addVector(this.imageOverlay.corners[0], this.imageOverlay.corners[2])
+      )
+      imageOverlayProjectionCameraPosition.x = positionInMm.x / 1000
+      imageOverlayProjectionCameraPosition.y = positionInMm.y / 1000
 
-              //set projection camera over background_map_center
-              let imageOverlayProjectionCameraPosition={x:0,y:0,z:projectionAltitude / 1000}
-              
-              let positionInMm=multiplyVector(0.5,addVector(this.imageOverlay.corners[0],this.imageOverlay.corners[2]))
-              imageOverlayProjectionCameraPosition.x=positionInMm.x/1000
-              imageOverlayProjectionCameraPosition.y=positionInMm.y/1000
-              
-          this.imageOverlayProjectionCamera.position.set(imageOverlayProjectionCameraPosition.x, imageOverlayProjectionCameraPosition.y, projectionAltitude / 1000)
-          this.imageOverlayProjectionCamera.lookAt(imageOverlayProjectionCameraPosition.x, imageOverlayProjectionCameraPosition.y,0)
-          let zAngle=getAngleInDegFromCanvasVector(substractVector(this.imageOverlay.corners[3],this.imageOverlay.corners[0]))
-          this.imageOverlayProjectionCamera.rotation.set(0, 0, zAngle*Math.PI/180)
-          this.imageOverlayProjectionCamera.far = projectionAltitude * 1.5
-          this.imageOverlayProjectionCamera.near = projectionAltitude * 0.8
-          this.imageOverlayProjectionCamera.updateProjectionMatrix()
-        },
+      this.imageOverlayProjectionCamera.position.set(
+        imageOverlayProjectionCameraPosition.x,
+        imageOverlayProjectionCameraPosition.y,
+        projectionAltitude / 1000
+      )
+      this.imageOverlayProjectionCamera.lookAt(
+        imageOverlayProjectionCameraPosition.x,
+        imageOverlayProjectionCameraPosition.y,
+        0
+      )
+      let zAngle = getAngleInDegFromCanvasVector(
+        substractVector(
+          this.imageOverlay.corners[3],
+          this.imageOverlay.corners[0]
+        )
+      )
+      this.imageOverlayProjectionCamera.rotation.set(
+        0,
+        0,
+        (zAngle * Math.PI) / 180
+      )
+      this.imageOverlayProjectionCamera.far = projectionAltitude * 1.5
+      this.imageOverlayProjectionCamera.near = projectionAltitude * 0.8
+      this.imageOverlayProjectionCamera.updateProjectionMatrix()
     }
-}
+  }
+}

package/src/helper/render/index.js

@@ -13,8 +13,26 @@ import imageOverlay from './imageOverlay'
 import mapProjection from './mapProjection'
 import texture from './texture'
 import projectionMaterial from './projectionMaterial'
+import tile from './tile'
 
 export default {
-    //mixins:[node,background,clear,edge,loader,margin,moduleField,obstacle,panel,roof,base]
-    mixins:[margin,node,background, base,roof,edge,obstacle,moduleField,panel,clear,loader,imageOverlay,texture,mapProjection,projectionMaterial]
-}
+  //mixins:[node,background,clear,edge,loader,margin,moduleField,obstacle,panel,roof,base]
+  mixins: [
+    margin,
+    node,
+    background,
+    base,
+    roof,
+    edge,
+    obstacle,
+    moduleField,
+    panel,
+    clear,
+    loader,
+    imageOverlay,
+    texture,
+    mapProjection,
+    projectionMaterial,
+    tile
+  ]
+}

package/src/helper/render/loader.js

@@ -2,41 +2,41 @@ import * as THREE from 'three'
 import ProjectedMaterial from 'three-projected-material'
 
 export default {
-    methods:{
-      loadNewPanelTextures(){
-        Object.values(this.pvDataMemo).forEach((component) => {
-          const pvId = component.id
-          if (!this.material.panel[pvId]) {
-            if (!component.texture_img_url) {
-              this.material.panel[pvId] = this.material.panel.default
-            } else {           
-              let texture = this.loader.load(component.texture_img_url)
-              this.material.panel[pvId] = new THREE.MeshBasicMaterial({
-                map: texture,
-                side: THREE.DoubleSide,
-                transparent: true
-              })
-            }
+  methods: {
+    loadNewPanelTextures() {
+      Object.values(this.pvDataMemo).forEach((component) => {
+        const pvId = component.id
+        if (!this.material.panel[pvId]) {
+          if (!component.texture_img_url) {
+            this.material.panel[pvId] = this.material.panel.default
+          } else {
+            let texture = this.loader.load(component.texture_img_url)
+            this.material.panel[pvId] = new THREE.MeshBasicMaterial({
+              map: texture,
+              side: THREE.DoubleSide,
+              transparent: true
+            })
           }
-        })
-      },
-      async loadPanelsTexture(){
-        for(let k=0;k<this.moduleFields.length;k++){
-          let mf=this.moduleFields[k]
-          const pvId = mf.data.component_id_pv_module
-          if (!this.material.panel[pvId]) {
-            if (!mf.data.texture_img_url) {
-              this.material.panel[pvId] = this.material.panel.default
-            } else {    
-              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
-              })
-            }
+        }
+      })
+    },
+    async loadPanelsTexture() {
+      for (let k = 0; k < this.moduleFields.length; k++) {
+        let mf = this.moduleFields[k]
+        const pvId = mf.data.component_id_pv_module
+        if (!this.material.panel[pvId]) {
+          if (!mf.data.texture_img_url) {
+            this.material.panel[pvId] = this.material.panel.default
+          } else {
+            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
+            })
           }
         }
-      },
+      }
     }
-}
+  }
+}

package/src/helper/render/mapProjection.js

@@ -2,85 +2,99 @@ import * as THREE from 'three'
 import ProjectedMaterial from 'three-projected-material'
 
 export default {
-    data(){
-      return {
-        mapProjectionTexture:null,
-        mapProjectionMaterial:null
+  data() {
+    return {
+      mapProjectionTexture: null,
+      mapProjectionMaterial: null
+    }
+  },
+  methods: {
+    async changeMapProjection() {
+      if (this.mapProjectionMaterial) {
+        this.mapProjectionMaterial.dispose()
+        this.mapProjectionMaterial = null
       }
+      await this.updateProjectionMaterials()
     },
-    methods:{
-      async changeMapProjection(){
-        if(this.mapProjectionMaterial){
-          this.mapProjectionMaterial.dispose()
-          this.mapProjectionMaterial=null
-        }
-        await this.updateProjectionMaterials()
-      },
-      async getMapProjectionMaterial(){
-        if(!this.layoutSettings.base64_image_url){
-          return null
-        }else{
-          if(!this.mapProjectionMaterial){
-            this.mapProjectionMaterial = await this.newMapProjectionMaterial()
-          }else{
-            this.setMapProjectionCameraPosition()
-          }
-        }
-        return this.mapProjectionMaterial
-      },
-     
-      async newMapProjectionMaterial() {
-            return new Promise((resolve,reject) => {
-              this.loader.load(this.layoutSettings.base64_image_url,(texture)=>{
-                this.mapProjectionTexture=texture
-                this.setMapProjectionCameraPosition()
-                let mapProjectionMaterial = new ProjectedMaterial({
-                  camera: this.cameraprojection,
-                  texture: texture,
-                  transparent: true,
-                  side: THREE.DoubleSide,
-                })
-                mapProjectionMaterial.userData={}
-                mapProjectionMaterial.userData.type="mapProjectionMaterial"
-                mapProjectionMaterial.userData.priority=1
-                mapProjectionMaterial.userData.url=this.layoutSettings.base64_image_url
-                resolve(mapProjectionMaterial)
-              })
-            })
-      },
-      setMapProjectionCameraPosition(){
-        let backgroundImageCenter={
-          lat:this.layoutSettings.layout_latitude,
-          lng:this.layoutSettings.layout_longitude
+    async getMapProjectionMaterial() {
+      if (!this.layoutSettings.base64_image_url) {
+        return null
+      } else {
+        if (!this.mapProjectionMaterial) {
+          this.mapProjectionMaterial = await this.newMapProjectionMaterial()
+        } else {
+          this.setMapProjectionCameraPosition()
         }
-        if(this.layoutSettings.background_map_settings){
-          backgroundImageCenter={
-            lat:this.layoutSettings.background_map_settings.lat,
-            lng:this.layoutSettings.background_map_settings.lng
-          }
+      }
+      return this.mapProjectionMaterial
+    },
+
+    async newMapProjectionMaterial() {
+      return new Promise((resolve, reject) => {
+        this.loader.load(this.layoutSettings.base64_image_url, (texture) => {
+          this.mapProjectionTexture = texture
+          this.setMapProjectionCameraPosition()
+          let mapProjectionMaterial = new ProjectedMaterial({
+            camera: this.cameraprojection,
+            texture: texture,
+            transparent: true,
+            side: THREE.DoubleSide
+          })
+          mapProjectionMaterial.userData = {}
+          mapProjectionMaterial.userData.type = 'mapProjectionMaterial'
+          mapProjectionMaterial.userData.priority = 1
+          mapProjectionMaterial.userData.url =
+            this.layoutSettings.base64_image_url
+          resolve(mapProjectionMaterial)
+        })
+      })
+    },
+    setMapProjectionCameraPosition() {
+      let backgroundImageCenter = {
+        lat: this.layoutSettings.layout_latitude,
+        lng: this.layoutSettings.layout_longitude
+      }
+      if (this.layoutSettings.background_map_settings) {
+        backgroundImageCenter = {
+          lat: this.layoutSettings.background_map_settings.lat,
+          lng: this.layoutSettings.background_map_settings.lng
         }
-        this.backgroundImagesizeInMm=this.layoutSettings.background_map_settings.sizeInMm
-        if (this.backgroundImagesizeInMm) {
-          this.cameraprojection.aspect =
-            this.backgroundImagesizeInMm.width / this.backgroundImagesizeInMm.height
-          let projectionAltitude =
+      }
+      this.backgroundImagesizeInMm =
+        this.layoutSettings.background_map_settings.sizeInMm
+      if (this.backgroundImagesizeInMm) {
+        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={x:0,y:0,z:projectionAltitude / 1000}
-            if(this.layoutSettings.background_map_settings && this.layoutSettings.background_map_settings.positionInMm){
-              let positionInMm=this.layoutSettings.background_map_settings.positionInMm
-              cameraProjectionPosition.x=positionInMm.x/1000
-              cameraProjectionPosition.y=positionInMm.y/1000
-            }
-          
-          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()
+        //set projection camera over background_map_center
+        let cameraProjectionPosition = {
+          x: 0,
+          y: 0,
+          z: projectionAltitude / 1000
         }
-      },
-      
+        if (
+          this.layoutSettings.background_map_settings &&
+          this.layoutSettings.background_map_settings.positionInMm
+        ) {
+          let positionInMm =
+            this.layoutSettings.background_map_settings.positionInMm
+          cameraProjectionPosition.x = positionInMm.x / 1000
+          cameraProjectionPosition.y = positionInMm.y / 1000
+        }
+
+        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()
+      }
     }
-}
+  }
+}