feat: icon save

src/core/Scene.js

@@ -5,6 +5,7 @@ import BoxManager from "./box/BoxManager.js";
 import { Mitt } from "./mitt.js";
 import testData from "./save.json";
 import { dataURItoBlob, saveFile } from "./utils/utils.js";
+
 const stats = new Stats();
 
 function sleep(ms) {
@@ -23,6 +24,7 @@ export default class Scene extends Mitt {
     this.width = 0;
     this.height = 0;
     this.defaultZoom = 250;
+    this.defaultUseZoom = 250 / window.devicePixelRatio;
     this.initCamPView = new THREE.Vector3();
     this.initCamRView = new THREE.Vector3();
     this.blobScreens = [];
@@ -41,10 +43,17 @@ export default class Scene extends Mitt {
       this.width = this.domElement.clientWidth;
       this.height = this.domElement.clientHeight;
       this.renderRes = window.devicePixelRatio;
-
+      this.defaultUseZoom = this.defaultZoom / window.devicePixelRatio;
       this.renderer.setSize(this.width, this.height);
       this.renderer.setPixelRatio(this.renderRes);
-      console.log(this.width, this.height, this.renderRes);
+
+      console.log(
+        "init",
+        this.width,
+        this.height,
+        this.renderRes,
+        this.defaultZoom
+      );
 
       this.orthCamera = new THREE.OrthographicCamera(
         -this.width / 2,
@@ -54,17 +63,15 @@ export default class Scene extends Mitt {
         0.1,
         1000
       );
-      this.orthCamera.zoom = this.defaultZoom;
+      this.orthCamera.zoom = this.defaultUseZoom;
 
-      this.orthCamera.position.set(0, 10, 0);
+      this.orthCamera.position.set(0, 0, 0);
       this.orthCamera.lookAt(0, 0, 0);
       // this.orthCamera.setViewOffset(this.width, this.height, 0, 0);
       this.orthCamera.updateProjectionMatrix();
-
       //player
       this.player = new Player(this);
 
-      //stats
       domElement.parentNode.appendChild(stats.dom);
       stats.dom.style.pointerEvents = "none";
       stats.dom.style.left = "15%";
@@ -152,10 +159,23 @@ export default class Scene extends Mitt {
   setMode(mode) {
     this.player.setMode(mode);
   }
-  onResize = (width, height) => {
-    this.width = width !== undefined ? width : this.domElement.clientWidth;
-    this.height = height !== undefined ? height : this.domElement.clientHeight;
-    console.log("resize", this.width, this.height);
+  onResize = (rWidth, rHeight) => {
+    this.width =
+      typeof rWidth === "number" ? rWidth : this.domElement.clientWidth;
+    this.height =
+      typeof rHeight === "height" ? rHeight : this.domElement.clientHeight;
+
+    const container = document.querySelector(".right");
+    const { width, height } = container.getBoundingClientRect();
+
+    if (width !== this.domElement.clientWidth) {
+      this.width = width;
+    }
+    if (height !== this.domElement.clientHeight) {
+      this.height = height;
+    }
+
+    console.warn("onResize", this.width, this.height);
 
     (this.orthCamera.left = -this.width / 2),
       (this.orthCamera.right = this.width / 2),
@@ -164,6 +184,9 @@ export default class Scene extends Mitt {
       this.orthCamera.updateProjectionMatrix();
 
     this.renderer.setSize(this.width, this.height);
+    this.renderRes = window.devicePixelRatio;
+    this.defaultUseZoom = this.defaultZoom / this.renderRes;
+    this.renderer.setPixelRatio(this.renderRes);
   };
   render = () => {
     if (this.player) {
@@ -179,7 +202,7 @@ export default class Scene extends Mitt {
   };
 
   resetCameraView() {
-    this.orthCamera.zoom = this.defaultZoom;
+    this.orthCamera.zoom = this.defaultUseZoom;
     // this.orthCamera.position.set(0, 0, 0);
     // this.orthCamera.rotation.set(0, 10, 0);
     // this.orthCamera.updateMatrixWorld();
@@ -191,36 +214,44 @@ export default class Scene extends Mitt {
   endScreenshot() {
     this.lockView(false);
     this.blobScreens = [];
+    this.scene.position.x = 0;
     this.player.floorplanControls.reset();
-    this.onResize();
-    this.renderer.setSize(this.width, this.height);
+    this.onResize(this.width, this.height);
   }
-  screenshot(x, zoom) {
+  screenshot(x, zoom, index) {
     var imgData, imgNode;
     const times = 4;
-    this.orthCamera.zoom = zoom || this.defaultZoom;
+    this.orthCamera.zoom = zoom || this.defaultUseZoom;
     this.scene.position.x = x || 0;
 
     this.renderer.setSize(this.width * times, this.height * times);
+    this.renderer.setPixelRatio(this.renderRes);
     this.orthCamera.aspect = this.width / this.height;
 
-    // this.player.floorplanControls.minZoom = 1;
-    // this.orthCamera.zoom = 50;
     this.orthCamera.updateProjectionMatrix();
     this.renderer.render(this.scene, this.orthCamera, null, false);
 
     const dataURL = this.renderer.domElement.toDataURL("image/jpeg");
     this.blobScreens.push(dataURItoBlob(dataURL));
-    // saveFile(dataURL, `${index}.jpg`);
-    this.onResize(this.width, this.height);
+    console.log(this.width, this.height);
+    if (typeof index === "number") {
+      saveFile(dataURL, `${index}.jpg`);
+    }
+
+    this.renderer.setSize(this.width, this.height);
   }
 
   exportScreenshot() {
+    if (window.devicePixelRatio !== 1) {
+      this.emit("devicePixelRatio");
+      return;
+    }
+    this.onResize();
     this.player.floorplanControls.reset();
     this.lockView(true);
     this.setMode(0);
     // await sleep(500);
-    this.orthCamera.zoom = this.defaultZoom;
+
     const object = this.boxManager.model;
     const total = object.children.length;
     if (total === 0) {
@@ -235,19 +266,18 @@ export default class Scene extends Mitt {
     const width = boundingBox.max.x - boundingBox.min.x;
     const one = width / total;
     let slides = Math.floor(total / 3);
-    // debugger;
+
     console.log("slides", slides);
     if (slides >= 1) {
       for (var i = 0; i <= slides; i++) {
         (function (index, that) {
           setTimeout(function () {
             const offset = -(one * 3 * index);
-            console.log("Iteration:", offset);
-            that.screenshot(offset);
+            console.log("Iteration:", one, index, offset, that.defaultUseZoom);
+            that.screenshot(offset, that.defaultUseZoom);
             console.log(`Width: ${offset}`);
             if (index === slides) {
               console.log("last");
-              that.scene.position.x = 0;
               that.emit("submitScreenshot");
             }
           }, index * 500);
@@ -265,6 +295,6 @@ export default class Scene extends Mitt {
   }
 
   onBindEvent = () => {
-    window.addEventListener("resize", this.onResize);
+    window.addEventListener("resize", this.onResize, false);
   };
 }

src/core/box/BoxManager.js

@@ -46,8 +46,9 @@ export default class BoxManager {
       // console.log( 'Started loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );
       console.log("loading_manager: loading...");
     };
-    this.loadingManager.onLoad = function () {
+    this.loadingManager.onLoad = () => {
       console.log("loading_manager: loading complete!");
+      this.scene.emit("loaded");
     };
     this.loadingManager.onProgress = function (url, itemsLoaded, itemsTotal) {
       // console.log( 'Loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );

src/core/player/Player.js

@@ -135,6 +135,14 @@ export default class Player {
     };
   }
 
+  setRotateMode() {
+    this.floorplanControls.enableRotate = true;
+    this.floorplanControls.mouseButtons = {
+      LEFT: THREE.MOUSE.ROTATE,
+      MIDDLE: THREE.MOUSE.DOLLY,
+      RIGHT: THREE.MOUSE.PAN,
+    };
+  }
   init = () => {
     // //floorplanControls
     // this.floorplanControls = new FloorplanControls(
@@ -928,7 +936,6 @@ export default class Player {
           this.scene.scene.remove(marker);
         }
       }
-
       // const
     });
   }

src/view/case/photos/index.vue

@@ -52,7 +52,13 @@
           文本</el-button
         >
         <el-button @click="handleSave" class="save">保存</el-button>
-        <el-button @click="handleExport" class="opt">导出</el-button>
+        <el-button
+          @click="handleExport"
+          class="opt"
+          :loading="!isSenseLoaded"
+          :disabled="!isSenseLoaded"
+          >导出</el-button
+        >
 
         <el-button @click="handleClear" v-if="hasDrawData" class="opt"
           >清空</el-button
@@ -102,6 +108,7 @@ const newlist = ref([]);
 const fileList = ref([]);
 const swiperRef = ref(null);
 const childRef = ref(null);
+const isSenseLoaded = ref(false);
 const caseId = ref(props.caseId);
 const sortType = ref(false);
 const drawMode = ref(0);
@@ -223,7 +230,16 @@ const renderCanvas = () => {
     console.log("editData", editData);
     editing.value.show = true;
     editing.value.data = editData;
-    // debugger;
+  });
+  scene.on("devicePixelRatio", () => {
+    ElMessage.error(
+      `当前浏览器缩放${Math.floor(
+        window.devicePixelRatio * 100
+      )}%比例,请设置缩放比例为100%,方可正常导出`
+    );
+  });
+  scene.on("loaded", () => {
+    isSenseLoaded.value = true;
   });
   scene.on("autoSave", () => {
     console.log("autoSave");