feat: 增加拖动限制

src/core/Scene.js

@@ -20,6 +20,7 @@ export default class Scene extends Mitt {
     this.scene = null;
     this.renderer = null;
     this.orthCamera = null;
+    this.camera = null;
     this.player = null;
     this.sceneType = 1;
     this.width = 0;
@@ -56,6 +57,13 @@ export default class Scene extends Mitt {
         this.defaultZoom
       );
 
+      this.camera = new THREE.PerspectiveCamera(
+        70,
+        this.domElement.clientWidth / this.domElement.clientHeight,
+        0.1,
+        1000
+      );
+
       this.orthCamera = new THREE.OrthographicCamera(
         -this.width / 2,
         this.width / 2,
@@ -142,7 +150,16 @@ export default class Scene extends Mitt {
     this.scene.add(light);
   };
 
-  setCamera = () => {};
+  setCamera = () => {
+    // const object = this.boxManager.model;
+    // const boundingBox = new THREE.Box3().setFromObject(object);
+    // let size = boundingBox.getSize(new THREE.Vector3());
+    // const fov = this.camera.fov * (Math.PI / 180);
+    // const fovh = 2 * Math.atan(Math.tan(fov / 2) * this.camera.aspect);
+    // let dx = Math.abs(size.x / 2 / Math.tan(fovh / 2));
+    // let dz = Math.abs(size.z / 2 / Math.tan(fov / 2));
+    // this.orthCamera.zoom = this.floorplanZoom;
+  };
 
   toHorizontal = () => {};
 
@@ -324,19 +341,7 @@ export default class Scene extends Mitt {
     // console.log("height", height);
   }
 
-  center() {
-    const center = new THREE.Vector3();
-    const boundingBox = new THREE.Box3().setFromObject(this.boxManager.model);
-    boundingBox.getCenter(center);
-    const helper = new THREE.BoxHelper();
-    helper.setFromObject(this.boxManager.model);
-    helper.material.color.set(0xff0000);
-
-    console.log("obj", helper, center);
-    // const box = new THREE.BoxHelper(object, 0xffff00);
-    this.scene.add(helper);
-    this.boxManager.model.position.x -= center.x;
-  }
+
 
   onBindEvent = () => {
     window.addEventListener("resize", this.onResize, false);

src/core/box/BoxManager.js

@@ -3,6 +3,10 @@ import HorizontalBox from "./HorizontalBox";
 import VerticalBox from "./VerticalBox";
 import SimpleLabel from "./object/SimpleLabel";
 
+// import { Line2 } from "three/examples/jsm/lines/Line2.js";
+// import { LineGeometry } from "three/examples/jsm/lines/LineGeometry.js";
+// import { LineMaterial } from "three/examples/jsm/lines/LineMaterial.js";
+
 export default class BoxManager {
   constructor(scene) {
     this.scene = scene;
@@ -11,6 +15,7 @@ export default class BoxManager {
     this.model = new THREE.Group();
     this.model.name = "boxManager";
     this.maps = {};
+    this.obb = new THREE.Box3();
     this.imgList = [];
     this.opacity = 1;
 
@@ -37,18 +42,21 @@ export default class BoxManager {
     // this.model.position.y += 0.3;
     // this.model.visible =false;
     this.scene.scene.add(this.model);
+    this.setArea();
     // console.log("this.scene.scene", this.scene.scene);
   };
 
   onBindEvent = () => {
     const _this = this;
-    this.loadingManager.onStart = function (url, itemsLoaded, itemsTotal) {
+    this.loadingManager.onStart = (url, itemsLoaded, itemsTotal) => {
       // console.log( 'Started loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );
       console.log("loading_manager: loading...");
+ 
     };
     this.loadingManager.onLoad = () => {
       console.log("loading_manager: loading complete!");
       this.scene.emit("loaded");
+
     };
     this.loadingManager.onProgress = function (url, itemsLoaded, itemsTotal) {
       // console.log( 'Loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );
@@ -57,7 +65,25 @@ export default class BoxManager {
       console.error("loading_manager: error loading " + url);
     };
   };
+  setArea() {
+    const object = this.model;
+    const boundingBox = new THREE.Box3().setFromObject(object);
+    // boundingBox.expandByScalar(1.3);
+    const size = boundingBox.getSize(new THREE.Vector3());
+    this.obb = boundingBox;
+    console.log("boundingBox-size", size);
+    // const topLine = [
+    //   -size.x,
+    //   0,
+    //   (size.z + 0.3) / -2,
+    //   size.x + 0.1,
+    //   0,
+    //   (size.z + 0.3) / -2,
+    // ];
 
+    // helper.scale.set(1.2, 1.2, 1.2);
+    // helper.update();
+  }
   setVisible = (val) => {
     if (!this.model) return;
     this.model.visible = val;

src/core/player/Player.js

@@ -234,7 +234,10 @@ export default class Player {
         let pos = new THREE.Vector3(this.pointermove.x, this.pointermove.y, -1);
         pos.unproject(this.orthCamera);
         pos.y = 5;
-        this.symbol.position.copy(pos);
+        const clamp = new THREE.Vector3();
+        this.scene.boxManager.obb.clampPoint(pos, clamp);
+        clamp.y = 5;
+        this.symbol.position.copy(clamp);
       }
     }
 
@@ -244,14 +247,19 @@ export default class Player {
         let pos = new THREE.Vector3(this.pointermove.x, this.pointermove.y, -1);
         pos.unproject(this.orthCamera);
         pos.y = 5;
-        this.text.position.copy(pos);
-        this.text.userData.pos = pos.toArray();
+
+        const clamp = new THREE.Vector3();
+        this.scene.boxManager.obb.clampPoint(pos, clamp);
+        clamp.y = 5;
+        this.text.position.copy(clamp);
+        this.text.userData.pos = clamp.toArray();
       }
     }
   };
 
   onPointerDown = (e) => {
     console.log("start draw");
+
     this.pointerdown = convertScreenToNDC(e, this.scene.domElement);
 
     if (this.mode === 0) {
@@ -429,8 +437,13 @@ export default class Player {
         let pos = new THREE.Vector3(this.pointerup.x, this.pointerup.y, -1);
         pos.unproject(this.orthCamera);
         pos.y = 5;
-        this.text.position.copy(pos);
-        this.text.userData.pos = pos.toArray();
+        const clamp = new THREE.Vector3();
+        this.scene.boxManager.obb.clampPoint(pos, clamp);
+        clamp.y = 5;
+        console.log("pos", pos);
+        console.log("clamp", clamp);
+        this.text.position.copy(clamp);
+        this.text.userData.pos = clamp.toArray();
         const activeTextItem = this.text.userData;
         this.drawing = false;
         console.log("activeTextItem", activeTextItem);