@eturnity/eturnity_3d 7.6.0 → 7.8.0

package/src/helper/render/moduleField.js

@@ -3,7 +3,6 @@ import { getBufferModuleFieldGeometry } from './geometryHandler'
 export default {
   methods: {
     renderModuleFields() {
-      console.log('renderModuleField', this.areModuleFieldsVisible)
       this.clearByType('moduleFieldsMeshes')
       const moduleFieldPolygons = this.polygons.filter((p) =>
         ['moduleField', 'tmpModuleField'].includes(p.layer)
@@ -19,10 +18,6 @@ export default {
         }
         const geometry = getBufferModuleFieldGeometry(moduleFieldPolygon)
         if (geometry) {
-          console.log(
-            'override',
-            moduleFieldPolygon.data.number_of_panels_override
-          )
           const mesh = new THREE.Mesh(geometry, material)
           mesh.matrixAutoUpdate = false
           mesh.userData.version = moduleFieldPolygon.version

package/src/helper/render/panel.js

@@ -9,11 +9,13 @@ export default {
   data() {
     return {
       mergedPanelSideMesh: null,
-      mergedPanelTopMeshes: {}
+      mergedPanelTopMeshes: {},
+      arePanelVisible: true
     }
   },
   methods: {
     hidePanels() {
+      this.arePanelVisible = false
       if (this.mergedPanelTopMeshes) {
         Object.values(this.mergedPanelTopMeshes).forEach((mesh) => {
           mesh.visible = false
@@ -24,6 +26,7 @@ export default {
       }
     },
     showPanels() {
+      this.arePanelVisible = true
       if (this.mergedPanelTopMeshes) {
         Object.values(this.mergedPanelTopMeshes).forEach((mesh) => {
           mesh.visible = true
@@ -67,7 +70,7 @@ export default {
       panels.forEach((panelPolygon) => {
         //for each visible panels
         //1. define materialId and material
-        //2. create or update individual meshes 
+        //2. create or update individual meshes
         //  2a. Fill in panelTopGeometries & panelSideGeometries
         if (!panelPolygon.visible) {
           return
@@ -89,11 +92,10 @@ export default {
             ) && 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[
@@ -109,8 +111,10 @@ export default {
               material = this.material.panel[materialId]
             }
           }
+          material.transparent = true
+          material.opacity = this.panelOpacity
         }
-        //2. create or update individual meshes 
+        //2. create or update individual meshes
         if (
           !this.meshes.panelsMeshes[panelPolygon.id + '_top'] ||
           !this.meshes.panelsMeshes[panelPolygon.id + '_side']
@@ -199,6 +203,11 @@ export default {
           'panelTop_' + key
         )
       }
+      if (this.arePanelVisible) {
+        this.showPanels()
+      } else {
+        this.hidePanels()
+      }
     }
   }
 }

package/src/helper/renderMixin.js

@@ -25,7 +25,9 @@ export default {
       }
     }
   },
-  created() {},
+  mounted() {
+    this.lastGeometryEventIdDone = this.lastGeometryEventId
+  },
   computed: {
     ...mapState({
       wallColor: (state) => state.threeDModule.wallColor,
@@ -386,20 +388,25 @@ export default {
           await item.method(...item.arg)
         }
       }
+      this.render()
     },
     renderGeometry() {
+      this.renderRealisticGeometry()
+      this.renderRoofsMargin()
+      this.renderNodes()
+      this.renderEdges()
+      this.renderFlatRoofs()
+    },
+    renderRealisticGeometry() {
       this.renderBuilding()
       this.renderModuleFields()
       this.renderPanels()
-      this.renderRoofsMargin()
     },
     renderBuilding() {
       this.renderBase()
       this.renderRoofs()
       this.renderObstacles()
-      this.renderNodes()
-      this.renderEdges()
-      this.renderFlatRoofs()
+      this.updateProjectionMaterials()
     },
 
     getCanvasOffset() {
@@ -421,34 +428,6 @@ export default {
       docEl = null
       box = null
       return { top: Math.round(top), left: Math.round(left) }
-    },
-    onWindowResize() {
-      this.camera.aspect = window.innerWidth / window.innerHeight
-      this.camera.updateProjectionMatrix()
-      this.canvasOffset = this.getCanvasOffset()
-      this.canvasHeight = this.$refs.canvas3DContainer.clientHeight
-      this.canvasWidth = this.$refs.canvas3DContainer.clientWidth
-      this.resizeCanvasToDisplaySize()
-      //this.renderer.setSize(window.innerWidth / 2, window.innerHeight / 2)
-    },
-    resizeCanvasToDisplaySize() {
-      let canvas = this.renderer.domElement
-      // look up the size the canvas is being displayed
-      const width = canvas.clientWidth
-      const height = canvas.clientHeight
-
-      // adjust displayBuffer size to match
-      if (canvas.width !== width || canvas.height !== height) {
-        // you must pass false here or three.js sadly fights the browser
-        this.renderer.setSize(width, height, false)
-        this.renderer.setViewport(0, 0, width, height)
-
-        this.camera.aspect = width / height
-        this.camera.updateProjectionMatrix()
-
-        // update any render target sizes here
-      }
-      canvas = null
     }
   },
   watch: {
@@ -470,13 +449,10 @@ export default {
   },
   beforeDestroy() {
     this.clearThreeObjects(this.scene)
-
-    if (this.three_map) {
-      this.three_map.clear()
-      this.clearThreeObjects(this.three_map)
+    if (this.renderer) {
+      this.renderer.clear()
+      this.renderer.dispose()
     }
-    this.renderer.clear()
-    this.renderer.dispose()
     if (this.orbitControl && this.orbitControl.dispose) {
       this.orbitControl.dispose()
     }
@@ -493,6 +469,5 @@ export default {
     this.raycaster = null
     this.loader = null
     this.provider = null
-    window.removeEventListener('resize', this.onWindowResize, false)
   }
 }

package/src/helper/threeMixin.js

@@ -3,40 +3,122 @@ import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import { Sky } from 'three/examples/jsm/objects/Sky.js'
 import { CustomProvider } from './customProvider'
 import getLayers from '../utils/layers'
-
+import materialMixin from './materialMixin'
+import renderMixin from './renderMixin'
 export default {
+  data() {
+    return {
+      scene: new THREE.Scene(),
+      cameraProjection: null,
+      renderer: new THREE.WebGLRenderer({
+        antialias: true,
+        preserveDrawingBuffer: true,
+        powerPreference: 'high-performance'
+      }),
+      orbitControl: null,
+      raycaster: new THREE.Raycaster(),
+      loader: new THREE.TextureLoader(),
+      canvasHeight: null,
+      canvasWidth: null,
+      canvasOffset: { x: 0, y: 0 },
+      tweenCamera: null,
+      tweenOrbit: null,
+      isReady: {
+        texturesLoaded: 0,
+        texturesToLoad: 0,
+        threeMap: false,
+        geometry: false,
+        camera: false
+      },
+      screenshotable: false,
+      DOMElement: null
+    }
+  },
+  mixins: [renderMixin, materialMixin],
   methods: {
-    initialiseThreeMap() {
-      //Extention of the map with geo-map
-      if (!this.selectedMapLayer) {
-        this.setInitialMapLayer()
+    initialiseThree({
+      isInteractive = true,
+      isPerspectiveCamera = true,
+      DOMElement = this.$refs.canvas3DContainer
+    } = {}) {
+      this.DOMElement = DOMElement
+
+      if (!this.scene) {
+        this.scene = new THREE.Scene()
       }
-      this.provider = new CustomProvider('', this.selectedMapLayer.key)
-      this.renderTiles()
+      this.scene.background = new THREE.Color(0xb0b0b0)
+
+      this.initialiseRenderer(DOMElement)
+
+      this.initialiseCameras(isPerspectiveCamera)
+
+      this.initialiseLights()
+
+      this.initialiseSky()
+
+      this.initialiseThreeMap()
+
+      if (isInteractive) {
+        this.initialiseControl(isPerspectiveCamera)
+      }
+      this.onWindowResize()
+      window.addEventListener('resize', this.onWindowResize, false)
     },
-    setInitialMapLayer() {
-      if (!this.layers || this.layers.length == 0) {
-        this.layers = getLayers()
+    initialiseRenderer() {
+      this.resizeRenderer(this.DOMElement)
+      this.renderer.setPixelRatio(window.devicePixelRatio)
+      this.renderer.toneMappingExposure = 0.01
+      this.DOMElement.appendChild(this.renderer.domElement)
+    },
+    resizeRenderer() {
+      if(this.DOMElement){
+        const width = this.DOMElement.clientWidth
+        const height = this.DOMElement.clientHeight
+        this.renderer.domElement.style.width = width + 'px'
+        this.renderer.domElement.style.height = height + 'px'
+        this.renderer.setSize(width, height, false)
+        this.renderer.setViewport(0, 0, width, height)
       }
-      this.setSelectedMapLayer(null)
-
-      if (this.selectedMapLayer === null) {
-        for (var i in this.layers) {
-          if (
-            this.globalProjectProperties &&
-            this.layers[i].key === this.globalProjectProperties.map_type
-          ) {
-            this.setSelectedMapLayer(this.layers[i])
-          }
+    },
+    initialiseControl(isPerspectiveCamera) {
+      this.orbitControl = new OrbitControls(
+        this.camera,
+        this.renderer.domElement
+      )
+      if (isPerspectiveCamera) {
+        this.orbitControl.screenSpacePanning = false
+        this.orbitControl.maxPolarAngle = (0.95 * Math.PI) / 2
+        this.orbitControl.mouseButtons = {
+          RIGHT: THREE.MOUSE.PAN,
+          LEFT: THREE.MOUSE.ROTATE,
+          MIDDLE: THREE.MOUSE.DOLLY
+        }
+      } else {
+        this.orbitControl.screenSpacePanning = true
+        this.orbitControl.maxPolarAngle = Math.PI / 2
+        this.orbitControl.enableRotate = false
+        this.orbitControl.mouseButtons = {
+          LEFT: THREE.MOUSE.PAN,
+          MIDDLE: THREE.MOUSE.DOLLY,
+          RIGHT: THREE.MOUSE.ROTATE
         }
       }
-
-      if (this.selectedMapLayer === null) {
-        this.setSelectedMapLayer(this.layers[7])
-      }
+      this.orbitControl.addEventListener('change', () => {
+        this.orbitControlChange()
+      })
     },
+    initialiseLights() {
+      const ambientLight = new THREE.AmbientLight(0xf0f0f0, 0.5)
+      var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5)
+      directionalLight.position.set(0, 1000, 500)
+      var directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.5)
+      directionalLight2.position.set(0, -1000, 500)
 
-    initSky() {
+      this.scene.add(ambientLight)
+      this.scene.add(directionalLight)
+      this.scene.add(directionalLight2)
+    },
+    initialiseSky() {
       // Add Sky
       let sky = new Sky()
       sky.scale.setScalar(450000)
@@ -60,101 +142,77 @@ export default {
       uniforms['sunPosition'].value.copy(sun)
       sun = null
     },
-    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)
-
-      this.cameraProjection = new THREE.PerspectiveCamera(
-        1,
-        300 / 300,
-        100,
-        1000
-      )
-      this.cameraProjection.position.set(0, 0, 24)
-      this.cameraProjection.up.set(0, 0, 1)
-
-      // const helper = new THREE.CameraHelper( this.cameraProjection );
-      // this.scene.add( helper );
-
-      // 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)
-
-      var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5)
-      directionalLight.position.set(0, 1000, 500)
-      var directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.5)
-      directionalLight2.position.set(0, -1000, 500)
-      this.scene.add(directionalLight)
-      this.scene.add(directionalLight2)
-
-      this.renderer.setPixelRatio(window.devicePixelRatio)
-      this.renderer.toneMappingExposure = 0.01
-      this.$refs.canvas3DContainer.appendChild(this.renderer.domElement)
+    initialiseThreeMap() {
+      //Extention of the map with geo-map
+      if (!this.selectedMapLayer) {
+        this.initialiseMapLayer()
+      }
+      this.provider = new CustomProvider('', this.selectedMapLayer.key)
+      this.renderTiles()
+    },
+    initialiseMapLayer() {
+      if (!this.layers || this.layers.length == 0) {
+        this.layers = getLayers()
+      }
+      this.setSelectedMapLayer(null)
 
-      //sky
-      this.initSky()
-      if (isInteractive) {
-        this.orbitControl = new OrbitControls(
-          this.camera,
-          this.renderer.domElement
-        )
-        this.orbitControl.maxPolarAngle = (0.95 * Math.PI) / 2
-        this.orbitControl.mouseButtons = {
-          RIGHT: THREE.MOUSE.PAN,
-          LEFT: THREE.MOUSE.ROTATE,
-          MIDDLE: THREE.MOUSE.DOLLY
+      if (this.selectedMapLayer === null) {
+        for (var i in this.layers) {
+          if (
+            this.globalProjectProperties &&
+            this.layers[i].key === this.globalProjectProperties.map_type
+          ) {
+            this.setSelectedMapLayer(this.layers[i])
+          }
         }
-        this.orbitControl.screenSpacePanning = false
-        this.orbitControl.addEventListener('change', () => {
-          this.orbitControlChange()
-        })
       }
-      window.addEventListener('resize', this.onWindowResize, false)
 
-      ambientLight.dispose()
-      directionalLight.dispose()
-      directionalLight2.dispose()
+      if (this.selectedMapLayer === null) {
+        this.setSelectedMapLayer(this.layers[7])
+      }
+    },
+    render() {
+      if (this.composer) {
+        this.composer.render()
+      } else if (this.renderer) {
+        this.renderer.clear()
+        this.renderer.render(this.scene, this.camera)
+      }
     },
     orbitControlChange() {
       this.render()
     },
     onWindowResize() {
-      this.camera.aspect = window.innerWidth / window.innerHeight
-      this.camera.updateProjectionMatrix()
+      if (this.orbitControl) {
+        this.orbitControl.update()
+      }
       this.canvasOffset = this.getCanvasOffset()
-      this.canvasHeight = this.$refs.canvas3DContainer.clientHeight
-      this.canvasWidth = this.$refs.canvas3DContainer.clientWidth
-      this.resizeCanvasToDisplaySize()
+      this.canvasHeight = this.DOMElement.clientHeight
+      this.canvasWidth = this.DOMElement.clientWidth
+      this.resizeRenderer()
+      this.setCameraAspectRatio()
+      this.render()
     },
-    resizeCanvasToDisplaySize() {
+    onCanvasResize() {
       const canvas = this.renderer.domElement
-      // look up the size the canvas is being displayed
-      const width = canvas.clientWidth
-      const height = canvas.clientHeight
-      // adjust displayBuffer size to match
+      const width = this.DOMElement.clientWidth
+      const height = this.DOMElement.clientHeight
       if (canvas.width !== width || canvas.height !== height) {
-        // you must pass false here or three.js sadly fights the browser
+        this.resizeRenderer()
 
-        this.renderer.setSize(width, height, false)
-        this.renderer.setViewport(0, 0, width, height)
         if (this.composer) {
-          //this.composer.setSize(width, height, false)
           this.composer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
           if (this.composer.setViewport) {
             this.composer.setViewport(0, 0, width, height)
           }
         }
-        this.camera.aspect = width / height
-        this.camera.updateProjectionMatrix()
+        this.setCameraAspectRatio()
+        this.render()
       }
     }
+  },
+  beforeDestroy() {
+    this.DOMElement = null
+    window.removeEventListener('resize', this.onWindowResize, false)
   }
 }

package/src/main.js

@@ -4,7 +4,6 @@ import App from './App.vue'
 import threeDModule from './store/three-d-module'
 
 Vue.use(Vuex)
-
 const Renderer = class {
   constructor() {}
   mount(identifier, geometryData, specificData, isInteractive = false) {

package/src/store/three-d-module.js

@@ -38,6 +38,9 @@ const init_state = {
 const state = init_state
 
 const getters = {
+  getLastGeometryEventId(){
+    return -1
+  },
   getSelectedTool() {
     return ''
   },