@eturnity/eturnity_3d 7.2.2-qa-7.2.4 → 7.2.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eturnity/eturnity_3d",
   "private": false,
-  "version": "7.2.2-qa-7.2.4",
+  "version": "7.2.2",
   "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": "7.2.2-qa-7.2.3",
+    "@eturnity/eturnity_maths": "7.2.2",
     "core-js": "^2.6.12",
     "cors": "^2.8.5",
     "earcut": "^2.2.4",

package/src/components/ThreeCanvasViewer.vue

@@ -25,6 +25,15 @@ export default {
   data() {
     return {
       scene: new THREE.Scene(),
+      camera: new THREE.PerspectiveCamera(50, 300 / 300, 0.1, 100000),
+      orthographicCamera: new THREE.OrthographicCamera(
+        10 / -2,
+        10 / 2,
+        10 / 2,
+        10 / -2,
+        1,
+        1000
+      ),
       layers: null,
       provider: null,
       cameraProjection: null,
@@ -52,14 +61,13 @@ export default {
       },
       screenshotable: false,
       areModuleFieldsVisible: false,
-      areUserDeactivatedPanelsVisible: false,
-      animationFrameId: null,
       intervalId: null,
+      requestAnimationFrameId: null,
     }
   },
   beforeDestroy() {
     clearInterval(this.intervalId)
-    cancelAnimationFrame(this.animationFrameId)
+    cancelAnimationFrame(this.requestAnimationFrameId)
   },
   mixins: [renderMixin, threeMixin, materialMixin],
   async mounted() {
@@ -280,7 +288,7 @@ export default {
     },
     animate() {
       this.render()
-      this.animationFrameId = requestAnimationFrame(this.animate)
+      this.requestAnimationFrameId = requestAnimationFrame(this.animate)
     },
     render() {
       this.renderer.clear()

package/src/config.js

@@ -4,7 +4,7 @@ export const snapToPointTolerance = 15
 export const snapToIntersectionPointTolerance = 15
 export const snapToLineTolerance = 10
 export const distanceToCloseNode = 70
-export const mmTolerance = 1
+export const mmTolerance = 50
 export const earthRadius = 6371008
 
 export const layerColors = {
@@ -139,8 +139,8 @@ export const maxMargin = 2500
 export const node3DRadius = 0.05
 export const beamColor = '#ffffff'
 export const node3DColor = 'white'
-export const beamOpacity = 0.1
-export const node3dOpacity = 0.1
+export const beamOpacity = 0.4
+export const node3dOpacity = 0.3
 export const dimMarginColor = '#ff000020'
 export const defaultTextureUrl = require('./assets/images/panels/reneSola_Virtus_2_JC320S_24_Bbw.png')
 const textureImageDomain = 'https://public-data.eturnity.io/'

package/src/helper/cameraMixin.js

@@ -1,136 +1,12 @@
 import TWEEN from 'tween'
-import * as THREE from 'three'
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import {
   addVector,
-  getDistanceBetweenPoints,
   multiplyVector,
   substractVector
 } from '@eturnity/eturnity_maths'
 
 export default {
-  data() {
-    return {
-      camera: null,
-      perspectiveCamera: new THREE.PerspectiveCamera(50, 300 / 300, 1, 50000),
-      orthographicCamera: new THREE.OrthographicCamera(10, 10, 10, 10, 1, 1000)
-    }
-  },
   methods: {
-    turnPerspectiveCameraToOrthogonal() {
-      const cameraPosition = new THREE.Vector3(
-        this.camera.position.x,
-        this.camera.position.y,
-        this.camera.position.z
-      )
-      var halfHeightDistance =
-        (this.camera.position.z * this.camera.fov * Math.PI) / 180
-
-      // Create an orthographic camera aligned to look down
-      this.orthographicCamera.left =
-        (-this.camera.aspect * halfHeightDistance) / 2
-      this.orthographicCamera.right =
-        (this.camera.aspect * halfHeightDistance) / 2
-      this.orthographicCamera.top = halfHeightDistance / 2
-      this.orthographicCamera.bottom = -halfHeightDistance / 2
-      this.orthographicCamera.near = 1
-      this.orthographicCamera.far = 1000
-      this.orthographicCamera.up = new THREE.Vector3(0, 1, 0)
-      this.orthographicCamera.position.set(
-        cameraPosition.x,
-        cameraPosition.y,
-        100
-      )
-      this.camera = this.orthographicCamera
-      this.camera.position.set(
-        cameraPosition.x,
-        cameraPosition.y,
-        cameraPosition.z
-      )
-      this.camera.position.set(
-        cameraPosition.x,
-        cameraPosition.y,
-        cameraPosition.z
-      )
-      this.camera.updateProjectionMatrix()
-      this.renderer.camera = this.camera
-      this.composer.renderCamera = this.camera
-
-      this.renderPass.camera = this.camera
-      this.overlayRenderPass.camera = this.camera
-      this.outlinePassHighlight.renderCamera = this.camera
-      this.outlinePassSelected.renderCamera = this.camera
-      
-      this.orbitControl.screenSpacePanning = true
-      this.orbitControl.object = this.camera
-      this.orbitControl.target.set(cameraPosition.x, cameraPosition.y, 0)
-      this.orbitControl.mouseButtons = {
-        LEFT: THREE.MOUSE.PAN,
-        MIDDLE: THREE.MOUSE.DOLLY,
-        RIGHT: THREE.MOUSE.ROTATE
-      }
-      this.orbitControl.enableRotate = false
-      this.orbitControl.addEventListener('change', () => {
-        this.orbitControlChange()
-      })
-      this.orbitControl.update()
-      this.camera.position.set(
-        cameraPosition.x,
-        cameraPosition.y,
-        cameraPosition.z
-      )
-      this.camera.lookAt(
-        new THREE.Vector3(cameraPosition.x, cameraPosition.y, 0)
-      ) // Set look at coordinate like this
-      this.camera.updateProjectionMatrix()
-      this.nodesVisible = true
-      this.renderNodes()
-      this.composer.render()
-    },
-    turnOrthogonalCameraToPerspective() {
-      this.camera = this.perspectiveCamera
-      console.log(this.orthographicCamera)
-      let altitude =
-        (this.orthographicCamera.right - this.orthographicCamera.left) /
-        ((this.perspectiveCamera.fov * Math.PI) / 180) /
-        this.perspectiveCamera.aspect
-
-      this.camera.position.set(
-        this.orthographicCamera.position.x,
-        this.orthographicCamera.position.y,
-        altitude
-      )
-
-      this.camera.up = new THREE.Vector3(0, 0, 1)
-      this.camera.updateProjectionMatrix()
-
-      this.renderer.camera = this.camera
-      this.composer.renderer.camera = this.camera
-      this.composer.renderCamera = this.camera
-      this.renderPass.camera = this.camera
-      this.overlayRenderPass.camera = this.camera
-      this.outlinePassHighlight.camera = this.camera
-      this.outlinePassHighlight.renderCamera = this.camera
-      this.outlinePassSelected.camera = this.camera
-      this.outlinePassSelected.renderCamera = this.camera
-      this.orbitControl.camera = this.camera
-      this.orbitControl.object = this.camera
-      this.orbitControl.target.set(
-        this.camera.position.x,
-        this.camera.position.y,
-        0
-      )
-      this.orbitControl.screenSpacePanning = false
-      this.orbitControl.enableRotate = true
-      this.orbitControl.mouseButtons = {
-        LEFT: THREE.MOUSE.ROTATE,
-        MIDDLE: THREE.MOUSE.DOLLY,
-        RIGHT: THREE.MOUSE.PAN
-      }
-      this.orbitControl.update()
-
-      this.composer.render()
-    },
     zoomIn3D() {
       let target = this.orbitControl.target
       let curentPosition = this.camera.position
@@ -163,7 +39,6 @@ export default {
     },
     setCameraGlobalPosition() {
       if (this.roofs.length == 0) return
-      let newFov = 50
       let bounds = this.roofsBounds
       let targetVector = {
         x: (bounds.xMax + bounds.xMin) / 2000,
@@ -175,7 +50,7 @@ export default {
         (bounds.yMax - bounds.yMin) / 2000
       )
       let distance =
-        5 + objectRadius_m / Math.sin(((newFov / 2) * Math.PI) / 180)
+        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 = [
@@ -184,39 +59,8 @@ export default {
         positionVector.z
       ]
       let target = [targetVector.x, targetVector.y, targetVector.z]
-      this.setTweenTo(position, target, newFov)
-    },
-    setCameraGlobalVerticalPosition() {
-      let position, target
-      let newFov = 10
-      if (this.roofs.length != 0) {
-        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 =
-          2 * (objectRadius_m / Math.sin(((newFov / 2) * Math.PI) / 180))
-        let cameraMoveVector = { x: 0, y: 0, z: distance }
-        const positionVector = addVector(targetVector, cameraMoveVector)
-        position = [positionVector.x, positionVector.y, positionVector.z]
-        target = [targetVector.x, targetVector.y, targetVector.z]
-      } else {
-        position = [0, 0, 300]
-        target = [0, 0, 0]
-      }
-      this.setTweenTo(
-        position,
-        target,
-        newFov,
-        this.turnPerspectiveCameraToOrthogonal
-      )
+      this.setTweenTo(position, target)
     },
     setCameraOrthogonalTo(polygon) {
       if (polygon) {
@@ -265,128 +109,23 @@ export default {
         this.setTweenTo(position, target)
       }
     },
-    setTweenTo(position, target, fov = 50, onCompleteCallback = () => {}) {
+    setTweenTo(position, target, speed = 2000) {
       TWEEN.removeAll()
-      console.log('setTweenTo')
+      if (this.orbitControl) {
+        this.tweenOrbit = new TWEEN.Tween(this.orbitControl.target)
+          .to({ x: target[0], y: target[1], z: target[2] }, speed)
+          .easing(TWEEN.Easing.Sinusoidal.Out)
+          .start()
+      }
       if (this.camera) {
-        const currentTweenVar = {
-          t: 0
-        }
-        const initialTarget = {
-          x: this.orbitControl.target.x,
-          y: this.orbitControl.target.y,
-          z: this.orbitControl.target.z
-        }
-        const initialFov = this.camera.fov
-        const initialCameraPosition = {
-          x: this.camera.position.x,
-          y: this.camera.position.y,
-          z: this.camera.position.z
-        }
-        const finalCameraPosition = {
-          x: position[0],
-          y: position[1],
-          z: position[2]
-        }
-        if (position[0] == target[0] && position[1] == target[1]) {
-          const distance2D = getDistanceBetweenPoints(
-            finalCameraPosition,
-            initialCameraPosition
-          )
-          //angle from south
-          const angle2D = Math.atan2(
-            initialCameraPosition.y - finalCameraPosition.y,
-            initialCameraPosition.x - finalCameraPosition.x
-          )
-          console.log('setTween Camera Vertical')
-          this.tweenCamera = new TWEEN.Tween(currentTweenVar)
-            .to({ t: 1 }, 2000)
-            .easing(TWEEN.Easing.Sinusoidal.Out)
-            .onUpdate(() => {
-              const t = currentTweenVar.t
-              this.camera.fov = initialFov + Math.sqrt(t) * (fov - initialFov)
-
-              const newDistance = distance2D * (1 - t)
-              const newAngle = (angle2D + Math.PI / 2) * (1 - t) - Math.PI / 2
-              const newAltitude =
-                finalCameraPosition.z +
-                (1 - t) * (initialCameraPosition.z - finalCameraPosition.z)
-              const nextPosition = {
-                x: finalCameraPosition.x + newDistance * Math.cos(newAngle),
-                y: finalCameraPosition.y + newDistance * Math.sin(newAngle),
-                z: newAltitude
-              }
-              this.camera.position.set(
-                nextPosition.x,
-                nextPosition.y,
-                nextPosition.z
-              )
-              this.camera.up = new THREE.Vector3(
-                0,
-                Math.sin((t * Math.PI) / 2),
-                Math.cos((t * Math.PI) / 2)
-              )
-
-              this.camera.updateProjectionMatrix()
-              const nextTarget = {
-                x: initialTarget.x + t * (target[0] - initialTarget.x),
-                y: initialTarget.y + t * (target[1] - initialTarget.y),
-                z: initialTarget.z + t * (target[2] - initialTarget.z)
-              }
-
-              this.orbitControl.target.set(
-                nextTarget.x,
-                nextTarget.y,
-                nextTarget.z
-              )
-              if (this.orbitControl && this.orbitControl.update)
-                this.orbitControl.update()
-            })
-            .onComplete(() => {
-              onCompleteCallback()
-            })
-        } else {
-          console.log('setTween Camera not Vertical')
-          this.camera.up = { x: 0, y: 0, z: 1 }
-          this.tweenCamera = new TWEEN.Tween(currentTweenVar)
-            .to({ t: 1 }, 2000)
-            .easing(TWEEN.Easing.Sinusoidal.Out)
-            .onUpdate(() => {
-              const t = currentTweenVar.t
-              this.camera.fov = initialFov + t * t * (fov - initialFov)
-              this.camera.updateProjectionMatrix()
-
-              const nextPosition = {
-                x:
-                  finalCameraPosition.x +
-                  (1 - t) * (initialCameraPosition.x - finalCameraPosition.x),
-                y:
-                  finalCameraPosition.y +
-                  (1 - t) * (initialCameraPosition.y - finalCameraPosition.y),
-                z:
-                  finalCameraPosition.z +
-                  (1 - t) * (initialCameraPosition.z - finalCameraPosition.z)
-              }
-              this.camera.position.set(
-                nextPosition.x,
-                nextPosition.y,
-                nextPosition.z
-              )
-              const nextTarget = {
-                x: initialTarget.x + t * (target[0] - initialTarget.x),
-                y: initialTarget.y + t * (target[1] - initialTarget.y),
-                z: initialTarget.z + t * (target[2] - initialTarget.z)
-              }
-              this.orbitControl.target.set(
-                nextTarget.x,
-                nextTarget.y,
-                nextTarget.z
-              )
-              if (this.orbitControl && this.orbitControl.update)
-                this.orbitControl.update()
-            })
-        }
-        this.tweenCamera.start()
+        this.tweenCamera = new TWEEN.Tween(this.camera.position)
+          .to({ x: position[0], y: position[1], z: position[2] }, speed)
+          .easing(TWEEN.Easing.Sinusoidal.Out)
+          .onUpdate(() => {
+            if (this.orbitControl && this.orbitControl.update)
+              this.orbitControl.update()
+          })
+          .start()
       }
     }
   },

package/src/helper/materialMixin.js

@@ -32,32 +32,18 @@ export default {
       side: THREE.DoubleSide
     })
 
-    this.material.edge = new THREE.MeshBasicMaterial({
+    this.material.edge = new THREE.MeshPhongMaterial({
       color: beamColor,
       transparent: true,
       opacity: beamOpacity
     })
-    //Creating dot alpha texture for nodes
-    const canvas = document.createElement('canvas'),
-    ctx = canvas.getContext('2d');
-    canvas.width = 64
-    canvas.height = 64
-    ctx.fillStyle = 'black'
-    ctx.fillRect(0, 0, 64, 64)
-    ctx.strokeStyle = 'white'
-    ctx.beginPath()
-    ctx.lineWidth = 10
-    ctx.arc(32, 32, 16, 0, Math.PI * 2)
-    ctx.stroke()
-    const texture = new THREE.CanvasTexture(canvas)
 
     this.material.node = new THREE.PointsMaterial({
-      alphaMap: texture,
-      size: 25,
-      sizeAttenuation: false,
-      transparent: true,
-      color: "0xffffff",
-      opacity: 1,
+      size: 0.05,
+      sizeAttenuation: true,
+      color: node3DColor,
+      opacity: node3dOpacity,
+      transparent: true
     })
 
     this.material.panel = {}
@@ -72,13 +58,6 @@ export default {
         side: THREE.DoubleSide
       })
     }
-    this.material.panel['userDeactivatedPanel'] = new THREE.MeshBasicMaterial({
-      color: 0xffffff,
-      transparent: true,
-      alphaTest: 0,
-      opacity: 0.2,
-      side: THREE.DoubleSide
-    })
     this.material.roof = [this.material.wall]
 
     this.material.flatRoof = new THREE.MeshPhongMaterial({
@@ -115,8 +94,7 @@ export default {
       color: 0xffffff,
       transparent: true,
       alphaTest: 1,
-      opacity: 0.2,
-      side: THREE.DoubleSide
+      opacity: 0
     })
     this.material.moduleField = new THREE.MeshBasicMaterial({
       color: 0xe0e0ff,

package/src/helper/render/clear.js

@@ -43,6 +43,7 @@ export default {
       )
     },
     clearMesh(mesh) {
+      
       if (!mesh || !this.scene) {
         return
       }
@@ -76,6 +77,13 @@ export default {
         }
       })
     },
+    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)) {

package/src/helper/render/edge.js

@@ -36,62 +36,30 @@ export default {
     },
     renderEdges() {
       this.clearEdgesRemovedOnes('edgeMeshes')
-      if(this.renderLineEdges){
-        this.renderLineEdges()
-      }
       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.forEach((edge) => {
-        cylinder = this.meshes.edgeMeshes[edge.id]
-        if (cylinder) {
-          cylinder.visible = false
-        }
-        if (['obstacle', 'construction'].includes(edge.layer)) return
-        if (
-          ['selectRoof'].includes(this.selectedTool) &&
-          edge.layer != 'roof'
-        ) {
-          return
-        }
-        if (
-          ['selectModuleField'].includes(this.selectedTool) &&
-          (edge.layer != 'moduleField' ||
-            !this.selectedModuleField ||
-            !edge.belongsTo
-              .map((i) => i.polygonId)
-              .includes(this.selectedModuleField.id))
-        ) {
-          return
-        }
-        cylinder = this.meshes.edgeMeshes[edge.id]
-        if (cylinder) {
-          //update
-          cylinder.visible = true
-          this.setCylinderPosition(cylinder, edge)
-          //change cylinder length
-        } else {
-          const edgeRadius = this.edgeRadius || 0.1
-          const geometry = new THREE.CylinderGeometry(
-            edgeRadius,
-            edgeRadius,
-            1,
-            6
-          )
-          if (this.edgeOpacity != undefined) {
-            material.opacity = this.edgeOpacity
-          }
-          cylinder = new THREE.Mesh(geometry, material.clone())
-          cylinder = this.setCylinderPosition(cylinder, edge)
+      this.edges
+        .filter((edge) => edge.layer == 'roof')
+        .forEach((edge) => {
+          cylinder = this.meshes.edgeMeshes[edge.id]
+          if (cylinder) {
+            //update
+            this.setCylinderPosition(cylinder, edge)
+            //change cylinder length
+          } else {
+            const geometry = new THREE.CylinderGeometry(0.1, 0.1, 1, 6)
+            cylinder = new THREE.Mesh(geometry, material)
+            cylinder = this.setCylinderPosition(cylinder, edge)
 
-          cylinder.userData.meshId = edge.id
-          cylinder.userData.edgeId = edge.id
-          cylinder.userData.type = 'edgeMeshes'
-          cylinder.userData.layer = edge.layer
+            cylinder.userData.edgeId = edge.id
 
-          this.meshes.edgeMeshes[edge.id] = cylinder
-          this.scene.add(cylinder)
-        }
-      })
+            this.meshes.edgeMeshes[edge.id] = cylinder
+            this.scene.add(cylinder)
+          }
+        })
     }
   }
 }

package/src/helper/render/margin.js

@@ -6,58 +6,13 @@ export default {
     renderRoofsMargin() {
       this.clearByType('roofMarginMeshes')
 
-      if (
-        ![
-          'selectMargin',
-          'selectModuleField',
-          'drawRoof',
-          'drawObstacle'
-        ].includes(this.selectedTool)
-      ) {
-        return
-      }
-      let showableRoofs = []
-      if (['drawRoof', 'drawObstacle'].includes(this.selectedTool)) {
-        if (this.selectedRoof) {
-          showableRoofs = [this.selectedRoof]
-        }
-        if (this.selectedObstacle) {
-          showableRoofs = this.selectedObstacle.roofs
-        }
-      } else {
-        showableRoofs = this.roofs
-      }
-      showableRoofs.forEach((roofPolygon) => {
-        const geometries = getBufferRoofMarginGeometry(roofPolygon)
+      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
+              const marginColor = roofPolygon.margins.isSameMargin
                 ? colorArrayBase[0]
                 : colorArrayBase[index % colorArrayBase.length]
               let material = new THREE.MeshPhongMaterial({
@@ -71,17 +26,43 @@ export default {
               })
               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
+              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/mergedGeometry.js

@@ -10,9 +10,9 @@ export default {
       geometries.forEach((geometry) => {
         const positions = geometry.attributes.position.array
         const normals = geometry.attributes.normal.array
-        mergedVertices.push(...positions.slice(0, 3 * geometry.drawRange.count))
-        mergedNormals.push(...normals.slice(0, 3 * geometry.drawRange.count))
 
+        mergedVertices.push(...positions.slice(0, geometry.drawRange.count * 3))
+        mergedNormals.push(...normals.slice(0, geometry.drawRange.count * 3))
         if (geometry.attributes.uv) {
           const uvs = geometry.attributes.uv.array
           mergedUvs.push(...uvs)
@@ -41,12 +41,12 @@ export default {
         for (let k in mergedNormals) {
           normals[k] = mergedNormals[k]
         }
-        mergedGeometry.setDrawRange(0, mergedVertices.length / 3)
       } else {
         mergedGeometry.dispose()
         mergedGeometry = null
         mergedGeometry = this.createMergedGeometry(geometries)
       }
+      mergedGeometry.setDrawRange(0, mergedVertices.length / 3)
       mergedGeometry.attributes.position.needsUpdate = true
       mergedGeometry.attributes.normal.needsUpdate = true
       mergedGeometry.needsUpdate = true
@@ -100,7 +100,6 @@ export default {
         )
         mesh.geometry = mergedGeometry
       }
-      mesh.frustumCulled = false
       return mesh
     }
   }

package/src/helper/render/moduleField.js

@@ -7,23 +7,19 @@ export default {
       if (!this.areModuleFieldsVisible) {
         return
       }
-      const moduleFieldPolygons = this.polygons.filter((p) =>
-        ['moduleField', 'tmpModuleField'].includes(p.layer)
-      )
-      moduleFieldPolygons.forEach((moduleFieldPolygon) => {
+      this.moduleFields.forEach((moduleFieldPolygon) => {
         const geometry = getBufferModuleFieldGeometry(moduleFieldPolygon)
         if (geometry) {
           let material
-          if (moduleFieldPolygon.data.number_of_panels_override) {
-            material = this.material.moduleFieldWithPanelOveride
-          } else {
-            material = this.material.moduleField
+          if(moduleFieldPolygon.data.number_of_panels_override){
+            material=this.material.moduleFieldWithPanelOveride
+          }else{
+            material=this.material.moduleField
           }
           const mesh = new THREE.Mesh(geometry, this.material.moduleField)
           mesh.matrixAutoUpdate = false
           mesh.userData.version = moduleFieldPolygon.version
           mesh.userData.type = 'moduleFieldsMeshes'
-          mesh.userData.layer = moduleFieldPolygon.layer
           mesh.userData.meshId = moduleFieldPolygon.id
           mesh.userData.polygonId = moduleFieldPolygon.id
           this.scene.add(mesh)

package/src/helper/render/node.js

@@ -1,18 +1,10 @@
 import * as THREE from 'three'
+
 export default {
   methods: {
     renderNodes() {
-      console.log('renderNodes', this.nodesVisible)
-      if (!this.nodesVisible) {
-        if (this.meshes.nodeMeshes) {
-          this.meshes.nodeMeshes.visible = false
-        }
-        return
-      }
-
       let geometry
       if (this.meshes.nodeMeshes) {
-        this.meshes.nodeMeshes.visible = true
         geometry = this.meshes.nodeMeshes.geometry
         geometry.attributes.position.needsUpdate = true
       } else {
@@ -48,11 +40,8 @@ export default {
       nodeMeshes.userData.meshId = null
       nodeMeshes.userData.polygonId = null
       nodeMeshes.matrixAutoUpdate = false
-      nodeMeshes.renderOrder = 10
       this.meshes.nodeMeshes = nodeMeshes
-      if (this.overlayScene) {
-        this.overlayScene.add(nodeMeshes)
-      }
+      this.scene.add(nodeMeshes)
     }
   }
 }

package/src/helper/render/panel.js

@@ -35,10 +35,9 @@ export default {
     },
     renderPanels() {
       this.clearRemovedOnes('panelsMeshes')
-      //clear mesh of userDeactivated panels && panels with overriden # of panels
       Object.values(this.meshes.panelsMeshes).forEach((mesh) => {
+        //clear UserDeactivatedModules
         if (
-          !this.areUserDeactivatedPanelsVisible &&
           this.polygons.find(
             (poly) =>
               poly.id == mesh.userData.polygonId &&
@@ -55,80 +54,53 @@ export default {
           this.clearMesh(mesh)
         }
       })
-
       let panelSideGeometries = []
       let panelTopGeometries = {}
-      let panels = this.panels
-      if (this.areUserDeactivatedPanelsVisible) {
-        panels = this.polygons.filter((polygon) => {
-          return ['panel', 'user_deactivated_panel'].includes(polygon.layer)
-        })
-      }
-      panels.forEach((panelPolygon) => {
-        //for each visible panels
-        //1. define materialId and material
-        //2. create or update individual meshes 
-        //  2a. Fill in panelTopGeometries & panelSideGeometries
+      this.panels.forEach((panelPolygon) => {
         if (!panelPolygon.visible) {
           return
         }
+        //definition of the material
         if (panelPolygon.moduleField.data.number_of_panels_override) {
           return
         }
-        //1.define materialId and material
-        let material
-        let materialId
-        if (panelPolygon.layer == 'user_deactivated_panel') {
-          materialId = 'userDeactivatedPanel'
-          material = this.material.panel[materialId]
-          material.opacity = this.panelOpacity
-        } else {
-          const moduleTextureId =
-            panelPolygon.moduleField.pvData.hasOwnProperty(
-              'module_texture_version_id'
-            ) && panelPolygon.moduleField.pvData.module_texture_version_id
-              ? panelPolygon.moduleField.pvData.module_texture_version_id
-              : 0
-          
-          materialId = 'default_' + moduleTextureId
-          material = this.material.panel[materialId]
-          material.transparent = true
-          material.opacity = this.panelOpacity
-          if (panelPolygon.moduleField.data) {
-            if (
-              this.material.panel[
-                panelPolygon.moduleField.data.component_id_pv_module
-              ]
-            ) {
-              materialId = panelPolygon.moduleField.data.component_id_pv_module
-              material = this.material.panel[materialId]
-            }
-          } else if (panelPolygon.moduleField.pvData) {
-            if (this.material.panel[panelPolygon.moduleField.pvData.id]) {
-              materialId = panelPolygon.moduleField.pvData.id
-              material = this.material.panel[materialId]
-            }
+        const moduleTextureId = panelPolygon.moduleField.pvData.hasOwnProperty(
+          'module_texture_version_id'
+        ) && panelPolygon.moduleField.pvData.module_texture_version_id
+          ? panelPolygon.moduleField.pvData.module_texture_version_id
+          : 0
+        let materialId = 'default_' + moduleTextureId
+        let material = this.material.panel[materialId]
+        material.transparent = true
+        material.opacity = this.panelOpacity
+        if (panelPolygon.moduleField.data) {
+          if (
+            this.material.panel[
+              panelPolygon.moduleField.data.component_id_pv_module
+            ]
+          ) {
+            materialId = panelPolygon.moduleField.data.component_id_pv_module
+            material = this.material.panel[materialId]
+          }
+        } else if (panelPolygon.moduleField.pvData) {
+          if (this.material.panel[panelPolygon.moduleField.pvData.id]) {
+            materialId = panelPolygon.moduleField.pvData.id
+            material = this.material.panel[materialId]
           }
         }
-        //2. create or update individual meshes 
         if (
           !this.meshes.panelsMeshes[panelPolygon.id + '_top'] ||
           !this.meshes.panelsMeshes[panelPolygon.id + '_side']
         ) {
-          //mesh creation
           const geometry = getBufferPanelGeometry(panelPolygon)
           const geometrySide = getBufferPanelSideGeometry(panelPolygon)
-          //2a.Fill in panelTopGeometries & panelSideGeometries
-          //gather all geometry with similar material together to merge them for faster rendering
           if (!panelTopGeometries[materialId]) {
             panelTopGeometries[materialId] = []
           }
           panelTopGeometries[materialId].push(geometry)
-          if (panelPolygon.layer != 'user_deactivated_panel') {
-            panelSideGeometries.push(geometrySide)
-          }
+          panelSideGeometries.push(geometrySide)
           if (geometry && geometrySide) {
-            const mesh = new THREE.Mesh(geometry, this.material.hidden)
+            const mesh = new THREE.Mesh(geometry, material)
             const meshSide = new THREE.Mesh(
               geometrySide,
               this.material.panelSide
@@ -137,18 +109,18 @@ export default {
             mesh.userData.type = 'panelsMeshes'
             mesh.userData.meshId = panelPolygon.id + '_top'
             mesh.userData.polygonId = panelPolygon.id
-            this.scene.add(mesh)
             meshSide.userData.version = panelPolygon.version
             meshSide.userData.type = 'panelsMeshes'
             meshSide.userData.meshId = panelPolygon.id + '_side'
             meshSide.userData.polygonId = panelPolygon.id
+            geometry.dispose()
+            geometrySide.dispose()
             mesh.matrixAutoUpdate = false
             meshSide.matrixAutoUpdate = false
             this.meshes.panelsMeshes[panelPolygon.id + '_top'] = mesh
             this.meshes.panelsMeshes[panelPolygon.id + '_side'] = meshSide
           }
         } else {
-          //update existing geometry
           const topMesh = this.meshes.panelsMeshes[panelPolygon.id + '_top']
           const sideMesh = this.meshes.panelsMeshes[panelPolygon.id + '_side']
           if (panelPolygon.version > topMesh.userData.version) {
@@ -164,9 +136,7 @@ export default {
             topMesh.geometry = topGeometry
             sideMesh.geometry = sideGeometry
           }
-          if (panelPolygon.layer != 'user_deactivated_panel') {
-            panelSideGeometries.push(sideMesh.geometry)
-          }
+          panelSideGeometries.push(sideMesh.geometry)
           if (!panelTopGeometries[materialId]) {
             panelTopGeometries[materialId] = []
           }
@@ -175,7 +145,7 @@ export default {
         }
       })
 
-      //removing unused mergedmesh
+      //removing unused mesh
       const materialIds = Object.keys(panelTopGeometries)
       const materialIdsToRemove = Object.keys(this.mergedPanelTopMeshes).filter(
         (key) => !materialIds.includes(key)

package/src/helper/render/roof.js

@@ -130,35 +130,17 @@ export default {
       this.applyTextureOnMesh(this.material.roof, this.mergedRoofMesh)
     },
     renderFlatRoofs() {
-      this.clearRemovedOnes('flatRoofMeshes')
-      let geometry
+      this.clearByType('flatRoofMeshes')
       this.roofs.forEach((roofPolygon) => {
-        let mesh = this.meshes.flatRoofMeshes[roofPolygon.id]
-        if (mesh) {
-          if (mesh.userData.version < roofPolygon.version) {
-            geometry = updateBufferRoofGeometry(
-              roofPolygon.flatOutline,
-              [],
-              mesh.geometry
-            )
-            mesh.geometry = geometry
-            mesh.userData.version = roofPolygon.version
-          }
-          mesh.visible = roofPolygon.maximumGap > maximumGapLimit
-        } else {
-          geometry = getBufferRoofGeometry(roofPolygon.flatOutline)
-          if (geometry) {
-            const material = this.material.curvedRoof
-            mesh = new THREE.Mesh(geometry, material)
-            mesh.userData.polygonId = roofPolygon.id
-            mesh.userData.version = roofPolygon.version
-            mesh.userData.type = 'flatRoofMeshes'
-            mesh.userData.meshId = roofPolygon.id
-
-            mesh.visible = roofPolygon.maximumGap > maximumGapLimit
-            this.scene.add(mesh)
-            this.meshes.flatRoofMeshes[roofPolygon.id] = mesh
-          }
+        if (roofPolygon.maximumGap < maximumGapLimit) return
+        let geometry = getBufferRoofGeometry(roofPolygon.flatOutline)
+        if (geometry) {
+          const material = this.material.curvedRoof
+          const mesh = new THREE.Mesh(geometry, material)
+          mesh.itemData = roofPolygon
+          mesh.frustumCulled = false
+          this.scene.add(mesh)
+          this.meshes.flatRoofMeshes[roofPolygon.id] = mesh
         }
       })
     }

package/src/helper/renderMixin.js

@@ -56,13 +56,6 @@ export default {
     nodeIds() {
       return this.nodes.map((p) => p.id)
     },
-    setGlobalPositionRenderNeeded() {
-      return !!this.geometryEvents.find(
-        (e) =>
-          e.id > this.lastGeometryEventIdDone &&
-          e.name == 'setCameraGlobalPosition'
-      )
-    },
     fullRenderNeeded() {
       return !!this.geometryEvents.find(
         (e) => e.id > this.lastGeometryEventIdDone && e.name == 'full'
@@ -79,11 +72,6 @@ export default {
       let methodList = []
       if (this.fullRenderNeeded) {
         methodList = this.renderingMethodsByEvent({ name: 'full' })
-        if (this.setGlobalPositionRenderNeeded) {
-          methodList.push(
-            ...this.renderingMethodsByEvent({ name: 'setCameraGlobalPosition' })
-          )
-        }
       } else {
         for (let geometryEvent of this.geometryEventsToDo) {
           for (let renderingMethod of this.renderingMethodsByEvent(
@@ -130,11 +118,6 @@ export default {
           })
           break
         case 'toolChange': //params.toolName
-          methodList.push({
-            name: 'renderEdges',
-            method: this.renderEdges,
-            arg: []
-          })
         case 'marginIsSameChange': //params.polygon
         case 'marginDifferentChange': //params.polygon,index
         case 'marginSameChange': //params.polygon
@@ -149,13 +132,6 @@ export default {
         case 'removeNodes': //params.nodes
         case 'removeEdges': //params.edges
         case 'translate': //params.edges
-          if (this.removeConstructionPolylineMesh) {
-            methodList.push({
-              name: 'removeConstructionPolyline',
-              method: this.removeConstructionPolylineMesh,
-              arg: []
-            })
-          }
           methodList.push({
             name: 'renderGeometry',
             method: this.renderGeometry,
@@ -256,24 +232,11 @@ export default {
             arg: []
           })
         case 'selectedRoofChange':
-        case 'selectedObstacleChange':
           methodList.push({
             name: 'renderFlatRoofs',
             method: this.renderFlatRoofs,
             arg: []
           })
-          methodList.push({
-            name: 'renderRoofsMargin',
-            method: this.renderRoofsMargin,
-            arg: []
-          })
-          break
-        case 'selectedModuleFieldChange':
-          methodList.push({
-            name: 'renderEdges',
-            method: this.renderEdges,
-            arg: []
-          })
           break
         case 'subHandleSelectionChange':
         case 'masterHandleSelectionChange':
@@ -358,28 +321,12 @@ export default {
             arg: [params.roofIds]
           })
           break
-        case 'selectedPanelChange':
-          methodList.push({
-            name: 'renderModuleFields',
-            method: this.renderModuleFields,
-            arg: []
-          })
-          break
-        case 'removeConstruction':
-          methodList.push({
-            name: 'removeConstructionPolyline',
-            method: this.removeConstructionPolyline,
-            arg: []
-          })
-          break
       }
       return methodList
     },
     async renderMethods(methodList) {
       for (let item of methodList) {
-        if (item.method) {
-          await item.method(...item.arg)
-        }
+        await item.method(...item.arg)
       }
     },
     renderGeometry() {
@@ -464,6 +411,12 @@ export default {
     }
   },
   beforeDestroy() {
+    if (this.tweenOrbit) {
+      this.tweenOrbit = null
+    }
+    if (this.tweenCamera) {
+      this.tweenCamera = null
+    }
     this.clearThreeObjects(this.scene)
 
     if (this.three_map) {

package/src/helper/threeMixin.js

@@ -62,7 +62,7 @@ export default {
     },
     initialiseThree(isInteractive = true) {
       this.scene.background = new THREE.Color(0xb0b0b0)
-      this.camera = this.perspectiveCamera
+
       this.camera.position.set(0, -100, 50)
       this.camera.up.set(0, 0, 1)
 
@@ -80,10 +80,6 @@ export default {
 
       // const axesHelper = new THREE.AxesHelper( 20 );
       // this.scene.add( axesHelper );
-
-      this.scene.add(this.perspectiveCamera)
-      this.scene.add(this.orthographicCamera)
-
       //Light
       const ambientLight = new THREE.AmbientLight(0xf0f0f0, 0.5)
       this.scene.add(ambientLight)
@@ -106,12 +102,7 @@ export default {
           this.camera,
           this.renderer.domElement
         )
-        this.orbitControl.mouseButtons = {
-          LEFT: THREE.MOUSE.PAN,
-          RIGHT: THREE.MOUSE.ROTATE,
-          MIDDLE: THREE.MOUSE.DOLLY
-        }
-        this.orbitControl.screenSpacePanning = false
+        this.orbitControl.maxPolarAngle = (Math.PI / 2) * (87 / 90)
         this.orbitControl.addEventListener('change', () => {
           this.orbitControlChange()
         })
@@ -123,7 +114,16 @@ export default {
       directionalLight2.dispose()
     },
     orbitControlChange() {
-      this.render()
+      if (this.orbitControl.target.z != 0) {
+        this.orbitControl.target.set(
+          this.orbitControl.target.x,
+          this.orbitControl.target.y,
+          0
+        )
+        this.orbitControl.update()
+      } else {
+        this.render()
+      }
     },
     onWindowResize() {
       this.camera.aspect = window.innerWidth / window.innerHeight

package/src/store/hydrateData.js

@@ -47,7 +47,6 @@ export async function hydratePolygons({
     })
     let roof = new Polygon(roof_outline, 'roof')
     roof.id = roofResp.roof_uuid
-    roof.version = roofResp.version
     roof.name = roofResp.roof_name
     roof.shadingData = roofResp.shading_data
     roof.systemSolarSizeKWp = roofResp.system_solar_size_kWp
@@ -68,7 +67,6 @@ export async function hydratePolygons({
     })
     let obstacle = new Polygon(obstacle_outline, 'obstacle')
     obstacle.id = obstacleResp.obstacle_uuid
-    obstacle.version = obstacleResp.version
     obstacle.height = obstacleResp.obstacle_height_above_ground_mm
     obstacle.isParallel = obstacleResp.obstacle_slope_is_parallel_to_roof
     obstacle = updateComputedGeometryPolygon(obstacle)

package/src/store/nodesEdgesCreation.js

@@ -114,9 +114,10 @@ export function generateNodes3D(polygons) {
       node3D.masterHandle.open =
         node3D.belongsTo.filter((item) => item.polygon.outline[item.index].open)
           .length > 0
-      node3D.masterHandle.selected = node3D.belongsTo.every(
-        (item) => item.polygon.outline[item.index].selected
-      )
+      node3D.masterHandle.selected =
+        node3D.belongsTo.filter(
+          (item) => item.polygon.outline[item.index].selected
+        ).length > node3D.belongsTo.length
     }
   })
   return nodes3D
@@ -179,13 +180,11 @@ export function generateEdges3D(polygons) {
         //check if edge2D already exist
         const nextPoint = outline[(i + 1) % outline.length]
         let edge3D = edges3D.find((edge) => {
-          return (
-            isAlmostSameSegment3D(
-              [point, nextPoint],
-              edge.outline,
-              mmTolerance
-            ) && edge.layer == polygon.layer
-          )
+          isAlmostSameSegment3D(
+            [point, nextPoint],
+            edge.outline,
+            mmTolerance
+          ) && edge.layer == polygon.layer
         })
         if (!edge3D) {
           //create an edge at this position