feat(arrow): fix arrow

src/core/box/object/Line.js

@@ -16,7 +16,7 @@ let m = new THREE.MeshBasicMaterial({
   color: 0x26559b,
   transparent: true,
 });
-export default class TouchEdge extends Line2 {
+export default class Line extends Line2 {
   constructor(startPoint, endPoint, endEdge, matLine) {
     let points;
     let g = new THREE.PlaneGeometry(0.1, 0.1);
@@ -24,7 +24,7 @@ export default class TouchEdge extends Line2 {
     let cross = new THREE.Mesh(g, m);
 
     if (endEdge.name === 0) {
-      //top
+      // top
       let a = startPoint.clone();
       let b = new THREE.Vector3(
         startPoint.x,
@@ -41,8 +41,8 @@ export default class TouchEdge extends Line2 {
         endPoint.y,
         endEdge.y + endEdge.parent.parent.position.z
       );
-      cross.rotation.y = -Math.PI / 2;
       cross.position.copy(d);
+      cross.rotation.y = -Math.PI / 2;
       cross.position.z -= 0.02;
 
       points = pointsToArray([a, b, c, d]);
@@ -74,6 +74,7 @@ export default class TouchEdge 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,
@@ -96,6 +97,7 @@ export default class TouchEdge extends Line2 {
       points = pointsToArray([a, b, c, d]);
     } else {
       //right
+
       let a = startPoint.clone();
       let b = new THREE.Vector3(
         (startPoint.x + endPoint.x) / 2,
@@ -122,8 +124,9 @@ export default class TouchEdge extends Line2 {
     }
 
     const geometry = new LineGeometry();
+    console.log("points", points);
+    // console.log("endEdge", endEdge.name);
     geometry.setPositions(points);
-
     super(geometry, matLine);
     this.scale.set(1, 1, 1);
     this.position.y += 0.5;

src/core/box/object/LinePoints.js

@@ -0,0 +1,64 @@
+import * as THREE from "three";
+import { Line2 } from "three/examples/jsm/lines/Line2.js";
+import { LineGeometry } from "three/examples/jsm/lines/LineGeometry.js";
+import gotoPic from "@/assets/image/goto.png";
+const offset = 0.25;
+
+function pointsToArray(arr) {
+  let res = [];
+  arr.forEach((i) => {
+    res = res.concat(i.toArray());
+  });
+  return res;
+}
+let m = new THREE.MeshBasicMaterial({
+  map: new THREE.TextureLoader().load(gotoPic),
+  color: 0x26559b,
+  transparent: true,
+});
+export default class LinePoints extends Line2 {
+  constructor(points, dir, matLine) {
+    let g = new THREE.PlaneGeometry(0.1, 0.1);
+    g.rotateX(-Math.PI / 2);
+    let cross = new THREE.Mesh(g, m);
+    let a = new THREE.Vector3(points[0], points[1], points[2]);
+    let b = new THREE.Vector3(points[3], points[4], points[5]);
+    let c = new THREE.Vector3(points[6], points[7], points[8]);
+    let d = new THREE.Vector3(points[9], points[10], points[11]);
+    let diff;
+    switch (dir) {
+      case 0:
+        //top
+        cross.rotation.y = -Math.PI / 2;
+        cross.position.copy(d);
+        break;
+      case 1:
+        //left
+        diff = c.x < d.x;
+        cross.rotation.y = diff ? 0 : -Math.PI;
+        diff ? (cross.position.x -= 0.02) : (cross.position.x += 0.02);
+
+        break;
+      case 2:
+        //bottom
+        cross.position.copy(d);
+        cross.rotation.y = Math.PI / 2;
+        cross.position.z += 0.02;
+        break;
+      case 3:
+        //right
+        diff = c.x < d.x;
+        cross.position.copy(d);
+        cross.rotation.y = diff ? 0 : Math.PI;
+        diff ? (cross.position.x -= 0.02) : (cross.position.x += 0.02);
+        break;
+    }
+    const geometry = new LineGeometry();
+    console.log("points", points);
+    geometry.setPositions(points);
+    super(geometry, matLine);
+    this.scale.set(1, 1, 1);
+    this.position.y += 0.5;
+    this.add(cross);
+  }
+}

src/core/player/Player.js

@@ -3,6 +3,7 @@ import * as THREE from "three";
 import FloorplanControls from "../controls/FloorplanControls.js";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 import Line from "../box/object/Line";
+import LinePoints from "../box/object/LinePoints.js";
 import { LineMaterial } from "three/examples/jsm/lines/LineMaterial.js";
 
 const convertScreenToNDC = function (event, domElement) {
@@ -39,7 +40,6 @@ export default class Player {
   init = () => {
     // //floorplanControls
     // this.floorplanControls = new FloorplanControls(this.orthCamera, this.scene.domElement, this);
-
     this.floorplanControls = new OrbitControls(
       this.orthCamera,
       this.scene.domElement
@@ -59,6 +59,26 @@ export default class Player {
     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,
+      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);
   };
 
   onPointerMove = (e) => {
@@ -95,14 +115,30 @@ export default class Player {
     // this.floorplanControls.enabled = false;
   };
   onPointerUp = (e) => {
+    console.log("last Line dir", this.drawLine);
     // this.renderLines.push(this.drawLine);
-    console.log("last Line", this.drawLine);
+    const points = this.getPostionsFromDrawLine();
+    console.log("last Line-wPos", points);
+
     this.pointerup = convertScreenToNDC(e, this.scene.domElement);
     this.drawing = false;
     this.floorplanControls.enabled = true;
     this.startObj = null;
   };
 
+  getPostionsFromDrawLine() {
+    if (!this.drawLine) {
+      return [];
+    }
+    let gp = this.drawLine.geometry.attributes.position;
+    let wPos = [];
+    for (let i = 0; i < gp.count; i++) {
+      let p = new THREE.Vector3().fromBufferAttribute(gp, i); // set p from `position`
+      this.drawLine.localToWorld(p); // p has wordl coords
+      wPos.push(p);
+    }
+    return wPos;
+  }
   Listener = {
     onPointerDown: this.onPointerDown.bind(this),
     onPointerMove: this.onPointerMove.bind(this),