@eturnity/eturnity_3d 7.2.4 → 7.4.0

package/package.json

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

package/src/components/ThreeCanvasViewer.vue

@@ -25,15 +25,6 @@ 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,
@@ -61,13 +52,14 @@ export default {
       },
       screenshotable: false,
       areModuleFieldsVisible: false,
+      areUserDeactivatedPanelsVisible: false,
+      animationFrameId: null,
       intervalId: null,
-      requestAnimationFrameId: null,
     }
   },
   beforeDestroy() {
     clearInterval(this.intervalId)
-    cancelAnimationFrame(this.requestAnimationFrameId)
+    cancelAnimationFrame(this.animationFrameId)
   },
   mixins: [renderMixin, threeMixin, materialMixin],
   async mounted() {
@@ -288,7 +280,7 @@ export default {
     },
     animate() {
       this.render()
-      this.requestAnimationFrameId = requestAnimationFrame(this.animate)
+      this.animationFrameId = 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 = 50
+export const mmTolerance = 1
 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.4
-export const node3dOpacity = 0.3
+export const beamOpacity = 0.1
+export const node3dOpacity = 0.1
 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/UpdateRoofModuleFieldRelations.js

@@ -33,7 +33,7 @@ export function UpdateRoofModuleFieldRelations(state) {
     //check if everypoint is in the same roof and if they are not too far from the flat surface.(at least above)
     let roofPolygonCandidates = roofPolygons.filter((roof) => {
       const intersection = intersectOutlines(moduleField.outline, roof.outline)
-            if (intersection.length == 0) return false
+      if (intersection.length == 0) return false
       const intersectionArea = calculateArea(intersection[0])
       return intersectionArea > 100 && moduleField.area <= roof.area
     })

package/src/helper/cameraMixin.js

@@ -1,12 +1,136 @@
 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
@@ -39,6 +163,7 @@ export default {
     },
     setCameraGlobalPosition() {
       if (this.roofs.length == 0) return
+      let newFov = 50
       let bounds = this.roofsBounds
       let targetVector = {
         x: (bounds.xMax + bounds.xMin) / 2000,
@@ -50,7 +175,7 @@ export default {
         (bounds.yMax - bounds.yMin) / 2000
       )
       let distance =
-        5 + objectRadius_m / Math.sin(((this.camera.fov / 2) * Math.PI) / 180)
+        5 + objectRadius_m / Math.sin(((newFov / 2) * Math.PI) / 180)
       let cameraMoveVector = { x: 0, y: 0, z: distance }
       const positionVector = addVector(targetVector, cameraMoveVector)
       const position = [
@@ -59,8 +184,39 @@ 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
+        )
 
-      this.setTweenTo(position, target)
+        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
+      )
     },
     setCameraOrthogonalTo(polygon) {
       if (polygon) {
@@ -109,23 +265,126 @@ export default {
         this.setTweenTo(position, target)
       }
     },
-    setTweenTo(position, target, speed = 2000) {
+    setTweenTo(position, target, fov = 50, onCompleteCallback = () => {}) {
       TWEEN.removeAll()
-      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) {
-        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()
+        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
+          )
+          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()
       }
     }
   },

package/src/helper/materialMixin.js

@@ -32,18 +32,32 @@ export default {
       side: THREE.DoubleSide
     })
 
-    this.material.edge = new THREE.MeshPhongMaterial({
+    this.material.edge = new THREE.MeshBasicMaterial({
       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({
-      size: 0.05,
-      sizeAttenuation: true,
-      color: node3DColor,
-      opacity: node3dOpacity,
-      transparent: true
+      alphaMap: texture,
+      size: 25,
+      sizeAttenuation: false,
+      transparent: true,
+      color: "0xffffff",
+      opacity: 1,
     })
 
     this.material.panel = {}
@@ -58,6 +72,13 @@ 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({
@@ -94,7 +115,8 @@ export default {
       color: 0xffffff,
       transparent: true,
       alphaTest: 1,
-      opacity: 0
+      opacity: 0.2,
+      side: THREE.DoubleSide
     })
     this.material.moduleField = new THREE.MeshBasicMaterial({
       color: 0xe0e0ff,

package/src/helper/render/clear.js

@@ -43,7 +43,6 @@ export default {
       )
     },
     clearMesh(mesh) {
-      
       if (!mesh || !this.scene) {
         return
       }
@@ -77,13 +76,6 @@ 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,30 +36,62 @@ 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
-        .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)
+      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)
 
-            cylinder.userData.edgeId = edge.id
+          cylinder.userData.meshId = edge.id
+          cylinder.userData.edgeId = edge.id
+          cylinder.userData.type = 'edgeMeshes'
+          cylinder.userData.layer = edge.layer
 
-            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,13 +6,58 @@ export default {
     renderRoofsMargin() {
       this.clearByType('roofMarginMeshes')
 
-      if (this.selectedTool == 'selectMargin') {
-        this.roofs.forEach((roofPolygon) => {
-          const geometries = getBufferRoofMarginGeometry(roofPolygon)
+      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)
 
+        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 = roofPolygon.margins.isSameMargin
+              const marginColor = obstaclePolygon.margins.isSameMargin
                 ? colorArrayBase[0]
                 : colorArrayBase[index % colorArrayBase.length]
               let material = new THREE.MeshPhongMaterial({
@@ -26,43 +71,17 @@ export default {
               })
               const mesh = new THREE.Mesh(geometry, material)
               geometry.dispose()
+              geometry = null
+              material.dispose()
+              material = null
               this.scene.add(mesh)
-              this.meshes.roofMarginMeshes[roofPolygon.id + '_' + index] = mesh
+              this.meshes.roofMarginMeshes[
+                obstaclePolygon.id + '_' + 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,6 +100,7 @@ export default {
         )
         mesh.geometry = mergedGeometry
       }
+      mesh.frustumCulled = false
       return mesh
     }
   }

package/src/helper/render/moduleField.js

@@ -7,19 +7,23 @@ export default {
       if (!this.areModuleFieldsVisible) {
         return
       }
-      this.moduleFields.forEach((moduleFieldPolygon) => {
+      const moduleFieldPolygons = this.polygons.filter((p) =>
+        ['moduleField', 'tmpModuleField'].includes(p.layer)
+      )
+      moduleFieldPolygons.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,10 +1,17 @@
 import * as THREE from 'three'
-
 export default {
   methods: {
     renderNodes() {
+      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 {
@@ -40,8 +47,11 @@ export default {
       nodeMeshes.userData.meshId = null
       nodeMeshes.userData.polygonId = null
       nodeMeshes.matrixAutoUpdate = false
+      nodeMeshes.renderOrder = 10
       this.meshes.nodeMeshes = nodeMeshes
-      this.scene.add(nodeMeshes)
+      if (this.overlayScene) {
+        this.overlayScene.add(nodeMeshes)
+      }
     }
   }
 }

package/src/helper/render/panel.js

@@ -35,9 +35,10 @@ 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 &&
@@ -54,53 +55,80 @@ export default {
           this.clearMesh(mesh)
         }
       })
+
       let panelSideGeometries = []
       let panelTopGeometries = {}
-      this.panels.forEach((panelPolygon) => {
+      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
         if (!panelPolygon.visible) {
           return
         }
-        //definition of the material
         if (panelPolygon.moduleField.data.number_of_panels_override) {
           return
         }
-        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]
+        //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]
+            }
           }
         }
+        //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)
-          panelSideGeometries.push(geometrySide)
+          if (panelPolygon.layer != 'user_deactivated_panel') {
+            panelSideGeometries.push(geometrySide)
+          }
           if (geometry && geometrySide) {
-            const mesh = new THREE.Mesh(geometry, material)
+            const mesh = new THREE.Mesh(geometry, this.material.hidden)
             const meshSide = new THREE.Mesh(
               geometrySide,
               this.material.panelSide
@@ -109,18 +137,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) {
@@ -136,7 +164,9 @@ export default {
             topMesh.geometry = topGeometry
             sideMesh.geometry = sideGeometry
           }
-          panelSideGeometries.push(sideMesh.geometry)
+          if (panelPolygon.layer != 'user_deactivated_panel') {
+            panelSideGeometries.push(sideMesh.geometry)
+          }
           if (!panelTopGeometries[materialId]) {
             panelTopGeometries[materialId] = []
           }
@@ -145,7 +175,7 @@ export default {
         }
       })
 
-      //removing unused mesh
+      //removing unused mergedmesh
       const materialIds = Object.keys(panelTopGeometries)
       const materialIdsToRemove = Object.keys(this.mergedPanelTopMeshes).filter(
         (key) => !materialIds.includes(key)

package/src/helper/render/roof.js

@@ -130,17 +130,35 @@ export default {
       this.applyTextureOnMesh(this.material.roof, this.mergedRoofMesh)
     },
     renderFlatRoofs() {
-      this.clearByType('flatRoofMeshes')
+      this.clearRemovedOnes('flatRoofMeshes')
+      let geometry
       this.roofs.forEach((roofPolygon) => {
-        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
+        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
+          }
         }
       })
     }

package/src/helper/renderMixin.js

@@ -56,6 +56,13 @@ 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'
@@ -72,6 +79,11 @@ 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(
@@ -118,6 +130,11 @@ 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
@@ -132,6 +149,13 @@ 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,
@@ -204,6 +228,11 @@ export default {
               arg: []
             })
           }
+          methodList.push({
+            name: 'renderRoofsMargin',
+            method: this.renderRoofsMargin,
+            arg: []
+          })
           break
         case 'removePanels': //params.panels
         case 'removeModuleField': //params:moduleField
@@ -232,11 +261,24 @@ 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':
@@ -321,12 +363,28 @@ 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) {
-        await item.method(...item.arg)
+        if (item.method) {
+          await item.method(...item.arg)
+        }
       }
     },
     renderGeometry() {
@@ -411,12 +469,6 @@ 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,6 +80,10 @@ 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)
@@ -102,7 +106,13 @@ export default {
           this.camera,
           this.renderer.domElement
         )
-        this.orbitControl.maxPolarAngle = (Math.PI / 2) * (87 / 90)
+        this.orbitControl.maxPolarAngle = (0.95 * Math.PI) / 2
+        this.orbitControl.mouseButtons = {
+          RIGHT: THREE.MOUSE.PAN,
+          LEFT: THREE.MOUSE.ROTATE,
+          MIDDLE: THREE.MOUSE.DOLLY
+        }
+        this.orbitControl.screenSpacePanning = false
         this.orbitControl.addEventListener('change', () => {
           this.orbitControlChange()
         })
@@ -114,16 +124,7 @@ export default {
       directionalLight2.dispose()
     },
     orbitControlChange() {
-      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()
-      }
+      this.render()
     },
     onWindowResize() {
       this.camera.aspect = window.innerWidth / window.innerHeight

package/src/store/hydrateData.js

@@ -7,6 +7,21 @@ import {
 } from '@eturnity/eturnity_maths'
 import getLayers from '../utils/layers'
 import { UpdateRoofObstacleRelations } from '../helper/UpdateRoofObstacleRelations'
+function sanitizedOutline(outline) {
+  return outline.reduce((accumulator, currentValue) => {
+    if (
+      !accumulator.find(
+        (p) =>
+          p[0] == currentValue[0] &&
+          p[1] == currentValue[1] &&
+          p[2] == currentValue[2]
+      )
+    ) {
+      accumulator.push(currentValue)
+    }
+    return accumulator
+  }, [])
+}
 export async function hydratePolygons({
   roofsResponse,
   obstaclesResponse,
@@ -17,18 +32,24 @@ export async function hydratePolygons({
   //removing empty roof,obstacle and modulefield generated by BE on variant creation
   roofsResponse = roofsResponse.reduce((acc, cur) => {
     if (cur.roof_outline.length > 0) {
+      let outline = sanitizedOutline(cur.roof_outline)
+      cur.roof_outline = outline
       acc.push(cur)
     }
     return acc
   }, [])
   obstaclesResponse = obstaclesResponse.reduce((acc, cur) => {
     if (cur.obstacle_outline.length > 0) {
+      let outline = sanitizedOutline(cur.obstacle_outline)
+      cur.obstacle_outline = outline
       acc.push(cur)
     }
     return acc
   }, [])
   moduleFieldsResponse = moduleFieldsResponse.reduce((acc, cur) => {
     if (cur.module_field_outline.length > 0) {
+      let outline = sanitizedOutline(cur.module_field_outline)
+      cur.module_field_outline = outline
       acc.push(cur)
     }
     return acc

package/src/store/nodesEdgesCreation.js

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