feat: save

src/core/Scene.js

@@ -186,11 +186,16 @@ export default class Scene extends Mitt {
   editing(item) {
     this.player.editing(item);
   }
-
-  screenshot(x, index) {
+  endScreenshot() {
+    this.blobScreens = [];
+    this.player.floorplanControls.reset();
+    this.onResize();
+    this.renderer.setSize(this.width, this.height);
+  }
+  screenshot(x, zoom) {
     var imgData, imgNode;
     const times = 4;
-    this.orthCamera.zoom = this.defaultZoom;
+    this.orthCamera.zoom = zoom || this.defaultZoom;
     this.scene.position.x = x || 0;
 
     this.renderer.setSize(this.width * times, this.height * times);
@@ -208,6 +213,8 @@ export default class Scene extends Mitt {
   }
 
   test() {
+    this.player.floorplanControls.reset();
+    // await sleep(500);
     this.orthCamera.zoom = this.defaultZoom;
     const object = this.boxManager.model;
     let total;
@@ -227,16 +234,24 @@ export default class Scene extends Mitt {
           setTimeout(function () {
             const offset = -(one * 3 * index);
             console.log("Iteration:", offset);
-            that.screenshot(offset, index);
+            that.screenshot(offset);
             console.log(`Width: ${offset}`);
             if (index === slides) {
               console.log("last");
               that.scene.position.x = 0;
-              this.scene.emit('submitScreenshot')
+              that.emit("submitScreenshot");
             }
-          }, index * 1000);
+          }, index * 500);
         })(i, this); // 传递当前迭代的索引i给setTimeout的回调函数
       }
+    } else {
+      // 只有一个或0个
+      if (total > 1 && total <= 3) {
+        console.log("total", total);
+        this.player.floorplanControls.reset();
+        this.screenshot(-0.3, 227);
+        this.emit("submitScreenshot");
+      }
     }
   }
 

src/core/box/VerticalBox.js

