@eturnity/eturnity_3d 7.20.1 → 7.24.0

package/src/Overlay/AirTeamOverlay.js

@@ -0,0 +1,605 @@
+import Overlay from './Overlay'
+import * as THREE from 'three'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
+import { layerColors } from '../config'
+import {
+  getDistanceBetweenPoints,
+  addVector,
+  multiplyVector,
+  substractVector,
+  getAngleInDegFromCanvasVector,
+  normalize2DVector,
+  isInsidePolygon,
+  calculateBestFittingPlanePolygon,
+  verticalProjectionOnPlane,
+  vectorLength2D,
+  deltaLatLngToDistance,
+  rotateTransformation
+} from '@eturnity/eturnity_maths'
+let Paper
+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.initialiseModel().then((isReady) => {
+      this.isReady = isReady
+      this.version++
+      this.emit('overlay-is-ready', { id: this.id })
+      this.isReadyCallback.forEach((callback) => {
+        if (typeof callback === 'function') {
+          callback()
+        }
+      })
+      this.isReadyCallback = []
+    })
+    this.overlayMesh = null
+    this.placeholderPath = null
+    this.opacity = 1
+    this.extracted = false
+    this.geoLocalisation = this.settings.geoLocalisation
+  }
+  onLoad() {
+    return new Promise((resolve) => {
+      if (this.isReady) {
+        resolve(this)
+      } else {
+        this.isReadyCallback.push(resolve)
+      }
+    })
+  }
+  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)
+    })
+    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.loadGLBFile()
+    }
+
+    if (!this.isReady) {
+      let waitingBall = threeJSComponent.meshes.overlayMeshes[this.id]
+      if (!waitingBall) {
+        const geometry = new THREE.SphereGeometry(1, 32, 32) // Initial radius of 5
+        const opacity = this.opacity == 0 ? this.opacity : 0.5
+        const material = new THREE.MeshBasicMaterial({
+          color: 0xffffff, // Grey color
+          transparent: true,
+          opacity // 50% transparent
+        })
+        // Create the mesh and add it to the scene
+        waitingBall = new THREE.Mesh(geometry, material)
+        waitingBall.name = 'waitingBall'
+        waitingBall.userData.type = 'overlayMeshes'
+        waitingBall.userData.meshId = this.id
+        waitingBall.userData.version = this.version
+        threeJSComponent.scene.add(waitingBall)
+      }
+      threeJSComponent.meshes.overlayMeshes[this.id] = waitingBall
+      this.hasPlaceholderMesh = true
+      return
+    }
+    let meshId = this.id
+    let overlayMesh = threeJSComponent.meshes.overlayMeshes[this.id]
+    if (this.hasPlaceholderMesh) {
+      threeJSComponent.clearMeshFromScene(overlayMesh, threeJSComponent.scene)
+      overlayMesh = null
+      this.hasPlaceholderMesh = false
+    }
+    if (!overlayMesh && this.overlayMesh) {
+      threeJSComponent.meshes.overlayMeshes[this.id] = this.overlayMesh
+      overlayMesh = this.overlayMesh
+      overlayMesh.children.forEach((mesh) => {
+        mesh.position.set(-this.boxCenter.x, -this.boxCenter.y, 0)
+      })
+      threeJSComponent.scene.add(overlayMesh)
+    }
+    if (!overlayMesh) {
+      overlayMesh = await this.loadGLBFile()
+      threeJSComponent.meshes.overlayMeshes[meshId] = overlayMesh
+    }
+    const positionOffset = multiplyVector(1 / 1000, this.positionOffset)
+    overlayMesh.position.set(0, 0, 0)
+    overlayMesh.rotateZ(-overlayMesh.rotation.z)
+    overlayMesh.rotateZ(-this.angleOffset)
+    const box = new THREE.Box3().setFromObject(overlayMesh)
+    overlayMesh.position.set(
+      positionOffset.x + this.boxCenter.x,
+      positionOffset.y + this.boxCenter.y,
+      -box.min.z
+    )
+
+    if (!threeJSComponent.scene.getObjectById(overlayMesh.id)) {
+      threeJSComponent.scene.add(overlayMesh)
+      threeJSComponent.render()
+    }
+    this.overlayMesh = overlayMesh
+    this.overlayMesh.frustumCulled = false
+    this.set3DObjectMaterialOpacity(this.overlayMesh)
+  }
+  renderOnPaperJS(paperJSComponent) {
+    Paper = paperJSComponent.paperScope
+    if (!this.isActive) {
+      return
+    }
+    paperJSComponent.paperLayer['imageOverlays'].activate()
+    let group = paperJSComponent.paths.imageOverlays[this.id]
+    if (!this.isReady) {
+      if (!group) {
+        if (!paperJSComponent.loadingSpinner) {
+          return
+        }
+        group = new Paper.Group()
+
+        group.addChild(this.renderImagePlaceHolder(paperJSComponent))
+        group.itemType = 'placeholderOverlays'
+        group.type = 'imageOverlays'
+        group.pathId = this.id
+        group.overlayId = this.id
+        group.visible = true
+        this.placeholderPath = group
+
+        paperJSComponent.paperLayer['loadingSpinners'].activate()
+        Paper.view.onFrame = (event) => this.animatePlaceholder(event)
+      }
+      paperJSComponent.paths.imageOverlays[this.id] = group
+      this.hasPlaceholderPath = true
+      return
+    }
+
+    if (this.hasPlaceholderPath) {
+      if (group) {
+        paperJSComponent.clearPath(group)
+        paperJSComponent.clearPath(
+          paperJSComponent.paths.loadingSpinners[this.id]
+        )
+        this.placeholderPath = null
+      }
+      group = null
+      this.hasPlaceholderPath = false
+    }
+
+    let imageOverlayPath
+    let handles
+    let isRotationHandleVisible =
+      paperJSComponent.selectedTool == 'selectOverlay' && this.isSelected
+
+    let corners = this.corners.map((p) => paperJSComponent.toCanvasRef(p))
+    if (group) {
+      imageOverlayPath = group.children[0]
+      handles = this.renderImageOverlayHandles(
+        corners,
+        isRotationHandleVisible,
+        group.children[1]
+      )
+      this.applyRasterToCorners(imageOverlayPath, corners)
+      group.visible = true
+      group.opacity = this.opacity
+      group.transparent = this.opacity != 1
+      // group.children[2].position=new Paper.Point(paperJSComponent.toCanvasRef(this.geoLocalisation))
+    } else {
+      group = new Paper.Group()
+      imageOverlayPath = this.loadImageOverlay(this.imageUrl, corners)
+      this.applyRasterToCorners(imageOverlayPath, corners)
+      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'
+      group.pathId = this.id
+      group.overlayId = this.id
+      group.visible = true
+      group.opacity = this.opacity
+      group.transparent = this.opacity != 1
+
+      imageOverlayPath.visible = true
+      paperJSComponent.paths.imageOverlays[this.id] = group
+    }
+  }
+  renderImagePlaceHolder(paperJSComponent) {
+    const toCanvasRef = paperJSComponent.canvasContext.toCanvasRef
+
+    const group = new Paper.Group()
+    const circle = new Paper.Path.Circle({
+      center: toCanvasRef({ x: 0, y: 0 }),
+      radius: 50,
+      fillColor: '#ffffff80'
+    })
+    circle.radius = 70
+    circle.itemData = 'circle'
+    const fillRectangle = new Paper.Path()
+    fillRectangle.fillColor = '#ffffff80'
+    fillRectangle.itemType = 'placeholder'
+    fillRectangle.itemData = this
+
+    fillRectangle.closePath()
+    this.placeHolderCorners.forEach((point) =>
+      fillRectangle.add(toCanvasRef(point))
+    )
+    fillRectangle.visible = true
+    fillRectangle.version = 0
+    group.visible = true
+    group.addChild(fillRectangle)
+    group.addChild(circle)
+    return group
+  }
+  animatePlaceholder(event) {
+    if (!this.placeholderPath || !this.hasPlaceholderPath) {
+      return
+    }
+    this.placeholderPath.visible = true
+    const baseRadius = 30
+    const amplitude = 40
+    const newRadius =
+      baseRadius + amplitude * Math.sin(event.time * 0.7 * Math.PI) ** 2
+    const circle = this.placeholderPath.children[0].children[1]
+    const scale = newRadius / circle.radius
+    circle.scale(scale)
+    circle.radius = newRadius
+  }
+  loadImageOverlay(url, corners) {
+    let rasterImageOverlay = new Paper.Raster({
+      source: url,
+      crossOrigin: 'Anonymous'
+    })
+    rasterImageOverlay.visible = false
+    rasterImageOverlay.onLoad = () => {
+      this.applyRasterToCorners(rasterImageOverlay, corners)
+    }
+    rasterImageOverlay.data.angle = 0
+    rasterImageOverlay.data.type = 'imageOverlayRaster'
+    rasterImageOverlay.data.overlayId = this.id
+    rasterImageOverlay.data.url = url
+    return rasterImageOverlay
+  }
+  applyRasterToCorners(texture, corners = this.corners) {
+    //remove angle of texture
+    let textureAngle = texture.angle || 0
+    texture.rotate(-textureAngle)
+
+    //make texture the same size to fit corners
+    const textureWidth = texture.bounds.width
+    const textureHeight = texture.bounds.height
+    const frameWidth = getDistanceBetweenPoints(corners[1], corners[0])
+    const frameHeight = getDistanceBetweenPoints(corners[3], corners[0])
+    const center = multiplyVector(0.5, addVector(corners[0], corners[2]))
+    if (texture.bounds.width) {
+      var a = frameWidth / textureWidth
+      var b = 0
+      var c = 0
+      var d = frameHeight / textureHeight
+      texture.transform(new Paper.Matrix(a, b, c, d, 0, 0))
+      //translate to fit top left corner
+      var tx = center.x - texture.bounds.center.x
+      var ty = center.y - texture.bounds.center.y
+      texture.transform(new Paper.Matrix(1, 0, 0, 1, tx, ty))
+      //rotate
+      let angle = getAngleInDegFromCanvasVector(
+        substractVector(corners[0], corners[3])
+      )
+
+      texture.angle = angle
+      texture.rotate(angle)
+    }
+  }
+  renderImageOverlayHandles(corners, rotateHandleVisible, group = null) {
+    let circleHandle
+    let hasPaths = !!group
+    let handles = group || new Paper.Group()
+    let u = normalize2DVector(substractVector(corners[1], corners[0]))
+    let v = normalize2DVector(substractVector(corners[0], corners[3]))
+
+    //rotation handle
+    let center = multiplyVector(0.5, addVector(corners[0], corners[2]))
+
+    let radius = vectorLength2D(substractVector(center, corners[0])) - 10
+    if (!hasPaths) {
+      circleHandle = new Paper.Path.Circle(center, radius)
+      circleHandle.fillColor = layerColors.imageOverlayHandle.fillColor
+      circleHandle.strokeWidth = layerColors.imageOverlayHandle.strokeWidth
+      circleHandle.strokeColor = layerColors.imageOverlayHandle.strokeColor
+      circleHandle.data.type = 'imageOverlayRotateHandle'
+      circleHandle.data.overlayId = this.id
+      circleHandle.radius = radius
+      handles.addChild(circleHandle)
+    } else {
+      circleHandle = handles.children[0]
+      let ratio = radius / circleHandle.radius
+      circleHandle.transform(new Paper.Matrix(ratio, 0, 0, ratio, 0, 0))
+      circleHandle.position = center
+      circleHandle.radius = radius
+    }
+
+    circleHandle.visible = rotateHandleVisible
+    return handles
+  }
+  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
+      const top = +boxSize.y / 2
+      const bottom = -boxSize.y / 2
+      this.boxCenter = boxCenter
+      const initialCorners = [
+        {
+          x: 1000 * (boxCenter.x + left),
+          y: 1000 * (boxCenter.y + top),
+          z: 0
+        },
+        {
+          x: 1000 * (boxCenter.x + right),
+          y: 1000 * (boxCenter.y + top),
+          z: 0
+        },
+        {
+          x: 1000 * (boxCenter.x + right),
+          y: 1000 * (boxCenter.y + bottom),
+          z: 0
+        },
+        {
+          x: 1000 * (boxCenter.x + left),
+          y: 1000 * (boxCenter.y + bottom),
+          z: 0
+        }
+      ]
+      this.corners = []
+      initialCorners.forEach((corner, index) => {
+        corner = rotateTransformation(
+          corner,
+          this.angleOffset,
+          multiplyVector(1000, boxCenter)
+        )
+        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,
+        top,
+        bottom,
+        0.1, // near
+        1000 // far
+      )
+
+      const renderer = new THREE.WebGLRenderer({
+        canvas: canvas,
+        alpha: true
+      })
+      renderer.setSize(this.canvasWidth, this.canvasHeight)
+      renderer.setClearColor(0x000000, 0) // Make background transparent
+
+      scene.add(this.overlayMesh)
+
+      // Set camera position and look at the center of the model
+      this.overlayProjectionCamera.position.set(
+        boxCenter.x,
+        boxCenter.y,
+        boxCenter.z + 100
+      )
+      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)
+      this.overlayMesh.children[0].add(light)
+      // Render the scene
+      renderer.render(scene, this.overlayProjectionCamera)
+
+      // Generate image from canvas
+      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) => {
+          acc.xMin = Math.min(acc.xMin, cur.x)
+          acc.xMax = Math.max(acc.xMax, cur.x)
+          acc.yMin = Math.min(acc.yMin, cur.y)
+          acc.yMax = Math.max(acc.yMax, cur.y)
+          return acc
+        },
+        { xMin: Infinity, xMax: -Infinity, yMin: Infinity, yMax: -Infinity }
+      )
+      let { xMin, xMax, yMin, yMax } = outlineBounds
+      const cloudPoints = []
+      let stepNum = 5
+      for (let i = 0; i < stepNum; i++) {
+        for (let j = 0; j < stepNum; j++) {
+          const testPoint = {
+            x: xMin + (i * (xMax - xMin)) / stepNum,
+            y: yMin + (j * (yMax - yMin)) / stepNum
+          }
+          if (isInsidePolygon(testPoint, outline)) {
+            RayCaster.set(
+              new THREE.Vector3(testPoint.x / 1000, testPoint.y / 1000, 0),
+              new THREE.Vector3(0, 0, 1)
+            )
+            let intersects = RayCaster.intersectObject(overlaySimplifiedRoof)
+            intersects.forEach((intersection) => {
+              if (intersection.object.name == 'textured_roof') {
+                cloudPoints.push(intersection.point)
+              }
+            })
+          }
+        }
+      }
+      return cloudPoints
+    })
+    const SVDResults = cloudsPoints.map((cloud) => {
+      if (cloud.length > 3) {
+        return calculateBestFittingPlanePolygon(cloud)
+      } else {
+        return null
+      }
+    })
+    const newOutlines = outlines.map((outline, index) => {
+      if (SVDResults[index]) {
+        const normalVector = SVDResults[index].normalVector
+        const referencePoint = multiplyVector(
+          1000,
+          SVDResults[index].projectedOutline[0]
+        )
+
+        const newOutline = outline.map((p) =>
+          verticalProjectionOnPlane(p, normalVector, referencePoint)
+        )
+        return newOutline
+      } else {
+        return null
+      }
+    })
+    return newOutlines
+  }
+  createCanvas() {
+    const canvas = document.createElement('canvas')
+    canvas.width = this.canvasWidth
+    canvas.height = this.canvasHeight
+    canvas.style.position = 'fixed'
+    canvas.style.top = '100px'
+    canvas.style.left = '50px'
+    canvas.style.zIndex = 0
+    // Add the canvas to the document body
+    document.body.appendChild(canvas)
+    return canvas
+  }
+  serializeSettings() {
+    return {
+      version: this.version,
+      corners: this.corners,
+      geoLocalisation: this.geoLocalisation
+    }
+  }
+}