feat(draw): save

src/assets/image/arrow.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+	<title>
+		Artboard-12
+	</title>
+	<g id="Up-3" data-name="Up">
+		<path d="M19.707,9.293l-7-7a1,1,0,0,0-1.414,0l-7,7A1,1,0,0,0,5,11H8V21a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V11h3a1,1,0,0,0,.707-1.707Z" style="fill:#e44d54" />
+	</g>
+</svg>

src/core/Scene.js

@@ -2,25 +2,24 @@ import * as THREE from "three";
 import Stats from "three/examples/jsm/libs/stats.module.js";
 import Player from "./player/Player.js";
 import BoxManager from "./box/BoxManager.js";
-import mitt from "mitt";
-
+import { Mitt } from "./mitt.js";
 const stats = new Stats();
 
-export default class Scene {
+export default class Scene extends Mitt {
   constructor(domElement) {
+    super();
     this.domElement = domElement;
     this.scene = null;
     this.renderer = null;
     this.orthCamera = null;
     this.player = null;
-    this.mitt = null;
+
     this.width = 0;
     this.height = 0;
     this.inited = false;
 
     this.init = () => {
       this.scene = new THREE.Scene();
-      this.mitt = new mitt();
       this.scene.background = new THREE.Color(0xf0f2f5);
       this.renderer = new THREE.WebGLRenderer({
         canvas: this.domElement,
@@ -49,7 +48,7 @@ export default class Scene {
       this.orthCamera.lookAt(0, 0, 0);
       // this.orthCamera.setViewOffset(this.width, this.height, 0, 0);
       this.orthCamera.updateProjectionMatrix();
-  
+
       //player
       this.player = new Player(this);
 

src/core/box/object/marker.js

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

src/core/mitt.js

@@ -0,0 +1,10 @@
+import mitt from "mitt";
+export class Mitt {
+  constructor() {
+    const emitter = mitt();
+
+    Object.keys(emitter).forEach((method) => {
+      this[method] = emitter[method];
+    });
+  }
+}

src/core/player/Player.js

@@ -56,6 +56,7 @@ export default class Player {
     if (mode === 0) {
       this.setFreeMode();
     }
+    this.scene.emit("mode", this.mode);
   }
 
   removeMarker() {
@@ -74,7 +75,7 @@ export default class Player {
   }
 
   setEditMode() {
-    this.floorplanControls.enablePan = false;
+    this.floorplanControls.enablePan = true;
     this.floorplanControls.mouseButtons = {
       LEFT: THREE.MOUSE.ROTATE,
       MIDDLE: THREE.MOUSE.DOLLY,
@@ -109,7 +110,7 @@ export default class Player {
     //   MIDDLE: THREE.MOUSE.DOLLY,
     //   RIGHT: THREE.MOUSE.PAN
     // }
-    this.setFreeMode();
+    this.setMode(0);
     this.floorplanControls.enableRotate = false;
     this.raycaster = new THREE.Raycaster();
     this.onBindEvent();
@@ -189,8 +190,7 @@ export default class Player {
         console.log("intersects", intersects);
         if (intersects[0]) {
           this.drawing = false;
-          this.renderMarkers.push()
-
+          this.renderMarkers.push();
         }
       }
     }

src/view/case/photos/index.vue

@@ -25,7 +25,7 @@
         <el-button @click="handleMark">标注方向</el-button>
         <el-button @click="handleLine">标注连线</el-button>
         <el-button @click="handleSave">保存</el-button>
-        <el-button @click="handleFree">查看</el-button>
+        <el-button @click="handleFree" v-if="isShowExitEdit">退出</el-button>
       </div>
       <swiper
         class="swiper"
@@ -65,7 +65,7 @@
 </template>
 
 <script setup>
-import { onMounted, ref } from "vue";
+import { onMounted, ref, computed } from "vue";
 import { Menu, FullScreen } from "@element-plus/icons-vue";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import "swiper/css";
@@ -80,6 +80,8 @@ const swiperRef = ref(null);
 const childRef = ref(null);
 const caseId = ref(props.caseId);
 const sortType = ref(false);
+const drawMode = ref(0);
+const isShowExitEdit = computed(() => drawMode.value > 0);
 let scene = null;
 
 const addCaseFileHandler = async () => {
@@ -127,6 +129,10 @@ const renderCanvas = () => {
   scene = new Scene(canvas);
   scene.init();
   window.scene = scene;
+  scene.on("mode", (mode) => {
+    console.warn("mode", mode);
+    drawMode.value = mode;
+  });
 };
 const onSwiper = (swiper) => {
   console.log("onSwiper");