@@ -53,16 +53,17 @@ export default class VerticalBox extends THREE.Group {
         let imgRatio = texture.image.width / texture.image.height;
         let planeRatio = 1.5 / 2;
         texture.matrixAutoUpdate = false;
+        //放开所有uv的比例
         if (planeRatio > imgRatio) {
-          texture.matrix.setUvTransform(
-            0,
-            0,
-            planeRatio / imgRatio,
-            1,
-            0,
-            0.5,
-            0.5
-          );
+          // texture.matrix.setUvTransform(
+          //   0,
+          //   0,
+          //   planeRatio / imgRatio,
+          //   1,
+          //   0,
+          //   0.5,
+          //   0.5
+          // );
         } else {
           // debugger
           // texture.matrix.setUvTransform(
@@ -77,7 +78,7 @@ export default class VerticalBox extends THREE.Group {
         }
 
         texture.colorSpace = THREE.SRGBColorSpace;
-     
+
         // texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
         // texture.repeat.set(2, 2); // 纹理平铺两次
         // texture.offset.set(0.5, 0.5); // 纹理偏移到中心

src/core/box/object/ImgLabelBox.js

@@ -1,6 +1,48 @@
 import * as THREE from "three";
+import { TriangleBlurShader } from "three/addons/shaders/TriangleBlurShader.js";
 import TouchEdge from "./TouchEdge";
 
+function makeTriangleBlurShader(iterations = 10) {
+  // Remove texture, because texture is a reserved word in WebGL 2
+  const { texture, ...uniforms } = TriangleBlurShader.uniforms;
+
+  const TriangleBlurShader2 = {
+    ...TriangleBlurShader,
+
+    name: "TriangleBlurShader2",
+
+    uniforms: {
+      ...uniforms,
+
+      // Replace texture with blurTexture for WebGL 2
+      blurTexture: { value: null },
+    },
+  };
+
+  // Replace texture with blurTexture for WebGL 2
+  TriangleBlurShader2.fragmentShader =
+    TriangleBlurShader2.fragmentShader.replace(
+      "uniform sampler2D texture;",
+      "uniform sampler2D blurTexture;"
+    );
+  TriangleBlurShader2.fragmentShader =
+    TriangleBlurShader2.fragmentShader.replace(
+      "texture2D( texture",
+      "texture2D( blurTexture"
+    );
+
+  // Make iterations configurable.
+  TriangleBlurShader2.fragmentShader =
+    TriangleBlurShader2.fragmentShader.replace(
+      "#define ITERATIONS 10.0",
+      "#define ITERATIONS " + iterations + ".0"
+    );
+
+  console.log("shader:", TriangleBlurShader2.fragmentShader);
+
+  return TriangleBlurShader2;
+}
+
 export default class ImgLabel extends THREE.Mesh {
   constructor(texture, matLine, isHorizontal = true) {
     let width, height, p;
@@ -31,6 +73,17 @@ export default class ImgLabel extends THREE.Mesh {
     //   transparent: true,
     // });
 
+    // const shader = makeTriangleBlurShader(12);
+
+    // const blurMaterial = new THREE.ShaderMaterial({
+    //   vertexShader: shader.vertexShader,
+    //   fragmentShader: shader.fragmentShader,
+    //   uniforms: THREE.UniformsUtils.clone(shader.uniforms),
+    // });
+    // // console.log("blurMaterial", blurMaterial.uniforms);
+    // blurMaterial.uniforms.blurTexture.value = texture;
+    // blurMaterial.uniforms.delta.value = new THREE.Vector2(0.5, 0.9);
+
     const bg = new THREE.MeshBasicMaterial({
       color: 0xf2f2f2,
       transparent: false,
@@ -39,8 +92,8 @@ export default class ImgLabel extends THREE.Mesh {
     super(g, bg);
 
     let imgRatio = texture.image.width / texture.image.height;
-
-    const imageG = new THREE.PlaneGeometry(width, width / imgRatio);
+    const imgHeight = width / imgRatio >= 2 ? 2 : width / imgRatio;
+    const imageG = new THREE.PlaneGeometry(width, imgHeight);
 
     imageG.rotateX(-Math.PI / 2);
 

src/core/player/Player.js

@@ -853,8 +853,8 @@ export default class Player {
   deleteImageDataByIds(ids) {
     setTimeout(() => {
       console.warn("单多张图片删除时要删除相关数据");
-      this.clear();
-      // this.t_deleteImageDataByIds(ids);
+      // this.clear();
+      this.t_deleteImageDataByIds(ids);
     }, 500);
   }
   t_deleteImageDataByIds(ids) {

src/core/utils/utils.js

@@ -1,3 +1,5 @@
+
+
 export function dataURItoBlob(dataURI) {
   // convert base64 to raw binary data held in a string
   // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
@@ -23,15 +25,15 @@ export function dataURItoBlob(dataURI) {
 }
 
 export const saveFile = function (strData, filename) {
-    var link = document.createElement("a");
-    if (typeof link.download === "string") {
-      document.body.appendChild(link); //Firefox requires the link to be in the body
-      link.download = filename;
-      link.href = strData;
-      link.click();
-      document.body.removeChild(link); //remove the link when done
-    } else {
-      location.replace(uri);
-    }
-  };
-  
+  var link = document.createElement("a");
+  if (typeof link.download === "string") {
+    document.body.appendChild(link); //Firefox requires the link to be in the body
+    link.download = filename;
+    link.href = strData;
+    link.click();
+    document.body.removeChild(link); //remove the link when done
+  } else {
+    location.replace(uri);
+  }
+};
+

src/view/case/photos/index.vue

@@ -221,12 +221,15 @@ const renderCanvas = () => {
       //   data.append("files", b, index);
       // });
       const data = {
-        files: window.scene.blobScreens,
+        files: window.scene.blobScreens.map(
+          (b, index) => new File([b], `${Date.now()}-${index}.jpg`)
+        ),
         caseId: caseId.value,
       };
-      
+
       setTimeout(() => {
         submitMergePhotos(data);
+        window.scene.endScreenshot();
       }, 500);
     }
   });