@eturnity/eturnity_3d 6.29.0 → 6.29.2

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@eturnity/eturnity_3d",
   "private": false,
-  "version": "6.29.0",
+  "version": "6.29.2",
   "main": "dist/main.js",
   "scripts": {
     "dev": "vue-cli-service serve --skip-plugins @vue/cli-plugin-eslint",
     "build": "vue-cli-service build --skip-plugins @vue/cli-plugin-eslint"
   },
   "dependencies": {
-    "@eturnity/eturnity_maths": "6.28.0",
+    "@eturnity/eturnity_maths": "6.29.0",
     "axios": "^1.3.2",
-    "cors": "^2.8.5",
     "core-js": "^2.6.12",
+    "cors": "^2.8.5",
     "earcut": "^2.2.4",
     "express": "^4.18.2",
     "geo-three": "^0.1.11",
@@ -19,12 +19,12 @@
     "leaflet.gridlayer.googlemutant": "^0.14.0",
     "svd-js": "^1.1.1",
     "three": "^0.149.0",
+    "three-projected-material": "2.2.1",
+    "tween": "0.9.0",
     "uuid": "^9.0.0",
     "vue": "^2.7.14",
     "vue-template-compiler": "^2.7.14",
-    "vuex": "^3.0.1",
-    "three-projected-material": "2.2.1",
-    "tween": "0.9.0"
+    "vuex": "^3.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.21.0",

package/src/components/ThreeCanvasViewer.vue

@@ -110,8 +110,6 @@ export default {
       let margin=0.2
       if (!polygon || view_mode == 'global') {
         let roofsBounds = this.roofsBounds
-        //let distance = 5 + objectRadius / Math.sin(((this.orthographicCamera.fov / 2) * Math.PI) / 180)
-        //console.log('distance:',distance)
         const position = [0, 0, 100]
         const target = [0, 0, 0]
         this.orthographicCamera.position.set(...position)

package/src/config.js

@@ -75,6 +75,7 @@ export const defaultTextureUrls = [
   textureImageDomain+'textures/longiSolarLR4_60HPH_370M.png',
   textureImageDomain+'textures/longiSolarLR4_60HPH_350M.png',
 ]
+
 export const hitOption = {
   segments: true,
   stroke: true,

package/src/helper/cameraMixin.js

@@ -0,0 +1,95 @@
+import TWEEN from 'tween'
+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(() => {
+                  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(() => {
+                  this.orbitControl.update()
+                })
+                .start()
+            }
+          },
+    }
+}

package/src/helper/render/background.js

@@ -0,0 +1,40 @@
+import * as THREE from 'three'
+
+export default {
+    methods:{
+      renderBackground() {
+        // if(this.meshes.backgroundMesh){
+        //   let sizeInMm={width:2000000,height:2000000}
+        //   let positionInMm={x:0,y:0}
+        //   if(this.layoutSettings.background_map_settings && this.layoutSettings.background_map_settings.sizeInMm){
+        //     sizeInMm=this.layoutSettings.background_map_settings.sizeInMm
+        //     positionInMm=this.layoutSettings.background_map_settings.positionInMm
+        //   }
+  
+        //   this.meshes.backgroundMesh.geometry.dispose()
+        //   let xMin=positionInMm.x/1000-sizeInMm.width/2000
+        //   let xMax=positionInMm.x/1000+sizeInMm.width/2000
+        //   let yMin=positionInMm.y/1000-sizeInMm.height/2000
+        //   let yMax=positionInMm.y/1000+sizeInMm.height/2000
+        //   let c1=[xMin,yMax,0.1]
+        //   let c2=[xMax,yMax,0.1]
+        //   let c3=[xMax,yMin,0.1]
+        //   let c4=[xMin,yMin,0.1]
+        //   let geometry = new THREE.BufferGeometry();
+        //   const vertices = new Float32Array( [
+        //     ...c1,
+        //     ...c4,
+        //     ...c3,
+        //     ...c3,
+        //     ...c2,
+        //     ...c1
+        //   ] );
+        //   geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
+        //   geometry.computeVertexNormals()
+        //   this.meshes.backgroundMesh.geometry=geometry        
+        // }else{
+        //   this.initialiseThreeMap()
+        // }
+      },
+    }
+}

package/src/helper/render/base.js

@@ -0,0 +1,43 @@
+import * as THREE from 'three'
+import { getBufferWallGeometry, updateBufferWallGeometry } from './geometryHandler'
+export default {
+    methods:{
+      renderBase() {
+        //rendering of walls
+        //this.clearByType('baseMeshes')
+        this.clearRemovedOnes('baseMeshes')
+        let geometry
+        let mesh
+        this.roofs.forEach((roofPolygon) => {
+          //everythime the essencials data are changed, version goes up. we compare polygon version and mesh version to know if we have to rerender
+          if (
+            this.meshes.baseMeshes[roofPolygon.id] &&
+            this.meshes.baseMeshes[roofPolygon.id].userData.version <
+              roofPolygon.version
+          ) {
+            //this.clearMesh(this.meshes.baseMeshes[roofPolygon.id])
+            mesh = this.meshes.baseMeshes[roofPolygon.id]
+            geometry = mesh.geometry
+            geometry = updateBufferWallGeometry(roofPolygon, geometry)
+            mesh.geometry = geometry
+            mesh.updateMatrix()
+          }
+          if (!this.meshes.baseMeshes[roofPolygon.id]) {
+            //create
+            geometry = getBufferWallGeometry(roofPolygon)
+            mesh = new THREE.Mesh(geometry, this.material.wall)
+            mesh.userData.version = roofPolygon.version
+            mesh.userData.type = 'baseMeshes'
+            mesh.userData.meshId = roofPolygon.id
+            mesh.userData.polygonId = roofPolygon.id
+            mesh.matrixAutoUpdate = false
+            mesh.frustumCulled = false
+            //geometry.dispose()
+            //geometry=null
+            this.scene.add(mesh)
+            this.meshes.baseMeshes[roofPolygon.id] = mesh
+          }
+        })
+      },
+    }
+}

package/src/helper/render/clear.js

@@ -0,0 +1,93 @@
+export default {
+    methods:{
+      clearThreeObjects(obj) {
+        while (obj.children.length > 0) {
+          this.clearThreeObjects(obj.children[0])
+          obj.remove(obj.children[0])
+        }
+        if (obj.geometry) obj.geometry.dispose()
+        if (obj.texture) obj.texture.dispose()
+      
+        if (obj.material) {
+          //in case of map, bumpMap, normalMap, envMap ...
+          Object.keys(obj.material).forEach((prop) => {
+            if (!obj.material[prop]) return
+            if (
+              obj.material[prop] !== null &&
+              typeof obj.material[prop].dispose === 'function'
+            )
+              obj.material[prop].dispose()
+          })
+          obj.material.dispose()
+        }
+      },
+      clearPanelsFromChangingRoofs(roofIds){
+        const roofs=this.polygons.filter(polygon=>roofIds.includes(polygon.id))
+        roofs.forEach(roof=>roof.moduleFields.forEach(mf=>mf.panels.forEach(panel=>{
+              let meshTop=this.meshes.panelsMeshes[panel.id+'_top']
+              let meshSide=this.meshes.panelsMeshes[panel.id+'_side']
+              if(meshTop || meshSide){
+                this.clearMesh(meshTop)
+                this.clearMesh(meshSide)
+              }
+            })
+          )
+        )
+      },
+      clearMesh(mesh) {
+        if (!mesh) return
+        this.scene.remove(mesh)
+        if (mesh.geometry && mesh.geometry.dispose) {
+          mesh.geometry.dispose()
+          mesh.geometry = null
+        }
+        if (mesh.material && mesh.material.dispose) {
+          mesh.material.dispose()
+          mesh.material = null
+        }
+        if (
+          mesh.userData.meshId &&
+          this.meshes[mesh.userData.type][mesh.userData.meshId]
+        ) {
+          delete this.meshes[mesh.userData.type][mesh.userData.meshId]
+        } else {
+          this.meshes[mesh.userData.type] = null
+        }
+        mesh = null
+      },
+      clearEdgesRemovedOnes() {
+        Object.values(this.meshes['edgeMeshes']).forEach((mesh) => {
+          if (!this.edgeIds.includes(mesh.userData.edgeId)) {
+            this.clearMesh(mesh)
+          }
+        })
+      },
+      clearNodesRemovedOnes() {
+        Object.values(this.meshes['nodeMeshes']).forEach((mesh) => {
+          if (!this.nodeIds.includes(mesh.userData.nodeId)) {
+            this.clearMesh(mesh)
+          }
+        })
+      },
+      clearRemovedOnes(type) {
+        Object.values(this.meshes[type]).forEach((mesh) => {
+          if (!this.polygonIds.includes(mesh.userData.polygonId)) {
+            this.clearMesh(mesh)
+          }
+        })
+      },
+      clearByType(type) {
+        Object.values(this.meshes[type]).forEach((mesh) => {
+          mesh.geometry.dispose()
+          mesh.geometry = null
+          if (mesh.material && mesh.material.dispose) {
+            mesh.material.dispose()
+          }
+          mesh.material = null
+          this.scene.remove(mesh)
+        })
+        this.meshes[type] = {}
+        this.renderer.renderLists.dispose()
+      },
+    }
+}

package/src/helper/render/edge.js

@@ -0,0 +1,85 @@
+import * as THREE from 'three'
+export default {
+    methods:{
+      renderEdges() {
+        this.clearEdgesRemovedOnes('edgeMeshes')
+        let cylinder
+        //this.clearByType('edgeMeshes')
+        // const material = new THREE.LineBasicMaterial( { color: beamColor,transparent:true,opacity:beamOpacity ,sizeAttenuation: true} );
+        // material.linewidth=5
+        const material = this.material.edge
+        this.edges
+          .filter((edge) => edge.layer == 'roof')
+          .forEach((edge) => {
+            cylinder = this.meshes.edgeMeshes[edge.id]
+            if (cylinder) {
+              //update
+              const point_0 = new THREE.Vector3(
+                edge.outline[0].x / 1000,
+                edge.outline[0].y / 1000,
+                edge.outline[0].z / 1000
+              )
+              const point_1 = new THREE.Vector3(
+                edge.outline[1].x / 1000,
+                edge.outline[1].y / 1000,
+                edge.outline[1].z / 1000
+              )
+              const midPoint = point_0.clone().add(point_1).multiplyScalar(0.5)
+              var direction = new THREE.Vector3().subVectors(point_1, point_0)
+              let length = direction.length()
+              //cylinder.rotation.set(arrow.rotation)
+              var axis = new THREE.Vector3(0, 1, 0)
+              cylinder.quaternion.setFromUnitVectors(
+                axis,
+                direction.clone().normalize()
+              )
+              //cylinder.position.set(new THREE.Vector3().addVectors( pointX, direction.multiplyScalar(0.5) ))
+              cylinder.position.copy(midPoint.clone())
+              let oldLength = cylinder.userData.cylinderLength
+              let newLength = length
+              if (oldLength != 0) {
+                let scaleRatio = newLength / oldLength
+                //let scaleVector=direction.multiplyScalar(scaleRatio-1)
+                cylinder.scale.set(1, newLength, 1)
+                cylinder.userData.cylinderLength = newLength
+              }
+              cylinder.updateMatrix()
+              //change cylinder length
+            } else {
+              const point_0 = new THREE.Vector3(
+                edge.outline[0].x / 1000,
+                edge.outline[0].y / 1000,
+                edge.outline[0].z / 1000
+              )
+              const point_1 = new THREE.Vector3(
+                edge.outline[1].x / 1000,
+                edge.outline[1].y / 1000,
+                edge.outline[1].z / 1000
+              )
+  
+              const midPoint = point_0.clone().add(point_1).multiplyScalar(0.5)
+              var direction = new THREE.Vector3().subVectors(point_1, point_0)
+              let length = direction.length()
+              const geometry = new THREE.CylinderGeometry(0.1, 0.1, 1, 6)
+              cylinder = new THREE.Mesh(geometry, material)
+              cylinder.scale.set(1, length, 1)
+              cylinder.userData.cylinderLength = length
+              //cylinder.rotation.set(arrow.rotation)
+              var axis = new THREE.Vector3(0, 1, 0)
+              cylinder.quaternion.setFromUnitVectors(
+                axis,
+                direction.clone().normalize()
+              )
+              //cylinder.position.set(new THREE.Vector3().addVectors( pointX, direction.multiplyScalar(0.5) ))
+              cylinder.position.copy(midPoint.clone())
+              //cylinder.position.set(edge.outline[0].x/1000, edge.outline[0].y/1000, edge.outline[0].z/1000);
+              cylinder.userData.edgeId = edge.id
+              cylinder.matrixAutoUpdate = false
+              this.meshes.edgeMeshes[edge.id] = cylinder
+              this.scene.add(cylinder)
+  
+            }
+          })
+      },
+    }
+}

package/src/helper/{geometryHandler.js → render/geometryHandler.js}

@@ -1,5 +1,5 @@
 import * as THREE from 'three'
-import { defaultBaseHeight } from '../config'
+import { defaultBaseHeight } from '../../config'
 import earcut from 'earcut'
 import {
   verticalProjectionOnPlane,

package/src/helper/render/index.js

@@ -0,0 +1,16 @@
+import node from './node'
+import background from './background'
+import base from './base'
+import clear from './clear'
+import edge from './edge'
+import loader from './loader'
+import margin from './margin'
+import moduleField from './moduleField'
+import obstacle from './obstacle'
+import panel from './panel'
+import roof from './roof'
+
+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]
+}

package/src/helper/render/loader.js

@@ -0,0 +1,97 @@
+import * as THREE from 'three'
+import ProjectedMaterial from 'three-projected-material'
+export default {
+    methods:{
+      loadNewTexture(){
+        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
+              })
+            }
+          }
+        })
+      },
+      async loadTextureFromModuleFields(){
+        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
+              })
+            }
+          }
+        }
+      },
+      async loadProjectionMaterial() {
+        const _this=this
+        if(!this.layoutSettings.base64_image_url) 
+        {
+          this.loader.load(require("../../assets/images/white_tile.png"),(texture)=>{
+            let projectionMaterial = new ProjectedMaterial({
+              camera: _this.cameraprojection,
+              texture: texture
+            })
+          this.material.roof = projectionMaterial
+          })
+          return
+        }
+        let projectedMaterialLoaded= await new Promise((resolve,reject) => {
+          this.loader.load(this.layoutSettings.base64_image_url,(texture)=>{
+            let backgroundImageZoomLvl=_this.layoutSettings.map_zoom
+            let backgroundImageCenter={
+              lat:_this.layoutSettings.layout_latitude,
+              lng:_this.layoutSettings.layout_longitude
+            }
+            if(_this.layoutSettings.background_map_settings){
+              backgroundImageZoomLvl=_this.layoutSettings.background_map_settings.zoom_lvl
+              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.height /
+                (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 * 16
+              _this.cameraprojection.updateProjectionMatrix()
+            }
+            
+            let projectionMaterial = new ProjectedMaterial({
+              camera: _this.cameraprojection,
+              texture: texture
+            })
+            resolve(projectionMaterial)
+          })
+        })
+        this.material.roof =projectedMaterialLoaded
+      },
+    }
+}

