@eturnity/eturnity_3d 0.0.4

package/src/helper/threeMixin.js

@@ -0,0 +1,171 @@
+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'
+import {CustomProvider} from './customProvider'
+import clearThreeObjects from './clearThreeObjects'
+
+export default {
+  methods:{
+    initialiseThreeMap(){
+      if(this.three_map){
+        this.three_map.clear()
+        this.scene.remove(this.three_map)
+        clearThreeObjects(this.three_map)
+      }
+      if(this.background_map){
+        this.background_map.clear()
+        this.scene.remove(this.background_map)
+        clearThreeObjects(this.background_map)
+      }
+      
+      //add background_map
+        this.background_map=new THREE.Group();
+        //plane
+        let sizeInMm={width:2000000,height:2000000}
+        
+        if(this.layoutSettings.background_map_settings && this.layoutSettings.background_map_settings.sizeInMm){
+          sizeInMm=this.layoutSettings.background_map_settings.sizeInMm
+        }
+        let planeGeometry = new THREE.PlaneGeometry(sizeInMm.height/1000, sizeInMm.width/1000)
+        let planeMaterial = new THREE.MeshBasicMaterial( {
+          color: 0xf0f0f0,
+          opacity: 1
+        })
+        this.meshes.backgroundMesh = new THREE.Mesh(planeGeometry, planeMaterial)
+        
+        this.meshes.backgroundMesh.position.z=0.1
+        
+        //helper grid
+        let helper = new THREE.GridHelper(2000, 100)
+        helper.material.opacity = 0.25
+        helper.material.transparent = true
+        helper.rotateX(-Math.PI / 2)
+        helper.position.z=-0.1
+        this.scene.add(helper)
+        this.background_map.add( this.meshes.backgroundMesh )
+        this.background_map.add( helper )
+        clearThreeObjects(helper)
+        helper=null
+    
+        //Extention of the map with geo-map
+        console.log("this.selectedMapLayer",this.selectedMapLayer)
+        if(this.selectedMapLayer && !['googleLayerRoadmap','googleLayer','googleLayerTerrain'].includes(this.selectedMapLayer.key)){
+          console.log("creation of custom provider")
+          this.provider = new CustomProvider('',this.selectedMapLayer.key);
+          console.log( this.provider)
+
+        // 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.1)
+        this.scene.add(this.three_map)
+      }
+      this.scene.add(this.background_map)
+    
+    },
+    initSky() {
+      // Add Sky
+      let sky = new Sky()
+      sky.scale.setScalar(450000)
+      // sky.rotateX( - Math.PI / 2 );
+      this.scene.add(sky)
+      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 phi = THREE.MathUtils.degToRad(90 - elevation)
+      const theta = THREE.MathUtils.degToRad(azimuth)
+    
+      sun.setFromSphericalCoords(1, phi, theta)
+    
+      uniforms['sunPosition'].value.copy(sun)
+      sun=null
+    },
+    initialiseThree() {
+
+      //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.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.8)
+      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);
+       
+      // this.renderer.setClearColor('#ffffff');
+      this.renderer.setPixelRatio(window.devicePixelRatio)
+      this.renderer.toneMappingExposure = 0.01
+      this.$refs.canvas3DContainer.appendChild(this.renderer.domElement)
+      
+      //sky
+      this.initSky()
+      this.orbitControl=new OrbitControls(this.camera, this.renderer.domElement)
+      this.orbitControl.maxPolarAngle=Math.PI/2
+      window.addEventListener('resize', this.onWindowResize, false)
+    
+      ambientLight.dispose()
+      directionalLight.dispose()
+      directionalLight2.dispose()
+    
+    },
+    onWindowResize() {
+      this.camera.aspect = window.innerWidth / window.innerHeight
+      this.camera.updateProjectionMatrix()
+      this.canvasOffset = this.getCanvasOffset()
+      this.canvasHeight = this.$refs.canvas3DContainer.clientHeight
+      this.canvasWidth = this.$refs.canvas3DContainer.clientWidth
+      this.resizeCanvasToDisplaySize()
+      //this.renderer.setSize(window.innerWidth / 2, window.innerHeight / 2)
+    },
+    resizeCanvasToDisplaySize() {
+      const canvas = this.renderer.domElement
+      // look up the size the canvas is being displayed
+      const width = canvas.clientWidth
+      const height = canvas.clientHeight
+
+      // adjust displayBuffer size to match
+      if (canvas.width !== width || canvas.height !== height) {
+        // you must pass false here or three.js sadly fights the browser
+        this.renderer.setSize(width, height, false)
+        this.renderer.setViewport(0, 0, width, height)
+
+        this.camera.aspect = width / height
+        this.camera.updateProjectionMatrix()
+
+        // update any render target sizes here
+      }
+    },
+    
+  },
+  
+}

package/src/main.js

