@eturnity/eturnity_3d 7.30.0 → 7.32.1

package/src/components/ThreeCanvasViewer.vue

@@ -1,328 +1,337 @@
 <template>
   <div
-    class="canvas3DContainer"
     ref="canvas3DContainer"
-    :style="{ height: '100%', width: '100%', display: 'flex' }"
+    class="canvas3DContainer"
     crossorigin
-  />
+    :style="{ height: '100%', width: '100%', display: 'flex' }"
+  ></div>
 </template>
 
 <script>
-import { mapActions, mapState, mapGetters, mapMutations } from 'vuex'
-import {
-  addVector,
-  multiplyVector,
-  updateComputedGeometryPolygon,
-  normalizeVector
-} from '@eturnity/eturnity_maths'
-import OverlayLayer from '../Overlay/OverlayLayer.js'
-import threeMixin from '../helper/threeMixin'
-
-export default {
-  name: 'ThreeCanvas',
-  data() {
-    return {
-      layers: null,
-      provider: null,
-      pointer: { x: 0, y: 0 },
-      areModuleFieldsVisible: false,
-      areUserDeactivatedPanelsVisible: false,
-      animationFrameId: null,
-      intervalId: null
-    }
-  },
-  beforeDestroy() {
-    clearInterval(this.intervalId)
-    cancelAnimationFrame(this.animationFrameId)
-    OverlayLayer.removeEventListener(
-      'overlay-is-ready',
-      this.updateOverlayRendering
-    )
-  },
-  mixins: [threeMixin],
-  async mounted() {
-    await this.hydrateData(this.geometryData)
-    let isPerspectiveCamera = true
-    if (this.useCustomCamera && this.cameraPerspectiveSettings) {
-      isPerspectiveCamera =
-        this.cameraPerspectiveSettings.viewType == 'perspective'
-    }
-    this.initialiseThree({
-      isInteractive: this.isInteractive,
-      isPerspectiveCamera,
-      DOMElement: this.$refs.canvas3DContainer
-    })
+  import { mapActions, mapState, mapGetters, mapMutations } from 'vuex'
+  import {
+    addVector,
+    multiplyVector,
+    updateComputedGeometryPolygon,
+    normalizeVector,
+  } from '@eturnity/eturnity_maths'
+  import OverlayLayer from '../Overlay/OverlayLayer.js'
+  import threeMixin from '../helper/threeMixin'
 
-    await this.loadPanelsTexture()
-    this.renderRealisticGeometry()
-    if (!this.isBuildingVisible) {
-      this.hideBuildings()
-    }
-    await this.updateProjectionMaterials()
-
-    if (this.useCustomCamera) {
-      if (isPerspectiveCamera) {
-        this.setPerspectiveCameraPositionTo(
-          this.cameraPerspectiveSettings.position,
-          this.cameraPerspectiveSettings.target
-        )
-      } else {
-        this.setOrthographicCameraPositionFromCameraParameters(
-          this.cameraPerspectiveSettings.cameraParameters
-        )
+  export default {
+    name: 'ThreeCanvas',
+    mixins: [threeMixin],
+    data() {
+      return {
+        layers: null,
+        provider: null,
+        pointer: { x: 0, y: 0 },
+        areModuleFieldsVisible: false,
+        areUserDeactivatedPanelsVisible: false,
+        animationFrameId: null,
+        intervalId: null,
       }
-    } else {
-      const polygon = this.polygons.find((p) => p.id == this.uuid)
-      this.setCamera(polygon, this.view_mode)
-    }
-    this.isReady.geometry = true
-    this.intervalId = setInterval(() => this.render(), 500)
-    OverlayLayer.addEventListener(
-      'overlay-is-ready',
-      this.updateOverlayRendering
-    )
-    this.render()
-  },
-  computed: {
-    ...mapState({
-      geometryData: (state) => state.threeDModule.geometryData,
-      uuid: (state) => state.threeDModule.uuid,
-      view_mode: (state) => state.threeDModule.view_mode,
-      useCustomCamera: (state) => state.threeDModule.useCustomCamera,
-      cameraPerspectiveSettings: (state) =>
-        state.threeDModule.cameraPerspectiveSettings,
-      isInteractive: (state) => state.threeDModule.isInteractive,
-      isBuildingVisible: (state) => state.threeDModule.isBuildingVisible,
-      imageOverlay: (state) => state.threeDModule.imageOverlay
-    }),
-    ...mapGetters({
-      polygons: 'getPolygons',
-      edges: 'getEdges3D',
-      nodes: 'getNodes3D',
-      mapConfig: 'getMapConfig',
-      roofsBounds: 'getRoofsBounds',
-      layoutSettings: 'getLayoutSettings',
-      roofs: 'getRoofs',
-      obstacles: 'getObstacles',
-      moduleFields: 'getModuleFields',
-      panels: 'getPanels',
-      userDeactivatedPanels: 'getUserDeactivatedPanels'
-    })
-  },
-  methods: {
-    ...mapActions({
-      hydrateData: 'hydrateData'
-    }),
-    ...mapMutations({
-      setSelectedMapLayer: 'mutate_selectedMapLayer'
-    }),
-    hideEdges() {
-      Object.values(this.meshes.edgeMeshes).forEach(
-        (mesh) => (mesh.visible = false)
-      )
     },
-    hideWarningRoofs() {
-      Object.values(this.meshes.flatRoofMeshes).forEach(
-        (mesh) => (mesh.visible = false)
+    beforeDestroy() {
+      clearInterval(this.intervalId)
+      cancelAnimationFrame(this.animationFrameId)
+      OverlayLayer.removeEventListener(
+        'overlay-is-ready',
+        this.updateOverlayRendering
       )
     },
-    hideBuildings() {
-      Object.values(this.meshes.roofMeshes).forEach(
-        (mesh) => (mesh.visible = false)
-      )
-      Object.values(this.meshes.baseMeshes).forEach(
-        (mesh) => (mesh.visible = false)
-      )
-      Object.values(this.meshes.obstacleMeshes).forEach(
-        (mesh) => (mesh.visible = false)
-      )
-      Object.values(this.meshes.edgeMeshes).forEach(
-        (mesh) => (mesh.visible = false)
-      )
-      Object.values(this.meshes.panelsMeshes).forEach(
-        (mesh) => (mesh.visible = false)
-      )
-      this.hideMesh(this.mergedBaseMesh)
-      this.hideMesh(this.mergedRoofMesh)
-      this.hideMesh(this.mergedObstacleMesh)
-      this.hideMesh(this.mergedObstacleSideMesh)
-      this.hidePanels()
-    },
-    hideMesh(mesh) {
-      if (mesh) {
-        mesh.visible = false
+    async mounted() {
+      await this.hydrateData(this.geometryData)
+      let isPerspectiveCamera = true
+      if (this.useCustomCamera && this.cameraPerspectiveSettings) {
+        isPerspectiveCamera =
+          this.cameraPerspectiveSettings.viewType == 'perspective'
       }
-    },
-    setCamera(polygon, view_mode) {
-      let margin = 0.2
-      if (!polygon || view_mode == 'global') {
-        let roofsBounds = this.roofsBounds
-        const position = [0, 0, 100]
-        const target = [0, 0, 0]
-        this.orthographicCamera.position.set(...position)
-        this.orthographicCamera.lookAt(...target)
-        this.isReady.camera = true
+      this.initialiseThree({
+        isInteractive: this.isInteractive,
+        isPerspectiveCamera,
+        DOMElement: this.$refs.canvas3DContainer,
+      })
 
-        let { xMin, xMax, yMin, yMax } = this.orthographicBounds(
-          roofsBounds,
-          margin
-        )
-
-        this.orthographicCamera.left = xMin / 1000
-        this.orthographicCamera.right = xMax / 1000
-        this.orthographicCamera.top = yMax / 1000
-        this.orthographicCamera.bottom = yMin / 1000
-        this.orthographicCamera.updateProjectionMatrix()
-      } else if (polygon) {
-        let polygonRef = polygon
+      await this.loadPanelsTexture()
+      this.renderRealisticGeometry()
+      if (!this.isBuildingVisible) {
+        this.hideBuildings()
+      }
+      await this.updateProjectionMaterials()
 
-        //get polygonMesh
-        let mesh
-        let target
-        let distance = 45
-        if (polygonRef.layer == 'roof') {
-          mesh = this.meshes.roofMeshes[polygonRef.id]
-        } else if (polygonRef.layer == 'moduleField') {
-          mesh = this.meshes.moduleFieldsMeshes[polygonRef.id]
+      if (this.useCustomCamera) {
+        if (isPerspectiveCamera) {
+          this.setPerspectiveCameraPositionTo(
+            this.cameraPerspectiveSettings.position,
+            this.cameraPerspectiveSettings.target
+          )
+        } else {
+          this.setOrthographicCameraPositionFromCameraParameters(
+            this.cameraPerspectiveSettings.cameraParameters
+          )
         }
+      } else {
+        const polygon = this.polygons.find((p) => p.id == this.uuid)
+        this.setCamera(polygon, this.view_mode)
+      }
+      this.isReady.geometry = true
+      this.intervalId = setInterval(() => this.render(), 500)
+      OverlayLayer.addEventListener(
+        'overlay-is-ready',
+        this.updateOverlayRendering
+      )
+      this.render()
+    },
+    computed: {
+      ...mapState({
+        geometryData: (state) => state.threeDModule.geometryData,
+        uuid: (state) => state.threeDModule.uuid,
+        view_mode: (state) => state.threeDModule.view_mode,
+        useCustomCamera: (state) => state.threeDModule.useCustomCamera,
+        cameraPerspectiveSettings: (state) =>
+          state.threeDModule.cameraPerspectiveSettings,
+        isInteractive: (state) => state.threeDModule.isInteractive,
+        isBuildingVisible: (state) => state.threeDModule.isBuildingVisible,
+        imageOverlay: (state) => state.threeDModule.imageOverlay,
+      }),
+      ...mapGetters({
+        polygons: 'getPolygons',
+        edges: 'getEdges3D',
+        nodes: 'getNodes3D',
+        mapConfig: 'getMapConfig',
+        roofsBounds: 'getRoofsBounds',
+        layoutSettings: 'getLayoutSettings',
+        roofs: 'getRoofs',
+        obstacles: 'getObstacles',
+        moduleFields: 'getModuleFields',
+        panels: 'getPanels',
+        userDeactivatedPanels: 'getUserDeactivatedPanels',
+      }),
+    },
+    methods: {
+      ...mapActions({
+        hydrateData: 'hydrateData',
+      }),
+      ...mapMutations({
+        setSelectedMapLayer: 'mutate_selectedMapLayer',
+      }),
+      hideEdges() {
+        Object.values(this.meshes.edgeMeshes).forEach(
+          (mesh) => (mesh.visible = false)
+        )
+      },
+      hideWarningRoofs() {
+        Object.values(this.meshes.flatRoofMeshes).forEach(
+          (mesh) => (mesh.visible = false)
+        )
+      },
+      hideBuildings() {
+        Object.values(this.meshes.roofMeshes).forEach(
+          (mesh) => (mesh.visible = false)
+        )
+        Object.values(this.meshes.baseMeshes).forEach(
+          (mesh) => (mesh.visible = false)
+        )
+        Object.values(this.meshes.obstacleMeshes).forEach(
+          (mesh) => (mesh.visible = false)
+        )
+        Object.values(this.meshes.edgeMeshes).forEach(
+          (mesh) => (mesh.visible = false)
+        )
+        Object.values(this.meshes.panelsMeshes).forEach(
+          (mesh) => (mesh.visible = false)
+        )
+        this.hideMesh(this.mergedBaseMesh)
+        this.hideMesh(this.mergedRoofMesh)
+        this.hideMesh(this.mergedObstacleMesh)
+        this.hideMesh(this.mergedObstacleSideMesh)
+        this.hidePanels()
+      },
+      hideMesh(mesh) {
         if (mesh) {
-          const geometry = mesh.geometry
-          if (geometry.boundingSphere === null) geometry.computeBoundingSphere()
-          target = [
-            geometry.boundingSphere.center.x,
-            geometry.boundingSphere.center.y,
-            geometry.boundingSphere.center.z
-          ]
-          let objectRadius = geometry.boundingSphere.radius
-
-          distance =
-            5 + objectRadius / Math.sin(((this.camera.fov / 2) * Math.PI) / 180)
-        }
-        try {
-          polygonRef = updateComputedGeometryPolygon(polygonRef)
-        } catch (err) {
-          console.error(err)
+          mesh.visible = false
         }
-        const targetVector = polygonRef.meanPoint
-        //const target=[targetVector.x/1000,targetVector.y/1000,targetVector.z/1000]
-        let cameraMoveVector = { x: 0, y: 0, z: 0 }
-        let flatRoof =
-          polygonRef.normalVector.x == 0 && polygonRef.normalVector.y == 0
-        if (view_mode == 'ortho') {
-          cameraMoveVector = multiplyVector(
-            distance * 1000,
-            polygonRef.normalVector
-          )
-        } else if (view_mode == 'top') {
-          let polygonBounds = polygonRef.getBounds()
-          polygonBounds.xMin -= 1000
-          polygonBounds.xMax += 1000
-          polygonBounds.yMin -= 1000
-          polygonBounds.yMax += 1000
+      },
+      setCamera(polygon, view_mode) {
+        let margin = 0.2
+        if (!polygon || view_mode == 'global') {
+          let roofsBounds = this.roofsBounds
           const position = [0, 0, 100]
           const target = [0, 0, 0]
+          this.orthographicCamera.position.set(...position)
+          this.orthographicCamera.lookAt(...target)
+          this.isReady.camera = true
 
           let { xMin, xMax, yMin, yMax } = this.orthographicBounds(
-            polygonBounds,
+            roofsBounds,
             margin
           )
-          this.orthographicCamera.position.set(...position)
-          this.orthographicCamera.lookAt(...target)
 
           this.orthographicCamera.left = xMin / 1000
           this.orthographicCamera.right = xMax / 1000
           this.orthographicCamera.top = yMax / 1000
           this.orthographicCamera.bottom = yMin / 1000
           this.orthographicCamera.updateProjectionMatrix()
-        } else {
-          //street view
-          let horizontalVector = { ...polygonRef.normalVector, z: 0 }
-          if (horizontalVector.x == 0 && horizontalVector.y == 0) {
-            horizontalVector.y = 1
+        } else if (polygon) {
+          let polygonRef = polygon
+
+          //get polygonMesh
+          let mesh
+          let target
+          let distance = 45
+          if (polygonRef.layer == 'roof') {
+            mesh = this.meshes.roofMeshes[polygonRef.id]
+          } else if (polygonRef.layer == 'moduleField') {
+            mesh = this.meshes.moduleFieldsMeshes[polygonRef.id]
           }
-          horizontalVector = normalizeVector(horizontalVector)
+          if (mesh) {
+            const geometry = mesh.geometry
+            if (geometry.boundingSphere === null)
+              geometry.computeBoundingSphere()
+            target = [
+              geometry.boundingSphere.center.x,
+              geometry.boundingSphere.center.y,
+              geometry.boundingSphere.center.z,
+            ]
+            let objectRadius = geometry.boundingSphere.radius
 
-          cameraMoveVector = multiplyVector(distance * 1000, horizontalVector)
-        }
+            distance =
+              5 +
+              objectRadius / Math.sin(((this.camera.fov / 2) * Math.PI) / 180)
+          }
+          try {
+            polygonRef = updateComputedGeometryPolygon(polygonRef)
+          } catch (err) {
+            console.error(err)
+          }
+          const targetVector = polygonRef.meanPoint
+          //const target=[targetVector.x/1000,targetVector.y/1000,targetVector.z/1000]
+          let cameraMoveVector = { x: 0, y: 0, z: 0 }
+          let flatRoof =
+            polygonRef.normalVector.x == 0 && polygonRef.normalVector.y == 0
+          if (view_mode == 'ortho') {
+            cameraMoveVector = multiplyVector(
+              distance * 1000,
+              polygonRef.normalVector
+            )
+          } else if (view_mode == 'top') {
+            let polygonBounds = polygonRef.getBounds()
+            polygonBounds.xMin -= 1000
+            polygonBounds.xMax += 1000
+            polygonBounds.yMin -= 1000
+            polygonBounds.yMax += 1000
+            const position = [0, 0, 100]
+            const target = [0, 0, 0]
 
-        const positionVector = addVector(polygonRef.meanPoint, cameraMoveVector)
-        if (flatRoof) positionVector.z += 2000
-        const position = [
-          positionVector.x / 1000,
-          positionVector.y / 1000 - 1,
-          positionVector.z / 1000
-        ]
+            let { xMin, xMax, yMin, yMax } = this.orthographicBounds(
+              polygonBounds,
+              margin
+            )
+            this.orthographicCamera.position.set(...position)
+            this.orthographicCamera.lookAt(...target)
 
-        this.camera.position.set(...position)
-        this.camera.lookAt(...target)
-        this.camera.updateProjectionMatrix()
+            this.orthographicCamera.left = xMin / 1000
+            this.orthographicCamera.right = xMax / 1000
+            this.orthographicCamera.top = yMax / 1000
+            this.orthographicCamera.bottom = yMin / 1000
+            this.orthographicCamera.updateProjectionMatrix()
+          } else {
+            //street view
+            let horizontalVector = { ...polygonRef.normalVector, z: 0 }
+            if (horizontalVector.x == 0 && horizontalVector.y == 0) {
+              horizontalVector.y = 1
+            }
+            horizontalVector = normalizeVector(horizontalVector)
 
-        this.isReady.camera = true
-      }
-    },
-    orthographicBounds(bounds, margin) {
-      let ratioCanvas = this.canvasHeight / this.canvasWidth
+            cameraMoveVector = multiplyVector(distance * 1000, horizontalVector)
+          }
 
-      let width = (bounds.xMax - bounds.xMin) * (1 + margin)
-      let height = (bounds.yMax - bounds.yMin) * (1 + margin)
-      let ratio = height / width
+          const positionVector = addVector(
+            polygonRef.meanPoint,
+            cameraMoveVector
+          )
+          if (flatRoof) positionVector.z += 2000
+          const position = [
+            positionVector.x / 1000,
+            positionVector.y / 1000 - 1,
+            positionVector.z / 1000,
+          ]
 
-      let xCenter = (bounds.xMax + bounds.xMin) / 2
-      let yCenter = (bounds.yMax + bounds.yMin) / 2
-      let xMin
-      let xMax
-      let yMin
-      let yMax
-      if (ratioCanvas < ratio) {
-        //canvas wider
-        xMin = xCenter - height / (2 * ratioCanvas)
-        xMax = xCenter + height / (2 * ratioCanvas)
-        yMin = yCenter - height / 2
-        yMax = yCenter + height / 2
-      } else {
-        xMin = xCenter - width / 2
-        xMax = xCenter + width / 2
-        yMin = yCenter - (width * ratioCanvas) / 2
-        yMax = yCenter + (width * ratioCanvas) / 2
-      }
-      return { xMin, xMax, yMin, yMax }
-    },
-    animate() {
-      this.render()
-      this.animationFrameId = requestAnimationFrame(this.animate)
-    },
-    render() {
-      this.renderer.clear()
-      if (['top', 'global'].includes(this.view_mode) && !this.useCustomCamera) {
-        this.renderer.render(this.scene, this.orthographicCamera)
-      } else {
-        this.renderer.render(this.scene, this.camera)
-      }
-    }
-  },
-  watch: {
-    isReady: {
-      handler() {
-        const overlayReady = OverlayLayer.getItems().length == 0 || this.isReady.overlay
+          this.camera.position.set(...position)
+          this.camera.lookAt(...target)
+          this.camera.updateProjectionMatrix()
+
+          this.isReady.camera = true
+        }
+      },
+      orthographicBounds(bounds, margin) {
+        let ratioCanvas = this.canvasHeight / this.canvasWidth
+
+        let width = (bounds.xMax - bounds.xMin) * (1 + margin)
+        let height = (bounds.yMax - bounds.yMin) * (1 + margin)
+        let ratio = height / width
+
+        let xCenter = (bounds.xMax + bounds.xMin) / 2
+        let yCenter = (bounds.yMax + bounds.yMin) / 2
+        let xMin
+        let xMax
+        let yMin
+        let yMax
+        if (ratioCanvas < ratio) {
+          //canvas wider
+          xMin = xCenter - height / (2 * ratioCanvas)
+          xMax = xCenter + height / (2 * ratioCanvas)
+          yMin = yCenter - height / 2
+          yMax = yCenter + height / 2
+        } else {
+          xMin = xCenter - width / 2
+          xMax = xCenter + width / 2
+          yMin = yCenter - (width * ratioCanvas) / 2
+          yMax = yCenter + (width * ratioCanvas) / 2
+        }
+        return { xMin, xMax, yMin, yMax }
+      },
+      animate() {
+        this.render()
+        this.animationFrameId = requestAnimationFrame(this.animate)
+      },
+      render() {
+        this.renderer.clear()
         if (
-          this.isReady.texturesToLoad == this.isReady.texturesLoaded &&
-          this.isReady.geometry &&
-          overlayReady
+          ['top', 'global'].includes(this.view_mode) &&
+          !this.useCustomCamera
         ) {
-          var event = new CustomEvent('screenshotable')
-          // dispatch the custom event
-          document.dispatchEvent(event)
-          this.screenshotable = true
+          this.renderer.render(this.scene, this.orthographicCamera)
+        } else {
+          this.renderer.render(this.scene, this.camera)
         }
       },
-      deep: true
-    }
+    },
+    watch: {
+      isReady: {
+        handler() {
+          const overlayReady =
+            OverlayLayer.getItems().length == 0 || this.isReady.overlay
+          if (
+            this.isReady.texturesToLoad == this.isReady.texturesLoaded &&
+            this.isReady.geometry &&
+            overlayReady
+          ) {
+            var event = new CustomEvent('screenshotable')
+            // dispatch the custom event
+            document.dispatchEvent(event)
+            this.screenshotable = true
+          }
+        },
+        deep: true,
+      },
+    },
   }
-}
 </script>
 
 <style>
-.canvas3DContainer {
+  .canvas3DContainer {
   width: 100%;
   height: 100%;
   width: 100%;