feat(draw): mode 1,2

src/core/box/VerticalBox.js

@@ -9,7 +9,7 @@ export default class VerticalBox extends THREE.Group {
     super();
     this.manager = manager;
     this.total = total;
-    this.name = "horizontal_box";
+    this.name = "vertical_box";
     this.getStyle();
     this.load(data, index);
   }
@@ -50,19 +50,15 @@ export default class VerticalBox extends THREE.Group {
       let img;
       this.manager.loader.load(i.imgUrl, (texture) => {
         texture.colorSpace = THREE.SRGBColorSpace;
-        img = new ImgLabel(texture, matLine);
+        img = new ImgLabel(texture, matLine, false);
         img.position.y += 1;
-        if (j === 0) {
-          img.position.z -= 0.8;
-        } else {
-          img.position.z += 0.5;
-        }
+        img.position.z -= 0.2;
         this.add(img);
         this.manager.imgList.push(img);
         const textlabel = new TextLabel(i.imgInfo, true);
         this.add(textlabel);
         textlabel.position.copy(img.position);
-        textlabel.position.z += textlabel.scale.z * 0.5 + 0.1;
+        textlabel.position.z += textlabel.scale.z * 0.5 + 0.7;
       });
     });
 

src/core/box/object/ImgLabel.js

@@ -2,10 +2,27 @@ import * as THREE from "three";
 import TouchEdge from "./TouchEdge";
 
 export default class ImgLabel extends THREE.Mesh {
-  constructor(texture, matLine) {
-    const width = 1.5;
-    const height = 0.85;
-
+  constructor(texture, matLine, isHorizontal = true) {
+    let width, height, p;
+    if (isHorizontal) {
+      width = 1.5;
+      height = 0.85;
+      p = [
+        [-0.75, 0, -0.425, 0.75, 0, -0.425],
+        [-0.75, 0, -0.425, -0.75, 0, 0.425],
+        [-0.75, 0, 0.425, 0.75, 0, 0.425],
+        [0.75, 0, 0.425, 0.75, 0, -0.425],
+      ];
+    } else {
+      width = 1.5;
+      height = 2;
+      p = [
+        [-0.75, 0, -1, 0.75, 0, -1],
+        [-0.75, 0, -1, -0.75, 0, 1],
+        [-0.75, 0, 1, 0.75, 0, 1],
+        [0.75, 0, 1, 0.75, 0, -1],
+      ];
+    }
     const g = new THREE.PlaneGeometry(width, height);
     g.rotateX(-Math.PI / 2);
 
@@ -13,17 +30,14 @@ export default class ImgLabel extends THREE.Mesh {
       map: texture,
     });
     super(g, m);
-    // console.log(g);
-    const p = [
-      [-0.75, 0, -0.425, 0.75, 0, -0.425],
-      [-0.75, 0, -0.425, -0.75, 0, 0.425],
-      [-0.75, 0, 0.425, 0.75, 0, 0.425],
-      [0.75, 0, 0.425, 0.75, 0, -0.425],
-    ];
+
+    this.width = width;
+    this.height = height;
     this.touchLines = new TouchEdge(p, matLine);
 
     this.touchLines.position.y += 0.5;
     this.add(this.touchLines);
+    // this.touchLines.children.forEach((child) => (child.visible = true));
 
     this.name = "imglabel";
   }

src/core/player/Player.js

@@ -129,7 +129,7 @@ export default class Player {
       };
       console.log("this.touchImg", activeLineItem, points);
       this.insertActiveEdge(activeLineItem);
-      this.showAllActiveEdges();
+      // this.showAllActiveEdges();
     }
   };
 
@@ -173,7 +173,6 @@ export default class Player {
     if (this.drawLine) {
       this.drawLine.removeFromParent();
     }
-    // console.log("this.drawLine", this.drawLine);
     let s = new THREE.Vector3(this.pointerdown.x, this.pointerdown.y, -1);
     let e = new THREE.Vector3(this.pointermove.x, this.pointermove.y, -1);
     s.unproject(this.orthCamera);
@@ -197,7 +196,6 @@ export default class Player {
       x -= 0.5;
       y -= 0.5;
       // console.log(x, y);
-
       if (x >= 0 && y >= 0) {
         if (x > y) {
           return 3;
@@ -245,21 +243,25 @@ export default class Player {
   }
 
   showAllActiveEdges() {
-    let imgList = this.scene.boxManager.imgList;
-    this.activeEdges.forEach((edge) => {
-      const exist = imgList.find((item) => item.userData === edge.id);
-      // console.log("exist", exist);
-      if (exist) {
-        edge.dir.forEach((dir) => {
-          exist.touchLines.children[dir].visible = true;
-        });
-      }
-    });
+    if (this.inited) {
+      let imgList = this.scene.boxManager.imgList;
+      this.activeEdges.forEach((edge) => {
+        const exist = imgList.find((item) => item.userData === edge.id);
+        // console.log("exist", exist);
+        if (exist) {
+          edge.dir.forEach((dir) => {
+            exist.touchLines.children[dir].visible = true;
+          });
+        }
+      });
+    
+    }
   }
 
   update = () => {
     if (this.floorplanControls.enabled) {
       this.floorplanControls && this.floorplanControls.update();
+      this.scene.boxManager && this.showAllActiveEdges();
     }
   };
 }

src/view/case/photos/index.vue

@@ -16,7 +16,7 @@
       </div>
       <swiper
         class="swiper"
-        v-show="false"
+        v-if="false"
         slides-per-view="auto"
         :space-between="24"
         :centeredSlides="true"