@eturnity/eturnity_3d 8.4.3-EPDM-12535.1 → 8.4.3

package/package.json

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

package/src/Overlay/ImageOverlay.js

@@ -9,6 +9,7 @@ import {
   normalize2DVector,
   vectorLength2D,
 } from '@eturnity/eturnity_maths'
+let Paper
 export default class ImageOverlay extends Overlay {
   constructor(overlay, emit) {
     super(overlay, emit)
@@ -41,6 +42,15 @@ export default class ImageOverlay extends Overlay {
       this.isReadyCallback = []
     })
   }
+  onLoad() {
+    return new Promise((resolve) => {
+      if (this.isReady) {
+        resolve(this)
+      } else {
+        this.isReadyCallback.push(resolve)
+      }
+    })
+  }
   async initialiseImage(url) {
     const img = new Image()
     img.crossOrigin = 'Anonymous'
@@ -110,7 +120,7 @@ export default class ImageOverlay extends Overlay {
     this.emit('overlay-scale-updated', { id: this.id })
   }
   renderOnPaperJS(paperJSComponent) {
-    this.Paper = paperJSComponent.paperScope
+    Paper = paperJSComponent.paperScope
     if (!this.isReady || !this.isActive || !this.corners) {
       return
     }
@@ -130,9 +140,15 @@ export default class ImageOverlay extends Overlay {
         paperJSComponent.clearPath(group.children[0])
         group.insertChild(0, imageOverlayPath)
       }
+      handles = this.renderImageOverlayHandles(
+        corners,
+        isRotationHandleVisible,
+        group.children[1]
+      )
       this.applyRasterToCorners(imageOverlayPath, corners)
+      group.visible = true
     } else {
-      group = new this.Paper.Group()
+      group = new Paper.Group()
       imageOverlayPath = this.loadImageOverlay(this.url, corners)
 
       handles = this.renderImageOverlayHandles(corners, isRotationHandleVisible)
@@ -144,23 +160,21 @@ export default class ImageOverlay extends Overlay {
       group.type = 'imageOverlays'
       group.pathId = this.id
       group.overlayId = this.id
+      group.visible = true
       paperJSComponent.paths.imageOverlays[this.id] = group
     }
-    group.visible = true
     imageOverlayPath.opacity = this.opacity
     handles.visible = isRotationHandleVisible
   }
   loadImageOverlay(url, corners) {
     let rasterImageOverlay = this.img
-      ? new this.Paper.Raster(this.img)
-      : new this.Paper.Raster({
+      ? new Paper.Raster(this.img)
+      : new Paper.Raster({
           source: url,
           crossOrigin: 'Anonymous',
         })
-    rasterImageOverlay.visible = false
     rasterImageOverlay.onLoad = () => {
       this.applyRasterToCorners(rasterImageOverlay, corners)
-      rasterImageOverlay.visible = true
     }
     rasterImageOverlay.data.angle = 0
     rasterImageOverlay.data.type = 'imageOverlayRaster'
@@ -168,6 +182,120 @@ export default class ImageOverlay extends Overlay {
     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
+
+    //scale handle
+    for (let k = 0; k < 4; k++) {
+      let squareSize = 10
+      let squareHandleVertices = [
+        addVector(
+          addVector(corners[k], multiplyVector(squareSize / 2, u)),
+          multiplyVector(squareSize / 2, v)
+        ),
+        addVector(
+          addVector(corners[k], multiplyVector(-squareSize / 2, u)),
+          multiplyVector(squareSize / 2, v)
+        ),
+        addVector(
+          addVector(corners[k], multiplyVector(-squareSize / 2, u)),
+          multiplyVector(-squareSize / 2, v)
+        ),
+        addVector(
+          addVector(corners[k], multiplyVector(squareSize / 2, u)),
+          multiplyVector(-squareSize / 2, v)
+        ),
+        addVector(
+          addVector(corners[k], multiplyVector(squareSize / 2, u)),
+          multiplyVector(squareSize / 2, v)
+        ),
+      ]
+      let squareHandle
+
+      if (hasPaths) {
+        squareHandle = handles.children[k + 1]
+        squareHandle.position = corners[k]
+        //squareHandle.rotate()
+        for (let index in squareHandleVertices) {
+          let vertex = squareHandleVertices[index]
+          squareHandle.segments[index].point = vertex
+        }
+      } else {
+        squareHandle = new Paper.Path()
+
+        for (let vertex of squareHandleVertices) {
+          squareHandle.add(vertex)
+        }
+
+        squareHandle.fillColor = layerColors.imageOverlayHandle.fillColor
+        squareHandle.strokeWidth = layerColors.imageOverlayHandle.strokeWidth
+        squareHandle.strokeColor = layerColors.imageOverlayHandle.strokeColor
+        squareHandle.data.type = 'handle'
+        squareHandle.data.index = k
+
+        handles.addChild(squareHandle)
+      }
+      squareHandle.visible = false
+    }
+    return handles
+  }
   renderOnThreeJS(threeJSComponent) {}
   serializeSettings() {
     return {

package/src/Overlay/Overlay.js

@@ -1,6 +1,5 @@
 import { v4 as uuidv4 } from 'uuid'
 import Item from '../Item/Item'
-import { layerColors } from '../config'
 import {
   multiplyVector,
   addVector,
@@ -8,7 +7,6 @@ import {
   substractVector,
   getDistanceBetweenPoints,
   getAngleInDegFromCanvasVector,
-  vectorLength2D,
 } from '@eturnity/eturnity_maths'
 import {
   updateBufferRoofGeometry,
@@ -16,7 +14,6 @@ import {
 } from '../helper/render/geometryHandler'
 import * as THREE from 'three'
 import ProjectedMaterial from '../helper/projectedMaterial'
-
 export default class Overlay extends Item {
   constructor(overlay, emit) {
     super(emit)
@@ -24,7 +21,6 @@ export default class Overlay extends Item {
       ? overlay.layouting_overlay_uuid.toString()
       : uuidv4()
     this.actionsAvailable.push('setOpacity')
-    this.hasToBeSavedInBE = true
     this.isActive = overlay.is_active
     this.isReady = false
     this.resources = overlay.resources
@@ -58,16 +54,6 @@ export default class Overlay extends Item {
     this.overlayProjectionCamera.up.set(0, 1, 0)
     this.isSelected = false
     this.isReadyCallback = []
-    this.projectionMaterialPriority = 30
-  }
-  onLoad() {
-    return new Promise((resolve) => {
-      if (this.isReady) {
-        resolve(this)
-      } else {
-        this.isReadyCallback.push(resolve)
-      }
-    })
   }
   getCenter() {
     let center = multiplyVector(
@@ -147,67 +133,17 @@ export default class Overlay extends Item {
     this.corners = newCorners
     this.emit('item-updated', this)
   }
-  loadImageOverlay(url, corners) {
-    let rasterImageOverlay = new this.Paper.Raster({
-      source: url,
-      crossOrigin: 'Anonymous',
-    })
-    rasterImageOverlay.visible = false
-    rasterImageOverlay.onLoad = () => {
-      this.applyRasterToCorners(rasterImageOverlay, corners)
-      rasterImageOverlay.visible = true
-    }
-    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 this.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 this.Paper.Matrix(1, 0, 0, 1, tx, ty))
-      //rotate
-      let angle = getAngleInDegFromCanvasVector(
-        substractVector(corners[0], corners[3])
-      )
-
-      texture.angle = angle
-      texture.rotate(angle)
-    }
-  }
   async getProjectionMaterial() {
-    if (!this.isReady || !this.isActive || !this.corners) {
+    if (!this.isReady || !this.corners) {
       return null
     }
     const url = this.imageUrl
     return new Promise((resolve) => {
-      if (
-        this.imageOverlayProjectionMaterial &&
-        this.version == this.imageOverlayProjectionMaterial.userData.version
-      ) {
+      if (this.imageOverlayProjectionMaterial) {
         const cameraChanged = this.setImageOverlayCameraPosition()
         if (cameraChanged) {
           this.imageOverlayProjectionMaterial.userData.version++
         }
-        this.imageOverlayProjectionMaterial.userData.version = this.version
         this.imageOverlayProjectionMaterial.opacity = this.opacity
         resolve(this.imageOverlayProjectionMaterial)
         return
@@ -228,15 +164,14 @@ export default class Overlay extends Item {
 
         imageOverlayProjectionMaterial.userData = {}
         imageOverlayProjectionMaterial.userData.type = 'overlayMaterial'
-        imageOverlayProjectionMaterial.userData.overlayType = this.type
         imageOverlayProjectionMaterial.userData.version = 0
-        imageOverlayProjectionMaterial.priority =
-          this.projectionMaterialPriority
+        imageOverlayProjectionMaterial.priority = 30
         imageOverlayProjectionMaterial.userData.url = url
         imageOverlayProjectionMaterial.opacity = this.opacity
         this.imageOverlayProjectionMaterial = imageOverlayProjectionMaterial
         resolve(imageOverlayProjectionMaterial)
       }
+
       if (this.img) {
         callback(new THREE.Texture(this.img))
       } else {
@@ -263,7 +198,7 @@ export default class Overlay extends Item {
   setImageOverlayCameraPosition() {
     let cameraChanged = false
     const boxCenter = multiplyVector(
-      0.0005,
+      0.5,
       addVector(this.corners[0], this.corners[2])
     )
     boxCenter.z = 0
@@ -294,63 +229,21 @@ export default class Overlay extends Item {
     this.overlayProjectionCamera.rotation.set(0, 0, (zAngle * Math.PI) / 180)
     const CAMERA_HEIGHT_OFFSET = 50
     if (
-      this.overlayProjectionCamera.position.x != boxCenter.x ||
-      this.overlayProjectionCamera.position.y != boxCenter.y ||
+      this.overlayProjectionCamera.position.x != boxCenter.x / 1000 ||
+      this.overlayProjectionCamera.position.y != boxCenter.y / 1000 ||
       this.overlayProjectionCamera.position.z !=
-        boxCenter.z + CAMERA_HEIGHT_OFFSET
+        boxCenter.z / 1000 + CAMERA_HEIGHT_OFFSET
     ) {
       cameraChanged = true
     }
     this.overlayProjectionCamera.position.set(
-      boxCenter.x,
-      boxCenter.y,
-      boxCenter.z + CAMERA_HEIGHT_OFFSET
+      boxCenter.x / 1000,
+      boxCenter.y / 1000,
+      boxCenter.z / 1000 + CAMERA_HEIGHT_OFFSET
     )
     this.overlayProjectionCamera.updateProjectionMatrix()
     return cameraChanged
   }
-  renderImageOverlayHandles(corners, rotateHandleVisible, group = null) {
-    let circleHandle
-    let hasPaths = !!group
-    let handles = group || new this.Paper.Group()
-    //rotation handle
-    let center = multiplyVector(0.5, addVector(corners[0], corners[2]))
-
-    let radius = vectorLength2D(substractVector(center, corners[0])) - 10
-    if (!hasPaths) {
-      circleHandle = new this.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 this.Paper.Matrix(ratio, 0, 0, ratio, 0, 0))
-      circleHandle.position = center
-      circleHandle.radius = radius
-    }
-
-    circleHandle.visible = rotateHandleVisible
-    return handles
-  }
-  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
-  }
-  renderOnPaperJS(paperJSComponent) {}
-  renderOnThreeJS(threeJSComponent) {}
   serialize() {
     const serializedOverlay = {
       layouting_overlay_uuid: this.id,
@@ -366,6 +259,9 @@ export default class Overlay extends Item {
     }
     return serializedOverlay
   }
+
+  renderOnPaperJS(paperJSComponent) {}
+  renderOnThreeJS(threeJSComponent) {}
   serializeSettings() {
     return {}
   }

package/src/Overlay/OverlayFactory.js

@@ -1,7 +1,6 @@
 import Overlay from './Overlay'
 import GLBOverlay from './GLBOverlay'
 import ImageOverlay from './ImageOverlay'
-import YearlySunShadingOverlay from './YearlySunShadingOverlay'
 
 const OverlayFactory = {
   createOverlay(serializedOverlay, emit, origin = { lat: null, lng: null }) {
@@ -10,8 +9,6 @@ const OverlayFactory = {
       overlayInstance = new GLBOverlay(serializedOverlay, emit, origin)
     } else if (serializedOverlay.type == 'image_overlay') {
       overlayInstance = new ImageOverlay(serializedOverlay, emit)
-    } else if (serializedOverlay.type == 'yearly_sun_shading') {
-      overlayInstance = new YearlySunShadingOverlay(serializedOverlay, emit)
     } else {
       overlayInstance = new Overlay(serializedOverlay, emit)
     }

package/src/Overlay/OverlayLayer.js

@@ -12,12 +12,6 @@ class OverlayLayer extends LayerManager {
       'overlay-three-loaded'
     )
   }
-  getItemsToSaveInBE() {
-    return this.items.filter((item) => item.hasToBeSavedInBE)
-  }
-  getUserItems() {
-    return this.items.filter((item) => item.type != 'yearly_sun_shading')
-  }
   addOrUpdateSerializedItems(
     serializedOverlays,
     origin = { lat: null, lng: null }

package/src/Overlay/ThreeDModelOverlay.js

@@ -1,14 +1,23 @@
 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,
   getStandardDeviation,
 } from '@eturnity/eturnity_maths'
+let Paper
 export default class ThreeDModelOverlay extends Overlay {
   constructor(overlay, emit, origin, loader) {
     super(overlay, emit)
@@ -35,6 +44,15 @@ export default class ThreeDModelOverlay extends Overlay {
     this.geoLocalisation = this.settings.geoLocalisation
   }
   loadFile() {}
+  onLoad() {
+    return new Promise((resolve) => {
+      if (this.isReady) {
+        resolve(this)
+      } else {
+        this.isReadyCallback.push(resolve)
+      }
+    })
+  }
   set3DObjectMaterialOpacity(obj) {
     obj.children.forEach((child) => {
       this.set3DObjectMaterialOpacity(child, this.opacity)
@@ -47,6 +65,7 @@ export default class ThreeDModelOverlay extends Overlay {
     if (this.overlayMesh && this.overlayMesh.children.length == 0) {
       this.overlayMesh = await this.loadFile()
     }
+
     if (!this.isReady) {
       let waitingBall = threeJSComponent.meshes.overlayMeshes[this.id]
       if (!waitingBall) {
@@ -107,10 +126,9 @@ export default class ThreeDModelOverlay extends Overlay {
     this.overlayMesh = overlayMesh
     this.overlayMesh.frustumCulled = false
     this.set3DObjectMaterialOpacity(this.overlayMesh)
-    return overlayMesh
   }
   renderOnPaperJS(paperJSComponent) {
-    this.Paper = paperJSComponent.paperScope
+    Paper = paperJSComponent.paperScope
     if (!this.isActive) {
       return
     }
@@ -121,7 +139,7 @@ export default class ThreeDModelOverlay extends Overlay {
         if (!paperJSComponent.loadingSpinner) {
           return
         }
-        group = new this.Paper.Group()
+        group = new Paper.Group()
 
         group.addChild(this.renderImagePlaceHolder(paperJSComponent))
         group.itemType = 'placeholderOverlays'
@@ -132,7 +150,7 @@ export default class ThreeDModelOverlay extends Overlay {
         this.placeholderPath = group
 
         paperJSComponent.paperLayer['loadingSpinners'].activate()
-        this.Paper.view.onFrame = (event) => this.animatePlaceholder(event)
+        Paper.view.onFrame = (event) => this.animatePlaceholder(event)
       }
       paperJSComponent.paths.imageOverlays[this.id] = group
       this.hasPlaceholderPath = true
@@ -169,7 +187,7 @@ export default class ThreeDModelOverlay extends Overlay {
       group.opacity = this.opacity
       group.transparent = this.opacity != 1
     } else {
-      group = new this.Paper.Group()
+      group = new Paper.Group()
       imageOverlayPath = this.loadImageOverlay(this.imageUrl, corners)
       this.applyRasterToCorners(imageOverlayPath, corners)
       handles = this.renderImageOverlayHandles(corners, isRotationHandleVisible)
@@ -191,15 +209,15 @@ export default class ThreeDModelOverlay extends Overlay {
   renderImagePlaceHolder(paperJSComponent) {
     const toCanvasRef = paperJSComponent.canvasContext.toCanvasRef
 
-    const group = new this.Paper.Group()
-    const circle = new this.Paper.Path.Circle({
+    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 this.Paper.Path()
+    const fillRectangle = new Paper.Path()
     fillRectangle.fillColor = '#ffffff80'
     fillRectangle.itemType = 'placeholder'
     fillRectangle.itemData = this
@@ -229,16 +247,92 @@ export default class ThreeDModelOverlay extends Overlay {
     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
+  }
   initialiseCornersAndProjectionCamera() {
     const box = new THREE.Box3().setFromObject(this.overlayMesh)
     const boxSize = box.getSize(new THREE.Vector3())
-    const boxCenter = box.getCenter(new THREE.Vector3())
     this.boxSize = boxSize
-    this.boxCenter = boxCenter
+    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),
@@ -280,7 +374,9 @@ export default class ThreeDModelOverlay extends Overlay {
       1000 // far
     )
   }
-  checkGeoLocDataAndOffset() {}
+  checkGeoLocDataAndOffset() {
+    return
+  }
   async initialiseModel() {
     this.overlayMesh = await this.loadFile()
     if (!this.geoLocalisation) {
@@ -430,6 +526,18 @@ export default class ThreeDModelOverlay extends Overlay {
     })
     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,