Three.js场景内物体拖拽边界限制问题求助

Hey there, let's fix that frustrating drag boundary issue for your shelf in the 3D room! The core problems with your current approach are that the raycast-based check is triggering too late, and once the shelf slips outside, it locks you out of dragging it back. Let's replace that with a reliable, real-time boundary clamp system.

First, Let's Diagnose the Existing Issues #

• Your raycast logic only allows movement if all four directions detect walls and are over 10 units away. This means once the shelf partially exits the room, the raycasts fail, setting oktomove to false and making the shelf un-draggable.
• You're not actively limiting the shelf's position to stay inside the room—you're just relying on a "move allowed" switch that gets flipped off at the worst time.

Step-by-Step Solution #

1. Define Your Room's Exact Boundaries

First, set clear axis-aligned bounds for your room (adjust these values to match your actual scene dimensions):

// Replace with your room's real min/max coordinates
const roomBounds = {
  minX: -6,  // Left wall X position
  maxX: 6,   // Right wall X position
  minZ: -6,  // Back wall Z position
  maxZ: 6    // Front wall Z position
};

2. Rewrite the Mouse Move Logic to Clamp Position

Instead of raycasting walls, calculate the shelf's world-space bounding box and force its position to stay inside the room. Update your onMouseMove code:

if (this.oktomove) {
  // Calculate initial target position from mouse input
  let targetX = this.intersection.sub(this.offsetControls).x;
  let targetZ = this.intersection.z;
  let targetY = (this.selected.name !== "door" && this.selected.name !== "regal") 
    ? this.intersection.y 
    : 0;

  // Update the shelf's helper bounding box to get accurate world dimensions
  this.selectedHelper.update();
  const shelfWorldBB = this.selectedHelper.geometry.boundingBox.clone();
  shelfWorldBB.applyMatrix4(this.selected.matrixWorld);

  // Calculate half-sizes to keep the shelf fully inside the room
  const halfWidth = shelfWorldBB.getSize().x / 2;
  const halfDepth = shelfWorldBB.getSize().z / 2;

  // Clamp X position: ensure left/right edges don't cross room walls
  const clampedX = Math.max(
    roomBounds.minX + halfWidth,
    Math.min(targetX, roomBounds.maxX - halfWidth)
  );

  // Clamp Z position: ensure front/back edges don't cross room walls
  const clampedZ = Math.max(
    roomBounds.minZ + halfDepth,
    Math.min(targetZ, roomBounds.maxZ - halfDepth)
  );

  // Apply the clamped, valid position to the shelf
  this.selected.position.x = clampedX;
  this.selected.position.z = clampedZ;
  this.selected.position.y = targetY;
}

3. Remove the Broken Raycast Permission Logic

Delete this entire block from onMouseMove—it's the reason your shelf gets stuck outside:

// DELETE THIS CODE BLOCK
if (this.intersectionLeft.length > 0 && this.intersectionRight.length > 0 && this.intersectionFront.length > 0 && this.intersectionBack.length > 0) {
  if (this.intersectionLeft[0].distance >= 10 || this.intersectionRight[0].distance >= 10 || this.intersectionFront[0].distance >= 10 || this.intersectionBack[0].distance >= 10) {
    this.oktomove = true;
  }
} else {
  console.log("drauflen")
  this.oktomove = false;
}

4. Fix Drag State Management

Add a onMouseUp event to properly end the drag state and re-enable orbit controls:

onMouseUp() {
  this.oktomove = false;
  this.orbitControl.enabled = true;
  
  // Clean up the helper when done dragging
  if (this.selectedHelper) {
    this.scene.remove(this.selectedHelper);
    this.selectedHelper = null;
  }
}

And keep this.oktomove = true; in your onMouseDown—we want to allow dragging for the entire duration the mouse is pressed, regardless of the shelf's position.

5. Simplify Shelf Selection (Optional)

Your nested parent-checking logic can be cleaned up with a loop:

// Find the top-level "regal" parent
let selectedObject = intersectRegal[intersectRegal.length - 1].object;
while (selectedObject.parent && selectedObject.parent.name !== "regal") {
  selectedObject = selectedObject.parent;
}
this.selected = selectedObject.parent;

Why This Works #

• Real-time clamping: The shelf will never cross the room boundaries—we calculate exactly where it can sit to stay fully inside.
• Continuous drag control: You can always drag the shelf, even when it's pressed up against a wall, so you never get stuck with an un-movable object.
• Simpler logic: No more relying on finicky raycast checks that fail when the shelf is partially outside.

内容的提问来源于stack exchange，提问作者EnginO