@eturnity/eturnity_3d 7.24.0-EPDM-10926.0 → 7.24.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eturnity/eturnity_3d",
   "private": false,
-  "version": "7.24.0-EPDM-10926.0",
+  "version": "7.24.1",
   "files": [
     "dist",
     "src"
@@ -15,7 +15,7 @@
     "prettier": "prettier --write \"**/*.{js,vue}\""
   },
   "dependencies": {
-    "@eturnity/eturnity_maths": "7.24.0",
+    "@eturnity/eturnity_maths": "7.24.1",
     "@originjs/vite-plugin-commonjs": "1.0.3",
     "core-js": "2.6.12",
     "cors": "2.8.5",

package/src/Overlay/{ThreeDModelOverlay.js → AirTeamOverlay.js}

@@ -17,14 +17,14 @@ import {
   rotateTransformation
 } from '@eturnity/eturnity_maths'
 let Paper
-export default class ThreeDModelOverlay extends Overlay {
-  constructor(overlay, emit, origin, loader) {
+export default class AirTeamOverlay extends Overlay {
+  constructor(overlay, emit, origin) {
     super(overlay, emit)
+    //this.updateVerticalProjectionIfNeeded()
     this.canvasWidth = 400
     this.canvasHeight = 400
     this.origin = origin
     this.imageUrl = null
-    this.loader = loader
     this.initialiseModel().then((isReady) => {
       this.isReady = isReady
       this.version++
@@ -42,7 +42,6 @@ export default class ThreeDModelOverlay extends Overlay {
     this.extracted = false
     this.geoLocalisation = this.settings.geoLocalisation
   }
-  loadFile() {}
   onLoad() {
     return new Promise((resolve) => {
       if (this.isReady) {
@@ -52,17 +51,65 @@ export default class ThreeDModelOverlay extends Overlay {
       }
     })
   }
+  setOpacity(opacity) {
+    this.opacity = opacity
+    this.emit('item-updated', this)
+    this.emit('overlay-three-loaded', this)
+  }
+  hasVerticalProjection() {
+    return this.resources.some((resource) => resource.file_type == 'image')
+  }
+  loadGLBFile() {
+    this.isReady = false
+    return new Promise((resolve) => {
+      if (this.overlayMesh) {
+        resolve(this.overlayMesh)
+      }
+      let resource = this.resources[0]
+      let overlayMesh = new THREE.Group()
+      const glbLoader = new GLTFLoader()
+      glbLoader.load(resource.file_url, (gltf) => {
+        const model = gltf.scene
+        overlayMesh.attach(model)
+        overlayMesh.userData.meshId = this.id
+        model.rotateX(Math.PI / 2)
+        model.children = model.children.filter((child) =>
+          [
+            'textured_facade',
+            'textured_environment',
+            'textured_roof',
+            'plain_roof_simplified'
+          ].includes(child.name)
+        )
+        model.children.forEach((child) => {
+          if (['plain_roof_simplified'].includes(child.name)) {
+            child.visible = false
+          }
+        })
+
+        overlayMesh.userData.type = 'overlayMeshes'
+        overlayMesh.userData.meshId = this.id
+        overlayMesh.userData.version = this.version
+        overlayMesh.position.set(0, 0, 0)
+        const box = new THREE.Box3().setFromObject(overlayMesh)
+        overlayMesh.position.set(0, 0, -box.min.z)
+        resolve(overlayMesh)
+      })
+    })
+  }
   set3DObjectMaterialOpacity(obj) {
     obj.children.forEach((child) => {
       this.set3DObjectMaterialOpacity(child, this.opacity)
     })
-    obj.visible = this.opacity > 0
-    obj.material.opacity = this.opacity
-    obj.material.transparent = this.opacity < 1
+    if (obj.material && obj.name!='plain_roof_simplified') {
+      obj.visible = this.opacity > 0
+      obj.material.opacity = this.opacity
+      obj.material.transparent = this.opacity < 1
+    }
   }
   async renderOnThreeJS(threeJSComponent) {
     if (this.overlayMesh && this.overlayMesh.children.length == 0) {
-      this.overlayMesh = await this.loadFile()
+      this.overlayMesh = await this.loadGLBFile()
     }
 
     if (!this.isReady) {
@@ -103,7 +150,7 @@ export default class ThreeDModelOverlay extends Overlay {
       threeJSComponent.scene.add(overlayMesh)
     }
     if (!overlayMesh) {
-      overlayMesh = await this.loadFile()
+      overlayMesh = await this.loadGLBFile()
       threeJSComponent.meshes.overlayMeshes[meshId] = overlayMesh
     }
     const positionOffset = multiplyVector(1 / 1000, this.positionOffset)
@@ -192,6 +239,11 @@ export default class ThreeDModelOverlay extends Overlay {
       handles = this.renderImageOverlayHandles(corners, isRotationHandleVisible)
       group.addChild(imageOverlayPath)
       group.addChild(handles)
+      // let circle=new Paper.Path.Circle(new Paper.Point(paperJSComponent.toCanvasRef(multiplyVector(1000,this.geoLocalisation))),10)
+      // circle.strokeWidth=2
+      // circle.strokeColor = 'lime'
+      // group.addChild(circle)
+
       group.itemType = 'imageOverlays'
       group.data.url = this.url
       group.type = 'imageOverlays'
@@ -322,10 +374,49 @@ export default class ThreeDModelOverlay extends Overlay {
     circleHandle.visible = rotateHandleVisible
     return handles
   }
-  initialiseCornersAndProjectionCamera(){
+  async initialiseModel() {
+    this.overlayMesh = await this.loadGLBFile()
+    if (!this.geoLocalisation) {
+      this.checkGeoLocDataAndOffset()
+    }
+    this.imageUrl = await this.initialiseVerticalProjectionImg()
+    this.overlayMesh.position.set(
+      this.positionOffset.x / 1000,
+      this.positionOffset.y / 1000,
+      0
+    )
+    this.overlayMesh.rotateZ(-this.angleOffset)
+    return true
+  }
+  checkGeoLocDataAndOffset() {
+    const lat0 = this.overlayMesh.children[0].userData.latitude_origin
+    const lng0 = this.overlayMesh.children[0].userData.longitude_origin
+    if (lat0 && lng0 && this.origin) {
+      let { x, y } = deltaLatLngToDistance(
+        lat0 - this.origin.lat,
+        lng0 - this.origin.lng,
+        lat0
+      )
+      if (Math.hypot(x, y) < 100000) {
+        this.positionOffset.x = x
+        this.positionOffset.y = y
+        this.positionOffset.z = 0
+      } else {
+        this.positionOffset.x = 0
+        this.positionOffset.y = 0
+        this.positionOffset.z = 0
+        this.emit('overlay-offset-position-error', { id: this.id })
+      }
+      this.geoLocalisation={x,y}
+    }
+  }
+  initialiseVerticalProjectionImg() {
+    return new Promise((resolve, reject) => {
       const box = new THREE.Box3().setFromObject(this.overlayMesh)
       const boxSize = box.getSize(new THREE.Vector3())
       this.boxSize = boxSize
+      this.canvasWidth = boxSize.x * 100
+      this.canvasHeight = boxSize.y * 100
       const boxCenter = box.getCenter(new THREE.Vector3())
       const left = -boxSize.x / 2
       const right = +boxSize.x / 2
@@ -364,6 +455,11 @@ export default class ThreeDModelOverlay extends Overlay {
         corner = addVector(corner, this.positionOffset)
         this.corners[index] = corner
       })
+      // Create a canvas element
+      const canvas = this.createCanvas()
+
+      // Initialize Three.js
+      const scene = new THREE.Scene()
       this.overlayProjectionCamera = new THREE.OrthographicCamera(
         left,
         right,
@@ -372,37 +468,6 @@ export default class ThreeDModelOverlay extends Overlay {
         0.1, // near
         1000 // far
       )
-  }
-  checkGeoLocDataAndOffset(){
-    return
-  }
-  async initialiseModel() {
-    this.overlayMesh = await this.loadFile()
-    if (!this.geoLocalisation) {
-      this.checkGeoLocDataAndOffset()
-    }
-    this.initialiseCornersAndProjectionCamera()
-    this.imageUrl = await this.initialiseVerticalProjectionImg()
-    this.overlayMesh.position.set(
-      this.positionOffset.x / 1000,
-      this.positionOffset.y / 1000,
-      0
-    )
-    this.overlayMesh.rotateZ(-this.angleOffset)
-    return true
-  }
-  setOverlayVisibilityFor2D(){
-    return this.overlayMesh
-  }
-  initialiseVerticalProjectionImg() {
-    return new Promise((resolve, reject) => {
-      // Create a canvas element
-      this.canvasWidth = this.boxSize.x * 100
-      this.canvasHeight = this.boxSize.y * 100
-      const canvas = this.createCanvas()
-
-      // Initialize Three.js
-      const scene = new THREE.Scene()
 
       const renderer = new THREE.WebGLRenderer({
         canvas: canvas,
@@ -410,17 +475,23 @@ export default class ThreeDModelOverlay extends Overlay {
       })
       renderer.setSize(this.canvasWidth, this.canvasHeight)
       renderer.setClearColor(0x000000, 0) // Make background transparent
-      this.setOverlayVisibilityFor2D()
+
       scene.add(this.overlayMesh)
 
       // Set camera position and look at the center of the model
       this.overlayProjectionCamera.position.set(
-        this.boxCenter.x,
-        this.boxCenter.y,
-        this.boxCenter.z + 100
+        boxCenter.x,
+        boxCenter.y,
+        boxCenter.z + 100
       )
-      this.overlayProjectionCamera.lookAt(this.boxCenter.x, this.boxCenter.y, 0)
+      this.overlayProjectionCamera.lookAt(boxCenter.x, boxCenter.y, 0)
       this.overlayProjectionCamera.updateProjectionMatrix()
+      const childrenVisibility = this.overlayMesh.children[0].children.map(
+        (child) => child.visible
+      )
+      this.overlayMesh.children[0].children.forEach(
+        (child) => (child.visible = child.name == 'textured_roof')
+      )
       const ambientLight = new THREE.AmbientLight(0xffffff, 0.8)
       this.overlayMesh.children[0].add(ambientLight)
       const light = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.8)
@@ -432,12 +503,25 @@ export default class ThreeDModelOverlay extends Overlay {
       const imageUrl = canvas.toDataURL()
       this.overlayMesh.children[0].remove(light)
       this.overlayMesh.children[0].remove(ambientLight)
+      this.overlayMesh.children[0].children.forEach((child, index) => {
+        child.visible = childrenVisibility[index]
+      })
       canvas.parentNode.removeChild(canvas)
       resolve(imageUrl)
     })
   }
   getProjectedPlanesOnOverlay(outlines) {
+    // const scene = new THREE.Scene()
     const RayCaster = new THREE.Raycaster()
+    // let overlaySimplifiedRoof = this.overlayMesh.getObjectByName(
+    //   'plain_roof_simplified'
+    // )
+    // overlaySimplifiedRoof.visible = true
+    // if(overlaySimplifiedRoof){
+    // }else{
+    let overlaySimplifiedRoof = this.overlayMesh.clone()
+    //}
+    //scene.add(overlayMesh)
     const cloudsPoints = outlines.map((outline) => {
       let outlineBounds = outline.reduce(
         (acc, cur) => {
@@ -460,13 +544,15 @@ export default class ThreeDModelOverlay extends Overlay {
           }
           if (isInsidePolygon(testPoint, outline)) {
             RayCaster.set(
-              new THREE.Vector3(testPoint.x / 1000, testPoint.y / 1000, 100),
-              new THREE.Vector3(0, 0, -1)
+              new THREE.Vector3(testPoint.x / 1000, testPoint.y / 1000, 0),
+              new THREE.Vector3(0, 0, 1)
             )
-            let intersects = RayCaster.intersectObject(this.overlayMesh)
-            if(intersects.length>0){
-              cloudPoints.push(intersects[0].point)
-            }
+            let intersects = RayCaster.intersectObject(overlaySimplifiedRoof)
+            intersects.forEach((intersection) => {
+              if (intersection.object.name == 'textured_roof') {
+                cloudPoints.push(intersection.point)
+              }
+            })
           }
         }
       }
@@ -512,7 +598,8 @@ export default class ThreeDModelOverlay extends Overlay {
   serializeSettings() {
     return {
       version: this.version,
-      corners: this.corners
+      corners: this.corners,
+      geoLocalisation: this.geoLocalisation
     }
   }
 }

package/src/Overlay/OverlayFactory.js

@@ -1,12 +1,12 @@
 import Overlay from './Overlay'
-import GLBOverlay from './GLBOverlay'
+import AirTeamOverlay from './AirTeamOverlay'
 import ImageOverlay from './ImageOverlay'
 
 const OverlayFactory = {
   createOverlay(serializedOverlay, emit, origin = { lat: null, lng: null }) {
     let overlayInstance
     if (serializedOverlay.type == 'airteam') {
-      overlayInstance = new GLBOverlay(serializedOverlay, emit, origin)
+      overlayInstance = new AirTeamOverlay(serializedOverlay, emit, origin)
     } else if (serializedOverlay.type == 'image_overlay') {
       overlayInstance = new ImageOverlay(serializedOverlay, emit)
     } else {

package/src/helper/UpdateRoofObstacleRelations.js

@@ -31,13 +31,15 @@ export function UpdateRoofObstacleRelations(state, updateVersionEnable = true) {
     obstacle.roofs = []
 
     let roofsWithObstacle = roofPolygons.filter((roof) => {
+      if (roof.id == obstacle.id) {
+        return false
+      }
       let intersection =
         intersectOutlines(obstacle.outline, roof.outline)[0] || []
       if (intersection.length == 0) return false
       if (obstacle.layer == 'obstacle') return true
-
       let deltaArea = calculateArea(roof.outline) - calculateArea(intersection)
-      if (deltaArea < 100) return false
+      if (deltaArea < 100 || calculateArea(intersection) < 100) return false
       return true
     })
 

package/src/helper/render/imageOverlay.js

@@ -21,7 +21,7 @@ export default {
   methods: {
     renderImageOverlayOnBackground() {
       const overlayGeometries = OverlayLayer.getReadyItems()
-        .filter((overlay) => overlay.isReady && overlay.corners && overlay.type=='image_overlay')
+        .filter((overlay) => overlay.isReady && overlay.corners)
         .map((overlay) => {
           return overlay.getBackgroundGeometry()
         })
@@ -40,6 +40,7 @@ export default {
       this.applyTextureOnMesh(this.overlayMaterials, this.meshes.backgroundMesh)
 
       this.meshes.backgroundMesh.visible = true
+
       return
     },
     async getOverlaysMaterials() {
@@ -48,8 +49,7 @@ export default {
         overlayMaterialsPromises.push(overlay.getProjectionMaterial())
       })
       overlayMaterialsPromises = overlayMaterialsPromises.filter((p) => !!p)
-      const imageOverlayMaterial = await Promise.all(overlayMaterialsPromises)
-      this.imageOverlayMaterial=imageOverlayMaterial.filter(m=>!!m)
+      this.imageOverlayMaterial = await Promise.all(overlayMaterialsPromises)
       return this.imageOverlayMaterial
     }
   }

package/src/helper/render/overlay.js

@@ -1,3 +1,5 @@
+import * as THREE from 'three'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
 import { mapState } from 'vuex'
 import OverlayLayer from '../../Overlay/OverlayLayer.js'
 
@@ -6,6 +8,7 @@ export default {
     return {}
   },
   created() {
+    this.glbLoader = new GLTFLoader()
   },
   computed: {
     ...mapState({})

package/src/Overlay/GLBOverlay.js

@@ -1,91 +0,0 @@
-import ThreeDModelOverlay from './ThreeDModelOverlay'
-import * as THREE from 'three'
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
-import { deltaLatLngToDistance } from '@eturnity/eturnity_maths'
-export default class GLBOverlay extends ThreeDModelOverlay {
-  constructor(overlay, emit, origin) {
-    super(overlay, emit, origin, new GLTFLoader())
-    this.extracted = false
-    this.geoLocalisation = this.settings.geoLocalisation
-    this.has_plain_roof_simplified = false
-  }
-  loadFile() {
-    this.isReady = false
-    return new Promise((resolve) => {
-      if (this.overlayMesh) {
-        resolve(this.overlayMesh)
-      }
-      let resource = this.resources[0]
-      let overlayMesh = new THREE.Group()
-      this.loader.load(resource.file_url, (gltf) => {
-        const model = gltf.scene
-        model.rotateX(Math.PI / 2)
-        overlayMesh.userData.meshId = this.id
-        overlayMesh.userData.type = 'overlayMeshes'
-        overlayMesh.userData.version = this.version
-        overlayMesh.attach(model)
-        overlayMesh.position.set(0, 0, 0)
-        const box = new THREE.Box3().setFromObject(overlayMesh)
-        overlayMesh.position.set(0, 0, -box.min.z)
-        if (overlayMesh.getObjectByName('plain_roof_simplified')) {
-          this.has_plain_roof_simplified = true
-          this.type = 'airteam'
-        } else {
-          this.type = 'custom_3d_model'
-        }
-        resolve(overlayMesh)
-      })
-    })
-  }
-  checkGeoLocDataAndOffset() {
-    const lat0 = this.overlayMesh.children[0].userData.latitude_origin
-    const lng0 = this.overlayMesh.children[0].userData.longitude_origin
-    if (lat0 && lng0 && this.origin) {
-      let { x, y } = deltaLatLngToDistance(
-        lat0 - this.origin.lat,
-        lng0 - this.origin.lng,
-        lat0
-      )
-      if (Math.hypot(x, y) < 100000) {
-        this.positionOffset.x = x
-        this.positionOffset.y = y
-        this.positionOffset.z = 0
-      } else {
-        this.positionOffset.x = 0
-        this.positionOffset.y = 0
-        this.positionOffset.z = 0
-        this.emit('overlay-offset-position-error', { id: this.id })
-      }
-      this.geoLocalisation = { x, y }
-    }
-  }
-  setOverlayVisibilityFor2D() {
-    if (
-      this.overlayMesh.children[0].children.some(
-        (child) => child.name == 'textured_roof'
-      )
-    ) {
-      this.overlayMesh.children[0].children.forEach(
-        (child) => (child.visible = child.name == 'textured_roof')
-      )
-    }
-    return this.overlayMesh
-  }
-  set3DObjectMaterialOpacity(obj) {
-    obj.children.forEach((child) => {
-      this.set3DObjectMaterialOpacity(child, this.opacity)
-    })
-    if (obj.material && obj.name != 'plain_roof_simplified') {
-      obj.visible = this.opacity > 0
-      obj.material.opacity = this.opacity
-      obj.material.transparent = this.opacity < 1
-    }
-  }
-  serializeSettings() {
-    return {
-      version: this.version,
-      corners: this.corners,
-      geoLocalisation: this.geoLocalisation
-    }
-  }
-}