feat(draw): save

src/core/player/Player.js

@@ -40,7 +40,6 @@ export default class Player {
     this.renderLines = [];
     this.renderMarkers = [];
     this.activeEdges = [];
-    this.markers = [];
     this.matLine = null;
     this.lineColor = 0xe44d54;
     // 1是画线，2是标方向
@@ -115,9 +114,6 @@ export default class Player {
     this.raycaster = new THREE.Raycaster();
     this.onBindEvent();
     this.inited = true;
-
-    console.log("this.floorplanControls", this.scene.mitt);
-
     this.matLine = new LineMaterial({
       color: this.lineColor,
       linewidth: 3, // in world units with size attenuation, pixels otherwise
@@ -132,7 +128,6 @@ export default class Player {
 
   onPointerMove = (e) => {
     if (!this.drawing) return;
-
     this.pointermove = convertScreenToNDC(e, this.scene.domElement);
     if (this.mode === 1) {
       this.raycaster.setFromCamera(this.pointermove, this.orthCamera);
@@ -141,7 +136,6 @@ export default class Player {
       //   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];
@@ -149,11 +143,13 @@ export default class Player {
       }
     }
     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);
+      if (this.marker) {
+        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);
+      }
     }
   };
 
@@ -189,12 +185,33 @@ export default class Player {
         const intersects = this.raycaster.intersectObjects(intersectArr, false);
         console.log("intersects", intersects);
         if (intersects[0]) {
-          this.drawing = false;
+          // this.drawing = false;
           const imageId = intersects[0].object.userData;
+
+          let lasPos = new THREE.Vector3(
+            this.pointerdown.x,
+            this.pointerdown.y,
+            -1
+          );
+          lasPos.unproject(this.orthCamera);
+          lasPos.y = 5;
+          const marker = new Marker(lasPos);
+
           const activeMarkeritem = {
             id: imageId,
-            point: this.pointermove.toArray(),
+            point: lasPos.toArray(),
           };
+          const exist = this.renderMarkers.find((item) => item.id === imageId);
+
+          if (!exist) {
+            this.scene.scene.add(marker);
+            this.renderMarkers.push(activeMarkeritem);
+            this.scene.scene.remove(this.marker);
+            this.marker = null;
+          } else {
+            this.scene.emit("markerExist");
+          }
+
           console.log("activeMarkeritem", activeMarkeritem);
         }
       }
@@ -330,6 +347,7 @@ export default class Player {
     this.activeEdge.visible = true;
     this.buildLine();
   };
+
   insertActiveEdge(item) {
     const exist = this.activeEdges.find((s) => item.id === s.id);
     if (exist) {
@@ -339,7 +357,14 @@ export default class Player {
     }
   }
 
-
+  insertActiveMarker(item) {
+    const exist = this.activeEdges.find((s) => item.id === s.id);
+    if (exist) {
+      exist.dir = [...new Set([...exist.dir, ...item.dir])];
+    } else {
+      this.activeEdges.push(item);
+    }
+  }
   showAllActiveEdges() {
     if (this.inited) {
       let imgList = this.scene.boxManager.imgList;

src/view/case/photos/index.vue

@@ -74,6 +74,7 @@ import { addCaseImgFile } from "../quisk";
 import { saveCaseImgTagData } from "@/store/case";
 import Scene from "@/core/Scene.js";
 import draggable from "./draggable.vue";
+import { ElMessageBox } from "element-plus";
 const props = defineProps({ caseId: Number });
 const newlist = ref([]);
 const swiperRef = ref(null);
@@ -82,6 +83,8 @@ const caseId = ref(props.caseId);
 const sortType = ref(false);
 const drawMode = ref(0);
 const isShowExitEdit = computed(() => drawMode.value > 0);
+import { ElMessage } from "element-plus";
+
 let scene = null;
 
 const addCaseFileHandler = async () => {
@@ -133,6 +136,9 @@ const renderCanvas = () => {
     console.warn("mode", mode);
     drawMode.value = mode;
   });
+  scene.on("markerExist", () => {
+    ElMessage.error("该案件已有方向标注！");
+  });
 };
 const onSwiper = (swiper) => {
   console.log("onSwiper");