@@ -0,0 +1,28 @@
+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){
+        const myStore = new Vuex.Store({
+          modules:{
+            threeDModule:{
+              ...threeDModule,
+              state:{...threeDModule.state,geometryData,...specificData}
+            }
+          }
+        })
+        this.App=new Vue({
+          store:myStore,
+          render: (h) => h(App),
+        })
+        this.App.$mount(identifier)
+    }
+}
+export {Renderer}

package/src/store/AddMargin.js

@@ -0,0 +1,107 @@
+import {
+    multiplyVector,
+    getMarginPoint,
+  } from '@eturnity/eturnity_maths'
+
+  
+  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)
+    })
+    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 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]
+      }
+      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)
+  }
+  //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]
+    //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]
+    //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]
+    }
+    let K=getMarginPoint(A,B,C,marginA,marginB,clockwiseNormalVector)
+    polygon.margins.outterOutline.push(K)
+  }
+  return polygon
+  }

package/src/store/hydrateData.js

@@ -0,0 +1,209 @@
+//Synchronisation with BE:
+import {
+  Polygon,
+  updateComputedGeometryPolygon,
+  getRoofMarginOutline,
+  getObstacleMarginOutline
+} from '@eturnity/eturnity_maths'
+import getLayers from '../utils/layers'
+import {
+  UpdateRoofObstacleRelations
+} from '../helper/UpdateRoofObstacleRelations'
+
+export async function hydrateData({ state, commit }, data) {
+  console.log(data)
+  let roofsResponse = data.roofs
+  let obstaclesResponse = data.obstacles
+  let moduleFieldsResponse = data.moduleFields
+  const layoutSettingResponse = data.layoutSettings
+  console.log("roofsResponse",roofsResponse)
+  console.log("obstaclesResponse",obstaclesResponse)
+  console.log("moduleFieldsResponse",moduleFieldsResponse)
+  console.log("layoutSettingResponse",layoutSettingResponse)
+  //removing empty roof,obstacle and modulefield generated by BE on variant creation
+  roofsResponse=roofsResponse.reduce((acc,cur)=>{
+    if(cur.roof_outline.length>0){acc.push(cur)}
+    return acc
+  },[])
+  obstaclesResponse=obstaclesResponse.reduce((acc,cur)=>{
+    if(cur.obstacle_outline.length>0){acc.push(cur)}
+    return acc
+  },[])
+  moduleFieldsResponse=moduleFieldsResponse.reduce((acc,cur)=>{
+    if(cur.module_field_outline.length>0){acc.push(cur)}
+    return acc
+  },[])
+
+  if (!!layoutSettingResponse) {
+    const layoutSetting = layoutSettingResponse
+    
+    commit('mutate_layoutSettings', layoutSetting)
+    commit('mutate_module_texture_version_id', layoutSetting.module_texture_version_id)
+    let layers=getLayers()
+    console.log(layers,layoutSetting.map_layer)
+    let selectedLayer=layers.find(layer=>layer.key==layoutSetting.map_layer)
+    commit('mutate_selectedMapLayer', selectedLayer)
+    
+    //end of layoutSetting correction
+    const newMapConfig = state.mapConfig
+    newMapConfig.center = {
+      lat: layoutSetting.layout_latitude,
+      lng: layoutSetting.layout_longitude
+    }
+    newMapConfig.layer = layoutSetting.map_layer
+    newMapConfig.zoom = layoutSetting.map_zoom
+    commit('mutate_mapConfig', newMapConfig)
+  } 
+
+  const roofs = []
+  const obstacles = []
+  const moduleFields = []
+  const panels = []
+  const userDeactivatedPanels = []
+  let pv_module_ids = []
+  let mounting_system_ids = []
+  roofsResponse.forEach((roofResp) => {
+    const roof_outline = roofResp.roof_outline.map((p) => {
+      return { x: p[0], y: p[1], z: p[2] }
+    })
+    let roof = new Polygon(roof_outline, 'roof')
+    roof.id = roofResp.roof_uuid
+    roof.name = roofResp.roof_name
+    roof = updateComputedGeometryPolygon(roof)
+    roof.margins.distances = roofResp.roof_margins_mm
+    roof.margins.isSameMargin = roofResp.roof_margins_mm.every(
+      (val) => val == roofResp.roof_margins_mm[0]
+    )
+    roof.margins.sameMargin = roof.margins.isSameMargin
+      ? roofResp.roof_margins_mm[0]
+      : 200
+    roof.moduleFields = []
+    roof = getRoofMarginOutline(roof)
+    roofs.push(roof)
+  })
+  obstaclesResponse.forEach((obstacleResp) => {
+    const obstacle_outline = obstacleResp.obstacle_outline.map((p) => {
+      return { x: p[0], y: p[1], z: p[2] }
+    })
+    let obstacle = new Polygon(obstacle_outline, 'obstacle')
+    obstacle.id = obstacleResp.obstacle_uuid
+    obstacle.height = obstacleResp.obstacle_height_above_ground_mm
+    obstacle.isParallel = obstacleResp.obstacle_slope_is_parallel_to_roof
+    obstacle = updateComputedGeometryPolygon(obstacle)
+    obstacle.margins.distances = obstacleResp.obstacle_margins_mm
+    obstacle.margins.isSameMargin = obstacleResp.obstacle_margins_mm.every(
+      (val) => val === obstacleResp.obstacle_margins_mm[0]
+    )
+    obstacle.margins.sameMargin = obstacle.margins.isSameMargin
+      ? obstacleResp.obstacle_margins_mm[0]
+      : 200
+    obstacle = getObstacleMarginOutline(obstacle)
+    obstacles.push(obstacle)
+  })
+  moduleFieldsResponse.forEach((moduleFieldResp) => {
+    const module_field_outline = moduleFieldResp.module_field_outline.map(
+      (p) => {
+        return { x: p[0], y: p[1], z: p[2] }
+      }
+    )
+
+    let moduleField = new Polygon(module_field_outline, 'moduleField')
+    moduleField.id = moduleFieldResp.module_field_uuid
+    moduleField.data = {}
+    moduleField.data.texture_img_url = moduleFieldResp.texture_img_url
+    moduleField.data.col_spacing_mm = moduleFieldResp.col_spacing_mm
+    moduleField.data.row_spacing_mm = moduleFieldResp.row_spacing_mm
+    moduleField.data.offset = moduleFieldResp.offset
+    moduleField.data.panel_orientation = moduleFieldResp.panel_orientation
+    moduleField.data.panel_direction_degrees =
+      moduleFieldResp.panel_direction_degrees
+    moduleField.data.component_id_pv_module =
+      moduleFieldResp.component_id_pv_module
+    moduleField.data.component_id_mounting_system =
+      moduleFieldResp.component_id_mounting_system
+    moduleField.data.module_tilt_degrees = moduleFieldResp.module_tilt_degrees
+    moduleField.data.base_line_index = moduleFieldResp.base_line_index
+    pv_module_ids.push(moduleFieldResp.component_id_pv_module)
+    mounting_system_ids.push(moduleFieldResp.component_id_mounting_system)
+
+    moduleField.data.modules = moduleFieldResp.modules
+    moduleFieldResp.modules.forEach((m) => {
+      const panel = new Polygon(
+        m.outline.map((p) => {
+          return { x: p[0], y: p[1], z: p[2] }
+        }),
+        'panel'
+      )
+      panel.index = m.index
+      panel.moduleField = moduleField
+      panels.push(panel)
+    })
+    moduleField.data.user_deactivated_modules =
+      moduleFieldResp.user_deactivated_modules
+    moduleFieldResp.user_deactivated_modules.forEach((m) => {
+      const panel = new Polygon(
+        m.outline.map((p) => {
+          return { x: p[0], y: p[1], z: p[2] }
+        }),
+        'user_deactivated_panel'
+      )
+      panel.moduleField = moduleField
+      panel.index = m.index
+      userDeactivatedPanels.push(panel)
+    })
+    const roof = roofs.find((r) => r.id == moduleFieldResp.roof_uuid)
+    if (!roof.moduleFields) {
+      roof.moduleFields = []
+    }
+    roof.moduleFields.push(moduleField)
+    moduleField.roof = roof
+    moduleField.panels = panels
+    moduleField.userDeactivatedPanels = userDeactivatedPanels
+    moduleField = updateComputedGeometryPolygon(moduleField)
+    moduleFields.push(moduleField)
+  })
+  //Get PV & Mounting system component Data (texture):
+  pv_module_ids = [...new Set(pv_module_ids)]
+  mounting_system_ids = [...new Set(mounting_system_ids)]
+  const promiseList = []
+  // for (let k in pv_module_ids) {
+  //   promiseList.push(
+  //     axios.get('/component_library/products/pv_modules/' + pv_module_ids[k])
+  //   )
+  // }
+  // for (let k in mounting_system_ids) {
+  //   promiseList.push(
+  //     axios.get(
+  //       '/component_library/products/mounting_systems/' + mounting_system_ids[k]
+  //     )
+  //   )
+  // }
+  // const results = await Promise.all(promiseList)
+  // for (let k in pv_module_ids) {
+  //   const pv_module_id = pv_module_ids[k]
+  //   const pvData = results[k].data
+  //   moduleFields.forEach((m) => {
+  //     if (m.data.component_id_pv_module == pv_module_id) {
+  //       m.pvData = pvData
+  //     }
+  //   })
+  // }
+  // for (let k in mounting_system_ids) {
+  //   const mounting_system_id = mounting_system_ids[k]
+  //   const mountingData = results[parseInt(k) + pv_module_ids.length].data
+  //   moduleFields.forEach((m) => {
+  //     if (m.data.component_id_mounting_system == mounting_system_id) {
+  //       m.mountingData = mountingData
+  //     }
+  //   })
+  // }
+  state.polygons = [
+    ...roofs,
+    ...obstacles,
+    ...moduleFields,
+    ...panels,
+    ...userDeactivatedPanels
+  ]
+  state = UpdateRoofObstacleRelations(state)
+}
+