@eturnity/eturnity_3d 6.34.0 → 6.34.1

package/src/helper/renderMixin.js

@@ -7,17 +7,6 @@ export default {
   mixins: [renderMixin, cameraMixin],
   data() {
     return {
-      meshes: {
-        baseMeshes: {},
-        roofMeshes: {},
-        flatRoofMeshes: {},
-        obstacleMeshes: {},
-        panelsMeshes: {},
-        nodeMeshes: null,
-        edgeMeshes: {},
-        roofMarginMeshes: {},
-        moduleFieldsMeshes: {}
-      },
       lastTic: new Date().getTime() * 1e4,
       //lastTic:(new Date()).getTime()
       lastGeometryEventIdDone: -1,
@@ -34,7 +23,8 @@ export default {
       nodeMeshes: null,
       edgeMeshes: {},
       roofMarginMeshes: {},
-      moduleFieldsMeshes: {}
+      moduleFieldsMeshes: {},
+      tileMeshes: {}
     }
   },
 
@@ -46,7 +36,6 @@ export default {
       selectedMapLayer: (state) => state.threeDModule.selectedMapLayer,
       panelOpacity: (state) => state.threeDModule.panelOpacity,
       pvDataMemo: (state) => state.threeDModule.pvDataMemo
-
     }),
     ...mapGetters({
       selectedTool: 'getSelectedTool',
@@ -198,8 +187,8 @@ export default {
           break
         case 'backgroundTextureChange':
           methodList.push({
-            name: 'initialiseThreeMap',
-            method: this.initialiseThreeMap,
+            name: 'renderTiles',
+            method: this.renderTiles,
             arg: []
           })
           break
@@ -214,23 +203,28 @@ export default {
             method: this.applyTextureOnRoofs,
             arg: []
           })
+          methodList.push({
+            name: 'renderTiles',
+            method: this.renderTiles,
+            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
+        // 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':
@@ -270,8 +264,8 @@ export default {
       this.renderEdges()
       this.renderFlatRoofs()
     },
-   
-    async initializeProjectionMaterial(){
+
+    async initializeProjectionMaterial() {
       await this.updateProjectionMaterials()
       this.applyTextureOnRoofs()
     },
@@ -362,10 +356,9 @@ export default {
     this.scene = null
     this.camera = null
     this.cameraprojection = null
-    Object.values(this.material).forEach((m) =>{
-      if(m && m.dispose)
-        m.dispose()
-    } )
+    Object.values(this.material).forEach((m) => {
+      if (m && m.dispose) m.dispose()
+    })
     this.material = null
     this.orbitControl = null
     this.raycaster = null

package/src/helper/threeMixin.js

@@ -1,79 +1,14 @@
 import * as THREE from 'three'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import { Sky } from 'three/examples/jsm/objects/Sky.js'
-import {UnitsUtils,MapView} from './geo-three.module.js'
-import {CustomProvider} from './customProvider'
+import { CustomProvider } from './customProvider'
 
 export default {
-  methods:{
-    initialiseThreeMap(){
-      if(this.three_map){
-        this.three_map.clear()
-        this.scene.remove(this.three_map)
-        this.clearThreeObjects(this.three_map)
-      }
-      if(this.background_map){
-        this.background_map.clear()
-        this.scene.remove(this.background_map)
-        this.clearThreeObjects(this.background_map)
-      }
-      this.background_map=new THREE.Group();
+  methods: {
+    initialiseThreeMap() {
       //Extention of the map with geo-map
-      if(this.selectedMapLayer && !['googleLayerRoadmap','googleLayer','googleLayerTerrain'].includes(this.selectedMapLayer.key)){
-        this.provider = new CustomProvider('',this.selectedMapLayer.key);
-        // Create the map view and add it to your THREE scene
-        this.three_map = new MapView(MapView.PLANAR, this.provider);
-        this.three_map.rotateX(Math.PI / 2)
-        const coef=Math.cos(this.layoutSettings.layout_latitude*Math.PI/180)
-        this.three_map.scale.set(2*20015111.9287618*coef, 1, 2*20015111.9287618*coef);
-        var coords = UnitsUtils.datumsToSpherical(this.layoutSettings.layout_latitude, this.layoutSettings.layout_longitude)
-        this.three_map.position.set(-coords.x*coef,-coords.y*coef,0)
-        this.scene.add(this.three_map)
-      }else{
-          let googleMapType='satellite'
-          switch(this.selectedMapLayer.key){
-            case 'googleLayerRoadmap':
-              googleMapType='roadmap'
-              break;
-            case 'googleLayer':
-              googleMapType='satellite'
-              break;
-            case 'googleLayerTerrain':
-              googleMapType='terrain'
-              break;
-      
-          }
-          
-          let apiKey = process.env.VUE_APP_GOOGLE_MAP_API_KEY
-          let backgroundPlane=[]
-          let size=640
-          let planeGeometry=[]
-          let planeMaterial=[]
-          let texture=[]
-          let zoomLevels=[19,16]
-          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)
-            let googleBackgroundUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${
-              this.layoutSettings.layout_latitude +
-              ',' +
-              this.layoutSettings.layout_longitude
-            }&maptype=${googleMapType}&zoom=${zoomLevel}&size=${size}x${size}&key=${apiKey}`
-      
-            texture[indexGoogleBackground] = this.loader.load(googleBackgroundUrl)
-            planeMaterial[indexGoogleBackground] = new THREE.MeshBasicMaterial({
-              map: texture[indexGoogleBackground],
-              side: THREE.DoubleSide
-            })
-            backgroundPlane[indexGoogleBackground] = new THREE.Mesh(planeGeometry[indexGoogleBackground], planeMaterial[indexGoogleBackground])
-            backgroundPlane[indexGoogleBackground].position.z = -indexGoogleBackground/2
-            this.background_map.add(backgroundPlane[indexGoogleBackground])
-          }
-        
-      }
-      this.scene.add(this.background_map)
+      this.provider = new CustomProvider('', this.selectedMapLayer.key)
+      this.renderTiles()
     },
     initSky() {
       // Add Sky
@@ -83,69 +18,75 @@ export default {
       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['mieCoefficient'].value = 0.01
       uniforms['mieDirectionalG'].value = 0.1
-      const elevation=10
-      const azimuth=-20
+      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
+      sun = null
     },
     initialiseThree(isInteractive = true) {
+      //this.loader.crossOrigin = null
 
-      //this.loader.crossOrigin = null 
-      
       this.scene.background = new THREE.Color(0xb0b0b0)
 
       this.camera.position.set(0, -100, 50)
       this.camera.up.set(0, 0, 1)
-    
-      this.cameraprojection = new THREE.PerspectiveCamera(1, 300 / 300, 100, 1000)
+
+      this.cameraprojection = new THREE.PerspectiveCamera(
+        1,
+        300 / 300,
+        100,
+        1000
+      )
       this.cameraprojection.position.set(0, 0, 24)
       this.cameraprojection.up.set(0, 0, 1)
-    
+
       // const helper = new THREE.CameraHelper( this.cameraprojection );
       // this.scene.add( helper );
-    
+
       // const axesHelper = new THREE.AxesHelper( 20 );
       // this.scene.add( axesHelper );
       //Light
       const ambientLight = new THREE.AmbientLight(0xf0f0f0, 0.5)
       this.scene.add(ambientLight)
-      
-      var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
-      directionalLight.position.set(0, 1000, 500);
-      var directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.5);
-      directionalLight2.position.set(0, -1000, 500);
-      this.scene.add(directionalLight);
-      this.scene.add(directionalLight2);
-       
+
+      var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5)
+      directionalLight.position.set(0, 1000, 500)
+      var directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.5)
+      directionalLight2.position.set(0, -1000, 500)
+      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)
-      
+
       //sky
       this.initSky()
-      if(isInteractive){
-        this.orbitControl=new OrbitControls(this.camera, this.renderer.domElement)
-        this.orbitControl.maxPolarAngle=(Math.PI/2)*(87/90)
+      if (isInteractive) {
+        this.orbitControl = new OrbitControls(
+          this.camera,
+          this.renderer.domElement
+        )
+        this.orbitControl.maxPolarAngle = (Math.PI / 2) * (87 / 90)
       }
       window.addEventListener('resize', this.onWindowResize, false)
-    
+
       ambientLight.dispose()
       directionalLight.dispose()
       directionalLight2.dispose()
-    
     },
     onWindowResize() {
       this.camera.aspect = window.innerWidth / window.innerHeight
@@ -173,8 +114,6 @@ export default {
 
         // update any render target sizes here
       }
-    },
-    
-  },
-  
-}
+    }
+  }
+}

package/src/main.js

@@ -1,28 +1,32 @@
-import Vue from "vue";
+import Vue from 'vue'
 import Vuex from 'vuex'
 import App from './App.vue'
 // import axios from 'axios'
 import threeDModule from './store/three-d-module'
 
-  
 Vue.use(Vuex)
 
 const Renderer = class {
-    constructor(){}
-    mount(identifier,geometryData,specificData,isInteractive=false){
-        const myStore = new Vuex.Store({
-          modules:{
-            threeDModule:{
-              ...threeDModule,
-              state:{...threeDModule.state,geometryData,...specificData,isInteractive}
-            }
+  constructor() {}
+  mount(identifier, geometryData, specificData, isInteractive = false) {
+    const myStore = new Vuex.Store({
+      modules: {
+        threeDModule: {
+          ...threeDModule,
+          state: {
+            ...threeDModule.state,
+            geometryData,
+            ...specificData,
+            isInteractive
           }
-        })
-        this.App=new Vue({
-          store:myStore,
-          render: (h) => h(App),
-        })
-        this.App.$mount(identifier)
-    }
+        }
+      }
+    })
+    this.App = new Vue({
+      store: myStore,
+      render: (h) => h(App)
+    })
+    this.App.$mount(identifier)
+  }
 }
-export {Renderer}
+export { Renderer }

package/src/store/AddMargin.js

@@ -1,107 +1,111 @@
-import {
-    multiplyVector,
-    getMarginPoint,
-  } from '@eturnity/eturnity_maths'
+import { multiplyVector, getMarginPoint } from '@eturnity/eturnity_maths'
 
-  
-  export function updateMarginsOutline(state){
-    state.polygons.filter(p=>p.layer=='roof').forEach(polygon=>{
-      polygon=getRoofMarginOutline(polygon)
+export function updateMarginsOutline(state) {
+  state.polygons
+    .filter((p) => p.layer == 'roof')
+    .forEach((polygon) => {
+      polygon = getRoofMarginOutline(polygon)
     })
-    state.polygons.filter(p=>p.layer=='obstacle').forEach(polygon=>{
-      polygon=getObstacleMarginOutline(polygon)
+  state.polygons
+    .filter((p) => p.layer == 'obstacle')
+    .forEach((polygon) => {
+      polygon = getObstacleMarginOutline(polygon)
     })
-    return state
-  }  
+  return state
+}
 
-  export function updateMarginOutlinePolygon(polygon){
-    if(polygon.layer=="roof"){
-      return getRoofMarginOutline(polygon)
-    }else if(polygon.layer=='obstacle'){
-      return getObstacleMarginOutline(polygon)
-    }else{
-      return polygon
-    }
+export function updateMarginOutlinePolygon(polygon) {
+  if (polygon.layer == 'roof') {
+    return getRoofMarginOutline(polygon)
+  } else if (polygon.layer == 'obstacle') {
+    return getObstacleMarginOutline(polygon)
+  } else {
+    return polygon
   }
-  
-export function getRoofMarginOutline(polygon){
-    
-    let clockwiseNormalVector=polygon.normalVector
-    if(!polygon.isClockwise){
-      clockwiseNormalVector=multiplyVector(-1,clockwiseNormalVector)
-    }
-    //outterOutline is the outline close to the wall
-    polygon.margins.outterOutline=polygon.flatOutline
-    polygon.margins.innerOutline=[]
-    const length=polygon.margins.outterOutline.length
-    for(let index=0;index<length;index++){
-      const B=polygon.margins.outterOutline[index]
-      //A,B,C three consecutive points on the polygon.
-      //n is a vector in the plan normal to AB of length margin[A] directed towards the inside
-      //m is a vector in the plan normal to BC of length margin[B] directed towards the inside
-      //K is the margin outline linked with B
-      const A=polygon.margins.outterOutline[(index-1+length)%length]
-      const C=polygon.margins.outterOutline[(index+1)%length]
-      //filling the margins values if not initiated.
-      let marginA
-      let marginB
-      if(polygon.margins.isSameMargin){
-        marginA=polygon.margins.sameMargin
-        marginB=polygon.margins.sameMargin
-        polygon.margins.distances[index]=polygon.margins.sameMargin
-      }else{
-        if(!polygon.margins.distances[(index-1+length)%length]===undefined){
-          polygon.margins.distances[(index-1+length)%length]=polygon.margins.sameMargin
-        }
-        if(!polygon.margins.distances[index]===undefined){
-          polygon.margins.distances[index]=polygon.margins.sameMargin
-        }
-        marginA=polygon.margins.distances[(index-1+length)%length]
-        marginB=polygon.margins.distances[index]
+}
+
+export function getRoofMarginOutline(polygon) {
+  let clockwiseNormalVector = polygon.normalVector
+  if (!polygon.isClockwise) {
+    clockwiseNormalVector = multiplyVector(-1, clockwiseNormalVector)
+  }
+  //outterOutline is the outline close to the wall
+  polygon.margins.outterOutline = polygon.flatOutline
+  polygon.margins.innerOutline = []
+  const length = polygon.margins.outterOutline.length
+  for (let index = 0; index < length; index++) {
+    const B = polygon.margins.outterOutline[index]
+    //A,B,C three consecutive points on the polygon.
+    //n is a vector in the plan normal to AB of length margin[A] directed towards the inside
+    //m is a vector in the plan normal to BC of length margin[B] directed towards the inside
+    //K is the margin outline linked with B
+    const A = polygon.margins.outterOutline[(index - 1 + length) % length]
+    const C = polygon.margins.outterOutline[(index + 1) % length]
+    //filling the margins values if not initiated.
+    let marginA
+    let marginB
+    if (polygon.margins.isSameMargin) {
+      marginA = polygon.margins.sameMargin
+      marginB = polygon.margins.sameMargin
+      polygon.margins.distances[index] = polygon.margins.sameMargin
+    } else {
+      if (
+        !polygon.margins.distances[(index - 1 + length) % length] === undefined
+      ) {
+        polygon.margins.distances[(index - 1 + length) % length] =
+          polygon.margins.sameMargin
+      }
+      if (!polygon.margins.distances[index] === undefined) {
+        polygon.margins.distances[index] = polygon.margins.sameMargin
       }
-      let K=getMarginPoint(A,B,C,marginA,marginB,clockwiseNormalVector)
-      polygon.margins.innerOutline.push(K)
+      marginA = polygon.margins.distances[(index - 1 + length) % length]
+      marginB = polygon.margins.distances[index]
     }
-    return polygon
+    let K = getMarginPoint(A, B, C, marginA, marginB, clockwiseNormalVector)
+    polygon.margins.innerOutline.push(K)
   }
+  return polygon
+}
 
-
-export function getObstacleMarginOutline(polygon){
-  let clockwiseNormalVector=polygon.normalVector
-  if(polygon.isClockwise){
-    clockwiseNormalVector=multiplyVector(-1,clockwiseNormalVector)
+export function getObstacleMarginOutline(polygon) {
+  let clockwiseNormalVector = polygon.normalVector
+  if (polygon.isClockwise) {
+    clockwiseNormalVector = multiplyVector(-1, clockwiseNormalVector)
   }
   //outterOutline is the outline close to the wall
-  polygon.margins.innerOutline=polygon.flatOutline
-  polygon.margins.outterOutline=[]
-  const length=polygon.margins.innerOutline.length
-  for(let index=0;index<length;index++){
-    const B=polygon.margins.innerOutline[index]
+  polygon.margins.innerOutline = polygon.flatOutline
+  polygon.margins.outterOutline = []
+  const length = polygon.margins.innerOutline.length
+  for (let index = 0; index < length; index++) {
+    const B = polygon.margins.innerOutline[index]
     //A,B,C three consecutive points on the polygon.
     //n is a vector in the plan normal to AB of length margin[A] directed towards the inside
     //m is a vector in the plan normal to BC of length margin[B] directed towards the inside
     //K is the margin outline linked with B
-    const A=polygon.margins.innerOutline[(index-1+length)%length]
-    const C=polygon.margins.innerOutline[(index+1)%length]
+    const A = polygon.margins.innerOutline[(index - 1 + length) % length]
+    const C = polygon.margins.innerOutline[(index + 1) % length]
     //filling the margins values if not initiated.
     let marginA
     let marginB
-    if(polygon.margins.isSameMargin){
-      marginA=polygon.margins.sameMargin
-      marginB=polygon.margins.sameMargin
-      polygon.margins.distances[index]=polygon.margins.sameMargin
-    }else{
-      if(polygon.margins.distances[(index-1+length)%length]===undefined){
-        polygon.margins.distances[(index-1+length)%length]=polygon.margins.sameMargin
+    if (polygon.margins.isSameMargin) {
+      marginA = polygon.margins.sameMargin
+      marginB = polygon.margins.sameMargin
+      polygon.margins.distances[index] = polygon.margins.sameMargin
+    } else {
+      if (
+        polygon.margins.distances[(index - 1 + length) % length] === undefined
+      ) {
+        polygon.margins.distances[(index - 1 + length) % length] =
+          polygon.margins.sameMargin
       }
-      if(polygon.margins.distances[index]===undefined){
-        polygon.margins.distances[index]=polygon.margins.sameMargin
+      if (polygon.margins.distances[index] === undefined) {
+        polygon.margins.distances[index] = polygon.margins.sameMargin
       }
-      marginA=polygon.margins.distances[(index-1+length)%length]
-      marginB=polygon.margins.distances[index]
+      marginA = polygon.margins.distances[(index - 1 + length) % length]
+      marginB = polygon.margins.distances[index]
     }
-    let K=getMarginPoint(A,B,C,marginA,marginB,clockwiseNormalVector)
+    let K = getMarginPoint(A, B, C, marginA, marginB, clockwiseNormalVector)
     polygon.margins.outterOutline.push(K)
   }
   return polygon
-  }
+}