@eturnity/eturnity_3d 7.2.3 → 7.2.4-EPDM-7379.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eturnity/eturnity_3d",
   "private": false,
-  "version": "7.2.3",
+  "version": "7.2.4-EPDM-7379.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.2.3-qa-7.6.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,135 @@
 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
+      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 +162,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 +174,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 +183,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 +264,125 @@ 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 {
+          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

@@ -35,19 +35,18 @@ export default {
             let meshTop = this.meshes.panelsMeshes[panel.id + '_top']
             let meshSide = this.meshes.panelsMeshes[panel.id + '_side']
             if (meshTop || meshSide) {
-              this.clearMesh(meshTop)
-              this.clearMesh(meshSide)
+              this.clearMeshFromScene(meshTop, this.scene)
+              this.clearMeshFromScene(meshSide, this.scene)
             }
           })
         )
       )
     },
-    clearMesh(mesh) {
-      
-      if (!mesh || !this.scene) {
+    clearMeshFromScene(mesh, scene) {
+      if (!mesh || !scene) {
         return
       }
-      this.scene.remove(mesh)
+      scene.remove(mesh)
       if (mesh.geometry && mesh.geometry.dispose) {
         mesh.geometry.dispose()
         mesh.geometry = null
@@ -73,21 +72,14 @@ export default {
     clearEdgesRemovedOnes() {
       Object.values(this.meshes['edgeMeshes']).forEach((mesh) => {
         if (!this.edgeIds.includes(mesh.userData.edgeId)) {
-          this.clearMesh(mesh)
-        }
-      })
-    },
-    clearNodesRemovedOnes() {
-      Object.values(this.meshes['nodeMeshes']).forEach((mesh) => {
-        if (!this.nodeIds.includes(mesh.userData.nodeId)) {
-          this.clearMesh(mesh)
+          this.clearMeshFromScene(mesh, this.scene)
         }
       })
     },
     clearRemovedOnes(type) {
       Object.values(this.meshes[type]).forEach((mesh) => {
         if (!this.polygonIds.includes(mesh.userData.polygonId)) {
-          this.clearMesh(mesh)
+          this.clearMeshFromScene(mesh, this.scene)
         }
       })
     },

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/imageOverlay.js

@@ -34,7 +34,7 @@ export default {
   methods: {
     renderImageOverlayOnBackground() {
       if (!this.imageOverlay || !this.imageOverlayMaterial) {
-        this.clearMesh(this.meshes.backgroundMesh)
+        this.clearMeshFromScene(this.meshes.backgroundMesh, this.scene)
         this.meshes.backgroundMesh = null
         return
       }