feat(draw): model save

src/core/box/object/marker.js

@@ -0,0 +1,28 @@
+import * as THREE from "three";
+import gotoPic from "@/assets/image/goto.png";
+const m = new THREE.MeshBasicMaterial({
+  map: new THREE.TextureLoader().load(gotoPic),
+  color: 0x26559b,
+  transparent: true,
+});
+
+export default class Marker extends THREE.Mesh {
+  constructor(startPoint) {
+    const g = new THREE.PlaneGeometry(0.3, 0.3);
+    g.rotateX(-Math.PI / 2);
+    super(g, m);
+    const a = startPoint.clone();
+    this.position.copy(a);
+
+    this.rotation.y = Math.PI / 2;
+    this.position.y = 5;
+    this.position.z -= 0.02;
+
+    this.visible = true;
+    this.scale.set(1, 1, 1);
+    this.position.y += 0.5;
+    this.name = "marker_";
+    this.renderOrder = 1000;
+    console.log(this, this.position);
+  }
+}

src/core/player/Player.js

@@ -5,6 +5,7 @@ import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 import { TrackballControls } from "three/examples/jsm/controls/TrackballControls.js";
 import Line from "../box/object/Line";
 import LinePoints from "../box/object/LinePoints.js";
+import Marker from "../box/object/marker.js";
 import { LineMaterial } from "three/examples/jsm/lines/LineMaterial.js";
 
 const convertScreenToNDC = function (event, domElement) {
@@ -25,22 +26,31 @@ export default class Player {
     this.pointerdown = new THREE.Vector2();
     this.pointerup = new THREE.Vector2();
     this.pointer = new THREE.Vector2();
+    this.markPosition = new THREE.Vector3();
 
     this.touchImg = null;
     this.activeEdge = null;
     this.drawLine = null;
     this.startObj = null;
+    this.marker = null;
     this.allowDrawing = false;
 
     this.drawing = false;
     this.inited = false;
     this.renderLines = [];
     this.activeEdges = [];
+    this.markers = [];
     this.matLine = null;
     this.lineColor = 0xe44d54;
+    // 1是画线，2是标方向
+    this.mode = 2;
     this.init();
   }
 
+  setMode(mode) {
+    this.mode = mode;
+  }
+
   init = () => {
     // //floorplanControls
     // this.floorplanControls = new FloorplanControls(
@@ -54,7 +64,7 @@ export default class Player {
     );
 
     this.floorplanControls.enablePan = true;
-    this.floorplanControls.target.set(0, 1, 0);
+    // this.floorplanControls.target.set(0, 1, 0);
     // this.floorplanControls.rotateSpeed = 0.5;
     // this.floorplanControls.panSpeed = 0.75
 
@@ -90,58 +100,89 @@ export default class Player {
 
   onPointerMove = (e) => {
     if (!this.drawing) return;
+
     this.pointermove = convertScreenToNDC(e, this.scene.domElement);
-    this.raycaster.setFromCamera(this.pointermove, this.orthCamera);
-    let intersectArr = this.scene.boxManager.imgList;
-    // if(this.startObj) {
-    //   let i = intersectArr.indexOf(this.startObj)
-    //   intersectArr.splice(i, 1)
-    // }
-    const intersects = this.raycaster.intersectObjects(intersectArr, false);
-    if (intersects[0] && intersects[0].object !== this.startObj) {
-      this.touchImg = intersects[0];
-      this.setActiveLine(this.touchImg);
+    if (this.mode === 1) {
+      this.raycaster.setFromCamera(this.pointermove, this.orthCamera);
+      let intersectArr = this.scene.boxManager.imgList;
+      // if(this.startObj) {
+      //   let i = intersectArr.indexOf(this.startObj)
+      //   intersectArr.splice(i, 1)
+      // }
+
+      const intersects = this.raycaster.intersectObjects(intersectArr, false);
+      if (intersects[0] && intersects[0].object !== this.startObj) {
+        this.touchImg = intersects[0];
+        this.setActiveLine(this.touchImg);
+      }
+    }
+    if (this.mode === 2) {
+      let pos = new THREE.Vector3(this.pointermove.x, this.pointermove.y, -1);
+      pos.unproject(this.orthCamera);
+      pos.y = 5;
+      console.log("pos", pos);
+      this.marker.position.copy(pos);
+      // console.log(this.pointermove);
     }
   };
 
   onPointerDown = (e) => {
     console.log("start draw");
     this.pointerdown = convertScreenToNDC(e, this.scene.domElement);
-    this.raycaster.setFromCamera(this.pointerdown, this.orthCamera);
-    let intersectArr = this.scene.boxManager.imgList;
-    const intersects = this.raycaster.intersectObjects(intersectArr, false);
-    console.log("intersects", intersects);
-    if (intersects[0]) {
-      this.startObj = intersects[0].object;
-      this.drawing = true;
-    } else {
-      this.startObj = null;
-      this.drawing = false;
+    if (this.mode === 1) {
+      this.raycaster.setFromCamera(this.pointerdown, this.orthCamera);
+      let intersectArr = this.scene.boxManager.imgList;
+      const intersects = this.raycaster.intersectObjects(intersectArr, false);
+      console.log("intersects", intersects);
+      if (intersects[0]) {
+        this.startObj = intersects[0].object;
+        this.drawing = true;
+      } else {
+        this.startObj = null;
+        this.drawing = false;
+      }
     }
 
+    if (this.mode === 2) {
+      if (!this.marker) {
+        let pos = new THREE.Vector3(this.pointerdown.x, this.pointerdown.y, -1);
+        pos.unproject(this.orthCamera);
+        pos.y = 5;
+        this.marker = new Marker(pos);
+        this.scene.scene.add(this.marker);
+        this.drawing = true;
+      } else {
+        this.drawing = false;
+      }
+    }
     // this.floorplanControls.enabled = false;
   };
   onPointerUp = (e) => {
-    // console.log("last Line-wPos", points);
     this.pointerup = convertScreenToNDC(e, this.scene.domElement);
-    this.drawing = false;
-    this.floorplanControls.enabled = true;
-    this.startObj = null;
+    console.log("onPointerUp", this.pointerup);
 
-    if (this.drawLine) {
-      const points = this.drawLine.userData.points;
-      const dir = this.drawLine.userData.dir;
-      const finishLine = new LinePoints(points, 0, this.matLine);
-      this.renderLines.push(points);
-      this.scene.scene.add(finishLine);
-      const imageId = this.touchImg.object.userData;
-      const activeLineItem = {
-        id: imageId,
-        dir: [dir],
-      };
-      console.log("this.touchImg", activeLineItem, points);
-      this.insertActiveEdge(activeLineItem);
-      // this.showAllActiveEdges();
+    if (this.mode === 1) {
+      this.drawing = false;
+      this.floorplanControls.enabled = true;
+      this.startObj = null;
+      if (this.drawLine) {
+        const points = this.drawLine.userData.points;
+        const dir = this.drawLine.userData.dir;
+        const finishLine = new LinePoints(points, 0, this.matLine);
+        this.renderLines.push(points);
+        this.scene.scene.add(finishLine);
+        const imageId = this.touchImg.object.userData;
+        const activeLineItem = {
+          id: imageId,
+          dir: [dir],
+        };
+        console.log("this.touchImg", activeLineItem, points);
+        this.insertActiveEdge(activeLineItem);
+        this.drawLine = null;
+      }
+    }
+    if (this.mode === 2) {
+      // this.drawing = false;
     }
   };
 

src/view/case/photos/index.vue

@@ -23,8 +23,8 @@
     <div class="right">
       <div class="tools">
         <el-button @click="handleMark">标注方向</el-button>
-        <el-button @click="handleMark">标注连线</el-button>
-        <el-button @click="handleMark">保存</el-button>
+        <el-button @click="handleLine">标注连线</el-button>
+        <el-button @click="handleSave">保存</el-button>
       </div>
       <swiper
         class="swiper"
@@ -150,6 +150,16 @@ const handleDetele = async (item) => {
 };
 const handleMark = () => {
   if (window.scene) {
+    window.scene.player.setMode(2);
+  }
+};
+const handleLine = () => {
+  if (window.scene) {
+    window.scene.player.setMode(1);
+  }
+};
+const handleSave = () => {
+  if (window.scene) {
   }
 };
 onMounted(() => {