package/src/helper/render/margin.js

@@ -0,0 +1,72 @@
+import * as THREE from 'three'
+import {
+  colorArrayBase,
+} from '../../config'
+import {
+  getBufferRoofMarginGeometry
+} from './geometryHandler'
+export default {
+    methods:{
+      renderRoofsMargin() {
+        this.clearByType('roofMarginMeshes')
+  
+        if (this.selectedTool == 'selectMargin') {
+          this.roofs.forEach((roofPolygon) => {
+            const geometries = getBufferRoofMarginGeometry(roofPolygon)
+  
+            geometries.forEach((geometry, index) => {
+              if (geometry) {
+                const marginColor = roofPolygon.margins.isSameMargin
+                  ? colorArrayBase[0]
+                  : colorArrayBase[index % colorArrayBase.length]
+                let material = new THREE.MeshPhongMaterial({
+                  color: marginColor,
+                  specular: 0x009900,
+                  shininess: 0,
+                  flatShading: true,
+                  side: THREE.DoubleSide,
+                  transparent: true,
+                  opacity: 0.8
+                })
+                const mesh = new THREE.Mesh(geometry, material)
+                geometry.dispose()
+                this.scene.add(mesh)
+                this.meshes.roofMarginMeshes[roofPolygon.id + '_' + index] = mesh
+              }
+            })
+            roofPolygon.holes.forEach((obstaclePolygon) => {
+              const geometries = getBufferRoofMarginGeometry(
+                obstaclePolygon,
+                roofPolygon
+              )
+              geometries.forEach((geometry, index) => {
+                if (geometry) {
+                  const marginColor = obstaclePolygon.margins.isSameMargin
+                    ? colorArrayBase[0]
+                    : colorArrayBase[index % colorArrayBase.length]
+                  let material = new THREE.MeshPhongMaterial({
+                    color: marginColor,
+                    specular: 0x009900,
+                    shininess: 0,
+                    flatShading: true,
+                    side: THREE.DoubleSide,
+                    transparent: true,
+                    opacity: 0.8
+                  })
+                  const mesh = new THREE.Mesh(geometry, material)
+                  geometry.dispose()
+                  geometry = null
+                  material.dispose()
+                  material = null
+                  this.scene.add(mesh)
+                  this.meshes.roofMarginMeshes[
+                    obstaclePolygon.id + '_' + roofPolygon.id + '_' + index
+                  ] = mesh
+                }
+              })
+            })
+          })
+        }
+      },
+    }
+}

package/src/helper/render/moduleField.js

@@ -0,0 +1,27 @@
+import * as THREE from 'three'
+import {
+  getBufferModuleFieldGeometry,
+} from './geometryHandler'
+export default {
+    methods:{
+      renderModuleFields() {
+        this.clearByType('moduleFieldsMeshes')
+  
+        this.moduleFields.forEach((moduleFieldPolygon) => {
+          if(!moduleFieldPolygon.data.number_of_panels_override && !this.areModuleFieldsVisible )return
+          const geometry = getBufferModuleFieldGeometry(moduleFieldPolygon)
+          if (geometry) {
+            const mesh = new THREE.Mesh(geometry, this.material.moduleField)
+            geometry.dispose()
+            mesh.matrixAutoUpdate = false
+            mesh.userData.version = moduleFieldPolygon.version
+            mesh.userData.type = 'moduleFieldsMeshes'
+            mesh.userData.meshId = moduleFieldPolygon.id
+            mesh.userData.polygonId = moduleFieldPolygon.id
+            this.scene.add(mesh)
+            this.meshes.moduleFieldsMeshes[moduleFieldPolygon.id] = mesh
+          }
+        })
+      },
+    }
+}