feat(arrow): fix arrow

src/core/Scene.js

@@ -42,10 +42,11 @@ export default class Scene {
         1000
       );
       this.orthCamera.zoom = 250;
-      this.orthCamera.updateProjectionMatrix();
+
       this.orthCamera.position.set(0, 10, 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);
 
@@ -62,15 +63,15 @@ export default class Scene {
     };
   }
 
-  load = (list) => {
+  load = (list, type) => {
     if (!list) return;
-    console.log("scene: ", list);
+    console.log("scene: ", list, type);
     //axesHeloer
     const axesHelper = new THREE.AxesHelper(1);
     this.scene.add(axesHelper);
 
     this.boxManager = new BoxManager(this);
-    this.boxManager.load(list);
+    this.boxManager.load(list, type);
     //light
     this.loadLight();
   };

src/core/box/BoxManager.js

@@ -14,17 +14,21 @@ export default class BoxManager {
     this.onBindEvent();
   }
 
-  load = (list) => {
+  load = (list, type) => {
+    this.model.remove(...this.model.children);
+
     list.forEach((item, index) => {
-      if (Array.isArray(item)) {
+      if (type === 1) {
         //横排
         const box = new HorizontalBox(this, item, index);
         this.model.add(box);
-      } else {
+      }
+      if (type === 2) {
         //竖排
+        console.log("竖排");
       }
     });
-
+    console.log("this.model", this.model);
     this.scene.scene.add(this.model);
   };
 

src/core/box/HorizontalBox.js

@@ -8,6 +8,7 @@ export default class HorizontalBox extends THREE.Group {
     super();
     this.manager = manager;
     this.name = "horizontal_box";
+
     this.getStyle();
     this.load(data, index);
   }
@@ -19,6 +20,7 @@ export default class HorizontalBox extends THREE.Group {
 
   load(data, index) {
     //box
+
     const geometry = new THREE.PlaneGeometry(1, 1);
     geometry.rotateX(-Math.PI / 2);
 
@@ -33,7 +35,7 @@ export default class HorizontalBox extends THREE.Group {
     this.position.x = (this.width + 0.125) * index;
 
     const matLine = new LineMaterial({
-      color: 0x26559b,
+      color: 0xe44d54,
       linewidth: 3, // in world units with size attenuation, pixels otherwise
       dashed: false,
       alphaToCoverage: true,

src/core/box/VerticalBox.js

@@ -33,7 +33,7 @@ export default class VerticalBox extends THREE.Group {
     this.position.x = (this.width + 0.125) * index;
 
     const matLine = new LineMaterial({
-      color: 0x26559b,
+      color: 0xe44d54,
       linewidth: 3, // in world units with size attenuation, pixels otherwise
       dashed: false,
       alphaToCoverage: true,

src/core/box/object/ImgLabel.js

@@ -13,7 +13,7 @@ export default class ImgLabel extends THREE.Mesh {
       map: texture,
     });
     super(g, m);
-    console.log(g);
+    // 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],

src/core/box/object/Line.js

@@ -19,6 +19,7 @@ let m = new THREE.MeshBasicMaterial({
 export default class Line extends Line2 {
   constructor(startPoint, endPoint, endEdge, matLine) {
     let points;
+
     let g = new THREE.PlaneGeometry(0.1, 0.1);
     g.rotateX(-Math.PI / 2);
     let cross = new THREE.Mesh(g, m);
@@ -74,7 +75,6 @@ export default class Line extends Line2 {
       points = pointsToArray([a, b, c, d]);
     } else if (endEdge.name === 2) {
       //bottom
-
       let a = startPoint.clone();
       let b = new THREE.Vector3(
         startPoint.x,
@@ -97,7 +97,6 @@ export default class Line extends Line2 {
       points = pointsToArray([a, b, c, d]);
     } else {
       //right
-
       let a = startPoint.clone();
       let b = new THREE.Vector3(
         (startPoint.x + endPoint.x) / 2,
@@ -124,10 +123,12 @@ export default class Line extends Line2 {
     }
 
     const geometry = new LineGeometry();
-    console.log("points", points);
-    // console.log("endEdge", endEdge.name);
+    // console.log("points", points);
+
+    cross.visible = false;
     geometry.setPositions(points);
     super(geometry, matLine);
+    this.userData = points;
     this.scale.set(1, 1, 1);
     this.position.y += 0.5;
     this.add(cross);

src/core/box/object/LinePoints.js

@@ -54,6 +54,7 @@ export default class LinePoints extends Line2 {
         break;
     }
     const geometry = new LineGeometry();
+    cross.visible = false;
     console.log("points", points);
     geometry.setPositions(points);
     super(geometry, matLine);

src/core/box/object/TouchEdge.js

@@ -19,6 +19,6 @@ export default class TouchEdge extends THREE.Group {
       line.y = i[2];
       this.add(line);
     });
-    console.log(this);
+    // console.log(this);
   }
 }

src/core/player/Player.js

@@ -34,6 +34,9 @@ export default class Player {
     this.drawing = false;
     this.inited = false;
     this.renderLines = [];
+    this.activeEdges = [];
+    this.matLine = null;
+    this.lineColor = 0xe44d54;
     this.init();
   }
 
@@ -45,40 +48,32 @@ export default class Player {
       this.scene.domElement
     );
 
-    // this.floorplanControls.enablePan = true;
-    // this.floorplanControls.target.set(0,0,0);
+    this.floorplanControls.enablePan = true;
+    this.floorplanControls.target.set(0, 1, 0);
     // this.floorplanControls.rotateSpeed = 0.5;
     // this.floorplanControls.panSpeed = 0.75
     // this.floorplanControls.maxDistance = 100
     // this.floorplanControls.minDistance = 3.5
-    // this.floorplanControls.maxZoom = 500
-    // this.floorplanControls.minZoom = 1
+    this.floorplanControls.maxZoom = 500;
+    this.floorplanControls.minZoom = 100;
 
     this.floorplanControls.enableRotate = false;
     this.raycaster = new THREE.Raycaster();
     this.onBindEvent();
     this.inited = true;
+
     console.log("this.floorplanControls", this.floorplanControls);
 
-    // const demoData = [
-    //   -0.005454589843750136, 5, -0.4604446894034718, -0.005454589843750136, 5,
-    //   -0.175, -0.02363647460937501, 5, -0.175, -0.02363647460937501, 5,
-    //   0.07500000000000001,
-    // ];
-    const demoData = [
-      0.48909057617188, 5, -0.5113538080557902, 0.48909057617188, 5,
-      -0.12500000000000006, 2.0018179931640683, 5, -0.12500000000000006,
-      2.0018179931640683, 5, -0.37500000000000006,
-    ];
-    const matLine = new LineMaterial({
-      color: 0x26559b,
+    this.matLine = new LineMaterial({
+      color: this.lineColor,
       linewidth: 3, // in world units with size attenuation, pixels otherwise
       dashed: false,
       alphaToCoverage: true,
     });
-    matLine.resolution = new THREE.Vector2(this.scene.width, this.scene.height);
-    const demoLine = new LinePoints(demoData, 2, matLine);
-    this.scene.scene.add(demoLine);
+    this.matLine.resolution = new THREE.Vector2(
+      this.scene.width,
+      this.scene.height
+    );
   };
 
   onPointerMove = (e) => {
@@ -115,15 +110,20 @@ export default class Player {
     // this.floorplanControls.enabled = false;
   };
   onPointerUp = (e) => {
-    console.log("last Line dir", this.drawLine);
-    // this.renderLines.push(this.drawLine);
-    const points = this.getPostionsFromDrawLine();
-    console.log("last Line-wPos", points);
-
+    // console.log("last Line-wPos", points);
     this.pointerup = convertScreenToNDC(e, this.scene.domElement);
     this.drawing = false;
     this.floorplanControls.enabled = true;
     this.startObj = null;
+
+    if (this.drawLine) {
+      console.log("last Line", this.drawLine.userData);
+      const points = this.drawLine.userData;
+      const finishLine = new LinePoints(points, 0, this.matLine);
+      this.renderLines.push(points);
+      this.scene.scene.add(finishLine);
+      console.log("this.touchImg", this.touchImg);
+    }
   };
 
   getPostionsFromDrawLine() {
@@ -186,10 +186,8 @@ export default class Player {
     e.unproject(this.orthCamera);
     s.y = 5;
     e.y = 5;
-
-    // console.log(s)
     const matLine = new LineMaterial({
-      color: 0x26559b,
+      color: this.lineColor,
       linewidth: 3, // in world units with size attenuation, pixels otherwise
       dashed: false,
       alphaToCoverage: true,

src/view/case/photos/index.vue

@@ -100,8 +100,12 @@ const changeList = (list) => {
   newlist.value = newList;
   const arr = []
   newList.map(i => arr.push(JSON.parse(JSON.stringify(i))))
-  if (scene) scene.load(arr)
-  console.log("changeList", arr);
+  const type = sortType.value ? 2 : 1
+  if (scene) {
+    scene.load(arr, type)
+    console.log("changeList", arr, type);
+  }
+
 };
 const renderCanvas = () => {
   const canvas = document.getElementById('canvas')