@eturnity/eturnity_3d 6.34.6 → 6.34.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eturnity/eturnity_3d",
   "private": false,
-  "version": "6.34.6",
+  "version": "6.34.7",
   "main": "dist/main.js",
   "scripts": {
     "dev": "vue-cli-service serve --skip-plugins @vue/cli-plugin-eslint",
@@ -10,7 +10,7 @@
     "prettier": "prettier --write \"**/*.{js,vue}\""
   },
   "dependencies": {
-    "@eturnity/eturnity_maths": "6.34.1",
+    "@eturnity/eturnity_maths": "6.34.3",
     "axios": "^1.3.2",
     "core-js": "^2.6.12",
     "cors": "^2.8.5",

package/src/components/ThreeCanvasViewer.vue

@@ -10,7 +10,12 @@
 <script>
 import { mapActions, mapState, mapGetters, mapMutations } from 'vuex'
 import * as THREE from 'three'
-import { addVector, multiplyVector,updateComputedGeometryPolygon, normalizeVector } from '@eturnity/eturnity_maths'
+import {
+  addVector,
+  multiplyVector,
+  updateComputedGeometryPolygon,
+  normalizeVector
+} from '@eturnity/eturnity_maths'
 
 import threeMixin from '../helper/threeMixin'
 import materialMixin from '../helper/materialMixin'
@@ -47,7 +52,6 @@ export default {
       tweenOrbit: null,
       three_map: null,
       backgroundImagesizeInMm: null,
-      textureLoader: new THREE.TextureLoader(),
       isReady: {
         texturesLoaded: 0,
         texturesToLoad: 0,
@@ -72,7 +76,6 @@ export default {
     this.renderGeometry()
     this.onWindowResize()
     this.updateProjectionMaterials()
-    this.animate()
     this.$root.$on('on-roofSelected', (polygon) =>
       this.setCameraOrthogonalTo(polygon)
     )
@@ -81,6 +84,8 @@ export default {
     const polygon = this.polygons.find((p) => p.id == this.uuid)
     this.setCamera(polygon, this.view_mode)
     this.isReady.geometry = true
+    this.render()
+    //this.animate()
   },
   computed: {
     ...mapState({
@@ -153,9 +158,9 @@ export default {
             geometry.boundingSphere.center.z
           ]
           let objectRadius = geometry.boundingSphere.radius
-          
+
           distance =
-          5+(objectRadius) / (Math.sin(((this.camera.fov / 2) * Math.PI) / 180))
+            5 + objectRadius / Math.sin(((this.camera.fov / 2) * Math.PI) / 180)
         }
 
         polygonRef = updateComputedGeometryPolygon(polygonRef)
@@ -194,15 +199,11 @@ export default {
           let horizontalVector = { ...polygonRef.normalVector, z: 0 }
 
           if (horizontalVector.x == 0 && horizontalVector.y == 0) {
-            //if flat roof=> go south
             horizontalVector.y = 1
           }
-          horizontalVector=normalizeVector(horizontalVector)
-          // let distanceCoefficient = 2
-          // if(flatRoof){
-          //   distanceCoefficient = 1.5
-          // }
-          cameraMoveVector = multiplyVector(distance * 1000 , horizontalVector)
+          horizontalVector = normalizeVector(horizontalVector)
+        
+          cameraMoveVector = multiplyVector(distance * 1000, horizontalVector)
         }
 
         const positionVector = addVector(polygonRef.meanPoint, cameraMoveVector)
@@ -253,14 +254,6 @@ export default {
     },
     render() {
       this.renderer.clear()
-      if (this.orbitControl) {
-        this.orbitControl.target.set(
-          this.orbitControl.target.x,
-          this.orbitControl.target.y,
-          2
-        )
-        this.orbitControl.update()
-      }
       if (['top', 'global'].includes(this.view_mode)) {
         this.renderer.render(this.scene, this.orthographicCamera)
       } else {
@@ -296,7 +289,7 @@ export default {
   height: 100%;
 }
 
-.canvas3DContainer>canvas {
+.canvas3DContainer > canvas {
   width: 100%;
   height: 100%;
 }

package/src/helper/materialMixin.js

@@ -8,15 +8,20 @@ import {
 } from '../config'
 export default {
   data() {
-    return {
-      material: {}
-    }
+    return {}
   },
   created() {
+    this.material = {}
     let wallColor = 0xdddddd
     if (this.wallColor) {
       wallColor = new THREE.Color(this.wallColor)
     }
+
+    this.material.panelSide = new THREE.MeshLambertMaterial({
+      color: 0xdddddd,
+      side: THREE.DoubleSide
+    })
+
     this.material.wall = new THREE.MeshLambertMaterial({
       color: wallColor,
       side: THREE.DoubleSide
@@ -39,13 +44,11 @@ export default {
       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) {})
+      let texture = this.loader.load(defaultTextureUrls[k], function (texture) {})
       this.material.panel['default_' + k] = new THREE.MeshBasicMaterial({
         map: texture,
         side: THREE.DoubleSide

package/src/helper/render/base.js

@@ -5,12 +5,17 @@ import {
 } from './geometryHandler'
 export default {
   methods: {
+    data(){
+      return {
+        mergedBaseMesh:null
+      }
+    },
     renderBase() {
       //rendering of walls
-      //this.clearByType('baseMeshes')
       this.clearRemovedOnes('baseMeshes')
       let geometry
       let mesh
+      let baseGeometries=[]
       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 (
@@ -18,7 +23,6 @@ export default {
           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)
@@ -35,12 +39,17 @@ export default {
           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
         }
+        baseGeometries.push(this.meshes.baseMeshes[roofPolygon.id].geometry)
       })
+
+      this.mergedBaseMesh=this.updateOrCreateMergedMesh(
+        this.mergedBaseMesh,
+        baseGeometries,
+        this.material.wall
+      )
+
     }
   }
 }

package/src/helper/render/imageOverlay.js

@@ -58,10 +58,10 @@ export default {
       }
       this.meshes.backgroundMesh.position.z = 0.15
       if (this.imageOverlayMaterial) {
-        this.applyTextureOnMesh(
-          [this.imageOverlayMaterial],
-          this.meshes.backgroundMesh
-        )
+        // this.applyTextureOnMesh(
+        //   [this.imageOverlayMaterial],
+        //   this.meshes.backgroundMesh
+        // )
       }
       this.meshes.backgroundMesh.visible = true
     },

package/src/helper/render/index.js

@@ -10,11 +10,11 @@ import obstacle from './obstacle'
 import panel from './panel'
 import roof from './roof'
 import imageOverlay from './imageOverlay'
-import mapProjection from './mapProjection'
 import texture from './texture'
 import projectionMaterial from './projectionMaterial'
 import tile from './tile'
 import tileProjection from './tileProjection'
+import mergedGeometry from './mergedGeometry'
 
 export default {
   //mixins:[node,background,clear,edge,loader,margin,moduleField,obstacle,panel,roof,base]
@@ -32,9 +32,9 @@ export default {
     loader,
     imageOverlay,
     texture,
-    mapProjection,
     projectionMaterial,
     tile,
-    tileProjection
+    tileProjection,
+    mergedGeometry
   ]
 }

package/src/helper/render/loader.js

@@ -13,8 +13,8 @@ export default {
             let texture = this.loader.load(component.texture_img_url)
             this.material.panel[pvId] = new THREE.MeshBasicMaterial({
               map: texture,
-              side: THREE.DoubleSide,
-              transparent: true
+              side: THREE.FrontSide,
+              transparent: false,
             })
           }
         }
@@ -31,8 +31,8 @@ export default {
             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
+              side: THREE.FrontSide,
+              transparent: false,
             })
           }
         }

package/src/helper/render/mergedGeometry.js

@@ -0,0 +1,108 @@
+import * as THREE from 'three'
+
+export default {
+  methods: {
+    updateMergedGeometry(geometries, mergedGeometry) {
+      const mergedVertices = []
+      const mergedNormals = []
+      const mergedUvs = []
+
+      geometries.forEach((geometry) => {
+        const positions = geometry.attributes.position.array
+        const normals = geometry.attributes.normal.array
+
+        mergedVertices.push(...positions)
+        mergedNormals.push(...normals)
+
+        if (geometry.attributes.uv) {
+          const uvs = geometry.attributes.uv.array
+          mergedUvs.push(...uvs)
+        }
+      })
+
+      //position
+      if (
+        mergedGeometry.attributes.position &&
+        mergedGeometry.attributes.uv &&
+        mergedGeometry.attributes.normal &&
+        mergedGeometry.attributes.position.array.length >=
+          mergedVertices.length &&
+        mergedGeometry.attributes.uv.array.length >= mergedUvs.length &&
+        mergedGeometry.attributes.normal.array.length >= mergedNormals.length
+      ) {
+        let positions = mergedGeometry.attributes.position.array
+        let uvs = mergedGeometry.attributes.uv.array
+        let normals = mergedGeometry.attributes.normal.array
+        for (let k in mergedVertices) {
+          positions[k] = mergedVertices[k]
+        }
+        for (let k in mergedUvs) {
+          uvs[k] = mergedUvs[k]
+        }
+        for (let k in mergedNormals) {
+          normals[k] = mergedNormals[k]
+        }
+        mergedGeometry.setDrawRange(0, mergedVertices.length / 3)
+        mergedGeometry.setDrawRange(0, mergedUvs.length / 2)
+        mergedGeometry.setDrawRange(0, mergedNormals.length / 3)
+      } else {
+        mergedGeometry.dispose()
+        mergedGeometry = null
+        mergedGeometry = this.createMergedGeometry(geometries)
+      }
+      mergedGeometry.attributes.position.needsUpdate = true
+      mergedGeometry.attributes.normal.needsUpdate = true
+      mergedGeometry.needsUpdate = true
+      return mergedGeometry
+    },
+    createMergedGeometry(geometries) {
+      const mergedGeometry = new THREE.BufferGeometry()
+      const mergedVertices = []
+      const mergedNormals = []
+      const mergedUvs = []
+
+      geometries.forEach((geometry) => {
+        const positions = geometry.attributes.position.array
+        const normals = geometry.attributes.normal.array
+
+        mergedVertices.push(...positions)
+        mergedNormals.push(...normals)
+
+        if (geometry.attributes.uv) {
+          const uvs = geometry.attributes.uv.array
+          mergedUvs.push(...uvs)
+        }
+      })
+
+      mergedGeometry.setAttribute(
+        'position',
+        new THREE.BufferAttribute(new Float32Array(mergedVertices), 3)
+      )
+      mergedGeometry.setAttribute(
+        'normal',
+        new THREE.BufferAttribute(new Float32Array(mergedNormals), 3)
+      )
+      mergedGeometry.setAttribute(
+        'uv',
+        new THREE.BufferAttribute(new Float32Array(mergedUvs), 2)
+      )
+      mergedGeometry.computeVertexNormals()
+      return mergedGeometry
+    },
+    updateOrCreateMergedMesh(mesh, geometries, material) {
+      if (!mesh) {
+        let mergedGeometry = this.createMergedGeometry(geometries)
+        mesh = new THREE.Mesh(mergedGeometry, material)
+        // Add the merged mesh to the scene
+        this.scene.add(mesh)
+      } else {
+        let mergedGeometry = this.updateMergedGeometry(
+          geometries,
+          mesh.geometry
+        )
+        mesh.geometry = mergedGeometry
+      }
+      return mesh
+    }
+  }
+}

package/src/helper/render/obstacle.js

@@ -5,9 +5,22 @@ import {
 } from './geometryHandler'
 export default {
   methods: {
+    data() {
+      return {
+        mergedObstacleMesh: null,
+        mergedObstacleSideMesh: null
+      }
+    },
+    applyTextureOnObstacles(material = this.material.roof) {
+      this.reorderRoofMaterials()
+      if (this.mergedObstacleMesh) {
+        this.applyTextureOnMesh(material, this.mergedObstacleMesh)
+      }
+    },
     renderObstacles() {
       this.clearByType('obstacleMeshes')
-
+      let obstacleGeometries = []
+      let obstacleSideGeometries = []
       this.roofs.forEach((roofPolygon) => {
         roofPolygon.holes
           .filter((poly) => poly.layer == 'obstacle')
@@ -24,7 +37,7 @@ export default {
             if (geometry && geometrySide) {
               const mesh = new THREE.Mesh(geometry, this.material.roof)
               const meshSide = new THREE.Mesh(geometrySide, this.material.wall)
-              this.applyTextureOnMesh(this.material.roof, mesh)
+              // this.applyTextureOnMesh(this.material.roof, mesh)
 
               mesh.userData.version = obstaclePolygon.version
               mesh.userData.type = 'obstacleMeshes'
@@ -37,12 +50,6 @@ export default {
                 obstaclePolygon.id + '-' + roofPolygon.id + '_side'
               meshSide.userData.polygonId = obstaclePolygon.id
 
-              mesh.matrixAutoUpdate = false
-              meshSide.matrixAutoUpdate = false
-              mesh.frustumCulled = false
-              meshSide.frustumCulled = false
-              this.scene.add(mesh)
-              this.scene.add(meshSide)
               this.meshes.obstacleMeshes[
                 obstaclePolygon.id + '-' + roofPolygon.id + '_top'
               ] = mesh
@@ -50,8 +57,31 @@ export default {
                 obstaclePolygon.id + '-' + roofPolygon.id + '_side'
               ] = meshSide
             }
+            obstacleGeometries.push(
+              this.meshes.obstacleMeshes[
+                obstaclePolygon.id + '-' + roofPolygon.id + '_top'
+              ].geometry
+            )
+            obstacleSideGeometries.push(
+              this.meshes.obstacleMeshes[
+                obstaclePolygon.id + '-' + roofPolygon.id + '_side'
+              ].geometry
+            )
           })
       })
+
+      // Create the mesh using the merged geometry and shared material
+      this.mergedObstacleMesh = this.updateOrCreateMergedMesh(
+        this.mergedObstacleMesh,
+        obstacleGeometries,
+        this.material.roof
+      )
+      this.mergedObstacleSideMesh = this.updateOrCreateMergedMesh(
+        this.mergedObstacleSideMesh,
+        obstacleSideGeometries,
+        this.material.wall
+      )
+      this.applyTextureOnObstacles(this.material.roof)
     }
   }
 }

package/src/helper/render/panel.js

@@ -6,7 +6,33 @@ import {
   updateBufferPanelSideGeometry
 } from './geometryHandler'
 export default {
+  data() {
+    return {
+      mergedPanelSideMesh: null,
+      mergedPanelTopMeshes: {}
+    }
+  },
   methods: {
+    hidePanels() {
+      if (this.mergedPanelTopMeshes) {
+        Object.values(this.mergedPanelTopMeshes).forEach((mesh) => {
+          mesh.visible = false
+        })
+      }
+      if (this.mergedPanelSideMesh) {
+        this.mergedPanelSideMesh.visible = false
+      }
+    },
+    showPanels() {
+      if (this.mergedPanelTopMeshes) {
+        Object.values(this.mergedPanelTopMeshes).forEach((mesh) => {
+          mesh.visible = true
+        })
+      }
+      if (this.mergedPanelSideMesh) {
+        this.mergedPanelSideMesh.visible = true
+      }
+    },
     renderPanels() {
       this.clearRemovedOnes('panelsMeshes')
       Object.values(this.meshes.panelsMeshes).forEach((mesh) => {
@@ -29,22 +55,28 @@ export default {
         }
       })
 
+      let panelSideGeometries = []
+      let panelTopGeometries = {}
       this.panels.forEach((panelPolygon) => {
         //definition of the material
         if (panelPolygon.moduleField.data.number_of_panels_override) return
-        let material =
-          this.material.panel['default_' + this.moduleTextureVersionId]
+        let materialId = 'default_' + this.moduleTextureVersionId
+        let material = this.material.panel[materialId]
         material.transparent = true
         material.opacity = this.panelOpacity
         if (panelPolygon.moduleField.pvData) {
-          let pvId = panelPolygon.moduleField.pvData.id
-          if (this.material.panel[pvId]) {
-            material = this.material.panel[pvId]
+          if (this.material.panel[panelPolygon.moduleField.pvData.id]) {
+            materialId = panelPolygon.moduleField.pvData.id
+            material = this.material.panel[materialId]
           }
         } else if (panelPolygon.moduleField.data) {
-          let pvId = panelPolygon.moduleField.data.component_id_pv_module
-          if (this.material.panel[pvId]) {
-            material = this.material.panel[pvId]
+          if (
+            this.material.panel[
+              panelPolygon.moduleField.data.component_id_pv_module
+            ]
+          ) {
+            materialId = panelPolygon.moduleField.data.component_id_pv_module
+            material = this.material.panel[materialId]
           }
         }
 
@@ -54,10 +86,17 @@ export default {
         ) {
           const geometry = getBufferPanelGeometry(panelPolygon)
           const geometrySide = getBufferPanelSideGeometry(panelPolygon)
-
+          if (!panelTopGeometries[materialId]) {
+            panelTopGeometries[materialId] = []
+          }
+          panelTopGeometries[materialId].push(geometry)
+          panelSideGeometries.push(geometrySide)
           if (geometry && geometrySide) {
             const mesh = new THREE.Mesh(geometry, material)
-            const meshSide = new THREE.Mesh(geometrySide, this.material.wall)
+            const meshSide = new THREE.Mesh(
+              geometrySide,
+              this.material.panelSide
+            )
             mesh.userData.version = panelPolygon.version
             mesh.userData.type = 'panelsMeshes'
             mesh.userData.meshId = panelPolygon.id + '_top'
@@ -68,8 +107,6 @@ export default {
             meshSide.userData.polygonId = panelPolygon.id
             geometry.dispose()
             geometrySide.dispose()
-            this.scene.add(mesh)
-            this.scene.add(meshSide)
             mesh.matrixAutoUpdate = false
             meshSide.matrixAutoUpdate = false
             this.meshes.panelsMeshes[panelPolygon.id + '_top'] = mesh
@@ -79,18 +116,49 @@ export default {
           const topMesh = this.meshes.panelsMeshes[panelPolygon.id + '_top']
           const sideMesh = this.meshes.panelsMeshes[panelPolygon.id + '_side']
           if (panelPolygon.version > topMesh.userData.version) {
-            topMesh.geometry = updateBufferPanelGeometry(
+            let topGeometry = updateBufferPanelGeometry(
               panelPolygon,
               topMesh.geometry
             )
-            sideMesh.geometry = updateBufferPanelSideGeometry(
+            let sideGeometry = updateBufferPanelSideGeometry(
               panelPolygon,
               sideMesh.geometry
             )
+
+            topMesh.geometry = topGeometry
+            sideMesh.geometry = sideGeometry
           }
+          panelSideGeometries.push(sideMesh.geometry)
+          if (!panelTopGeometries[materialId]) {
+            panelTopGeometries[materialId] = []
+          }
+          panelTopGeometries[materialId].push(topMesh.geometry)
           topMesh.material = material
         }
       })
+
+      //removing unused mesh
+      const materialIds = Object.keys(panelTopGeometries)
+      const materialIdsToRemove = Object.keys(this.mergedPanelTopMeshes).filter(
+        (key) => !materialIds.includes(key)
+      )
+      for (let materialId of materialIdsToRemove) {
+        this.clearMesh(this.mergedPanelTopMeshes[materialId])
+        delete this.mergedPanelTopMeshes[materialId]
+      }
+      this.mergedPanelSideMesh = this.updateOrCreateMergedMesh(
+        this.mergedPanelSideMesh,
+        panelSideGeometries,
+        this.material.panelSide
+      )
+
+      for (let [key, geometries] of Object.entries(panelTopGeometries)) {
+        this.mergedPanelTopMeshes[key] = this.updateOrCreateMergedMesh(
+          this.mergedPanelTopMeshes[key],
+          geometries,
+          this.material.panel[key]
+        )
+      }
     }
   }
 }

package/src/helper/render/projectionMaterial.js

@@ -9,35 +9,9 @@ export default {
     },
     async updateProjectionMaterials() {
       this.setImageOverlayCameraPosition()
-      let materialPromises = [
-        this.getMapProjectionMaterial(),
-        this.getImageOverlayMaterial()
-      ]
-      let materials = await Promise.all(materialPromises)
-      this.mapProjectionMaterial = materials[0]
-      this.imageOverlayMaterial = materials[1]
+      this.imageOverlayMaterial = await this.getImageOverlayMaterial()
 
-      let index = this.material.roof.findIndex(
-        (material) => material.userData.type == 'mapProjectionMaterial'
-      )
-      if (this.mapProjectionMaterial) {
-        if (index >= 0) {
-          this.material.roof[index] = this.mapProjectionMaterial
-          this.material.roof = [...this.material.roof]
-        } else {
-          this.material.roof = [
-            ...this.material.roof,
-            this.mapProjectionMaterial
-          ]
-          this.reorderRoofMaterials()
-        }
-      } else if (index >= 0) {
-        this.material.roof[index].dispose()
-        this.material.roof.splice(index, 1)
-        this.material.roof = [...this.material.roof]
-      }
-
-      index = this.material.roof.findIndex(
+      const index = this.material.roof.findIndex(
         (material) => material.userData.type == 'imageOverlayMaterial'
       )
       if (this.imageOverlayMaterial) {