add restriction for moving

src/js/viewer/ViewerPanoAPI.js

@@ -218,6 +218,11 @@ export class ViewerPanoAPI {
     }
 
     onMouseMove(event){
+        // get depth data 
+        const raycaster = this.getRaycaster(event);
+        const distance = this.depthAtPointer(event);
+        const cursorLocation = raycaster.ray.origin.addScaledVector(raycaster.ray.direction, distance);
+
         // get cursor data
         const currentPos = this.viewerAPI.image.currentImage.pos;
         const newLocalPos = this.getCursorLocation(event);
@@ -236,10 +241,20 @@ export class ViewerPanoAPI {
             }
         });
 
+        // limit distance to current mesh
+        const bestLocalPos = this.viewerAPI.toLocal(this.bestImg.pos);
+        const [dx, dy] = [this.camera.position.x - bestLocalPos.x, this.camera.position.y - bestLocalPos.y];
+        const currDistance = Math.sqrt(dx * dx + dy * dy);
+        const [deepx, deepy] = [this.camera.position.x - cursorLocation.x, this.camera.position.y - cursorLocation.y]
+        const currDeepDistance = Math.sqrt(deepx * deepx + deepy * deepy);
+
+        // difference between "camera to img" and "camera to raycaster"
+        const diff = Math.abs(currDistance-currDeepDistance)
+
         // avoid duplication
-        // if the nearest image of mouse position is not the same as the previous one
+        // if the nearest image of mouse position is not the same as the previous one, and the diff is smaller than 1
         // create new mesh and remove old mesh, and save latest mesh and image
-        if (this.bestImg != this.lastBestImg) {
+        if (this.bestImg != this.lastBestImg && diff < 1) {
             var x = 0, y = 0, z = -2 
 
             // clickable meshes are the bestImg