@eturnity/eturnity_3d 1.0.10 → 1.0.11

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eturnity/eturnity_3d",
   "private": false,
-  "version": "1.0.10",
+  "version": "1.0.11",
   "main": "dist/main.js",
   "scripts": {
     "dev": "vue-cli-service serve --skip-plugins @vue/cli-plugin-eslint",

package/src/components/ThreeCanvasViewer.vue

@@ -106,6 +106,7 @@ export default {
       set_module_texture_version_id: 'mutate_module_texture_version_id'
     }),
     setCamera(polygon, view_mode) {
+      let margin=0.2
       console.log('viewmode', view_mode)
       if (!polygon || view_mode == 'global') {
         let roofsBounds = this.roofsBounds
@@ -116,29 +117,9 @@ export default {
         this.orthographicCamera.position.set(...position)
         this.orthographicCamera.lookAt(...target)
         this.isReady.camera = true
-        let ratioCanvas=this.canvasHeight/this.canvasWidth
-        let width=roofsBounds.xMax-roofsBounds.xMin
-        let height=roofsBounds.yMax-roofsBounds.yMin
-        let ratio=height/width
-
-        let xCenter=(roofsBounds.xMax+roofsBounds.xMin)/2
-        let yCenter=(roofsBounds.yMax+roofsBounds.yMin)/2
-        let xMin
-        let xMax
-        let yMin
-        let yMax
-        if(ratioCanvas<ratio){
-          //canvas wider
-          xMin=xCenter-width*(ratio/ratioCanvas)/2
-          xMax=xCenter+width*(ratio/ratioCanvas)/2
-          yMin=yCenter-height/2
-          yMax=yCenter+height/2
-        }else{
-          xMin=xCenter-width/ratio/2
-          xMax=xCenter+width/ratio/2
-          yMin=yCenter-height*(ratioCanvas/ratio)/2
-          yMax=yCenter+height*(ratioCanvas/ratio)/2 
-        }
+        
+        let {xMin,xMax,yMin,yMax}=this.orthographicBounds(roofsBounds,margin)
+       
         this.orthographicCamera.left = xMin / 1000
         this.orthographicCamera.right = xMax / 1000
         this.orthographicCamera.top = yMax / 1000
@@ -191,13 +172,15 @@ export default {
           const position = [0,0, 100]
           const target = [0, 0, 0]
 
+          let {xMin,xMax,yMin,yMax}=this.orthographicBounds(polygonBounds,margin)
           console.log('top POS TARGET', position, target)
           this.orthographicCamera.position.set(...position)
           this.orthographicCamera.lookAt(...target)
-          this.orthographicCamera.left = polygonBounds.xMin / 1000
-          this.orthographicCamera.right = polygonBounds.xMax / 1000
-          this.orthographicCamera.top = polygonBounds.yMax / 1000
-          this.orthographicCamera.bottom = polygonBounds.yMin / 1000
+
+          this.orthographicCamera.left = xMin / 1000
+          this.orthographicCamera.right = xMax / 1000
+          this.orthographicCamera.top = yMax / 1000
+          this.orthographicCamera.bottom = yMin / 1000
           this.orthographicCamera.updateProjectionMatrix()
         } else {
           //street view
@@ -222,6 +205,32 @@ export default {
         this.isReady.camera = true
       }
     },
+    orthographicBounds(bounds,margin){
+      let ratioCanvas=this.canvasHeight/this.canvasWidth
+      let width=(bounds.xMax-bounds.xMin)*(1+margin)
+      let height=(bounds.yMax-bounds.yMin)*(1+margin)
+      let ratio=height/width
+
+      let xCenter=(bounds.xMax+bounds.xMin)/2
+      let yCenter=(bounds.yMax+bounds.yMin)/2
+      let xMin
+      let xMax
+      let yMin
+      let yMax
+      if(ratioCanvas<ratio){
+        //canvas wider
+        xMin=xCenter-width*(ratio/ratioCanvas)/2
+        xMax=xCenter+width*(ratio/ratioCanvas)/2
+        yMin=yCenter-height/2
+        yMax=yCenter+height/2
+      }else{
+        xMin=xCenter-width/ratio/2
+        xMax=xCenter+width/ratio/2
+        yMin=yCenter-height*(ratioCanvas/ratio)/2
+        yMax=yCenter+height*(ratioCanvas/ratio)/2 
+      }
+      return {xMin,xMax,yMin,yMax}
+    },
     animate() {
       this.render()
       requestAnimationFrame(this.animate)