@eturnity/eturnity_3d 7.4.0 → 7.6.0-EPDM-9696.21

package/src/helper/render/moduleField.js

@@ -3,23 +3,27 @@ import { getBufferModuleFieldGeometry } from './geometryHandler'
 export default {
   methods: {
     renderModuleFields() {
+      console.log('renderModuleField', this.areModuleFieldsVisible)
       this.clearByType('moduleFieldsMeshes')
-      if (!this.areModuleFieldsVisible) {
-        return
-      }
       const moduleFieldPolygons = this.polygons.filter((p) =>
         ['moduleField', 'tmpModuleField'].includes(p.layer)
       )
       moduleFieldPolygons.forEach((moduleFieldPolygon) => {
+        let material
+        if (moduleFieldPolygon.data.number_of_panels_override) {
+          material = this.material.moduleFieldWithPanelOveride
+        } else if (this.areModuleFieldsVisible) {
+          material = this.material.moduleField
+        } else {
+          return
+        }
         const geometry = getBufferModuleFieldGeometry(moduleFieldPolygon)
         if (geometry) {
-          let material
-          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)
+          console.log(
+            'override',
+            moduleFieldPolygon.data.number_of_panels_override
+          )
+          const mesh = new THREE.Mesh(geometry, material)
           mesh.matrixAutoUpdate = false
           mesh.userData.version = moduleFieldPolygon.version
           mesh.userData.type = 'moduleFieldsMeshes'

package/src/helper/renderMixin.js

@@ -392,14 +392,20 @@ export default {
       this.renderModuleFields()
       this.renderPanels()
       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()
     },
 
     getCanvasOffset() {
@@ -421,34 +427,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 +448,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 +468,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,121 @@ 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()
-      }
-      this.provider = new CustomProvider('', this.selectedMapLayer.key)
-      this.renderTiles()
-    },
-    setInitialMapLayer() {
-      if (!this.layers || this.layers.length == 0) {
-        this.layers = getLayers()
+    initialiseThree({
+      isInteractive = true,
+      isPerspectiveCamera = true,
+      DOMElement = this.$refs.canvas3DContainer
+    } = {}) {
+      console.log('initialiseThree')
+      this.DOMElement = DOMElement
+
+      if (!this.scene) {
+        this.scene = new THREE.Scene()
       }
-      this.setSelectedMapLayer(null)
+      this.scene.background = new THREE.Color(0xb0b0b0)
 
-      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.initialiseRenderer(DOMElement)
 
-      if (this.selectedMapLayer === null) {
-        this.setSelectedMapLayer(this.layers[7])
+      this.initialiseCameras(isPerspectiveCamera)
+
+      this.initialiseLights()
+
+      this.initialiseSky()
+
+      this.initialiseThreeMap()
+
+      if (isInteractive) {
+        this.initialiseControl(isPerspectiveCamera)
       }
+      this.onWindowResize()
+      window.addEventListener('resize', this.onWindowResize, false)
+    },
+    initialiseRenderer() {
+      this.resizeRenderer(this.DOMElement)
+      this.renderer.setPixelRatio(window.devicePixelRatio)
+      this.renderer.toneMappingExposure = 0.01
+      this.DOMElement.appendChild(this.renderer.domElement)
+    },
+    resizeRenderer() {
+      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)
     },
+    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
+        }
+      }
+      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 +141,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,10 +4,11 @@ import App from './App.vue'
 import threeDModule from './store/three-d-module'
 
 Vue.use(Vuex)
-
+console.log('eturnity_3d 9696v21 loaded')
 const Renderer = class {
   constructor() {}
   mount(identifier, geometryData, specificData, isInteractive = false) {
+    console.log('Renderer mount ', identifier, geometryData, specificData)
     if (specificData.isBuildingVisible === undefined) {
       specificData.isBuildingVisible = true
     }

package/src/store/hydrateData.js

@@ -120,6 +120,7 @@ export async function hydratePolygons({
     moduleField.pvData.module_texture_version_id =
       moduleFieldResp.module_texture_version_id
     moduleField.data = {}
+    moduleField.data.texture_img_url = moduleFieldResp.texture_img_url
     moduleField.data.col_spacing_mm = moduleFieldResp.col_spacing_mm
     moduleField.data.row_spacing_mm = moduleFieldResp.row_spacing_mm
     moduleField.data.row_spacing_hill_mm = moduleFieldResp.row_spacing_hill_mm