Three.js中实现scene1与scene2间对象拖放的技术咨询

Got it, let's tackle this cross-scene drag issue! The core problem is that default Three.js drag tools (like DragControls) are locked to a single scene and camera. To move objects between scene1 and scene2, we need to handle the drag manually—tracking mouse position, detecting scene boundaries, and transferring the object between scenes when needed.

Key Steps to Implement #

• Track global drag state: Keep variables to track if we're dragging, which object is being moved, and the mouse's screen position.
• Coordinate conversion: Convert mouse screen coordinates to world coordinates for both scenes, since each scene has its own camera.
• Boundary detection: Check when the mouse crosses into the other scene's render area to trigger the object transfer.
• Manual position updating: Update the dragged object's position in whichever scene it's currently in.

Full Code Example #

Let's assume you're rendering both scenes side-by-side on a single canvas (adjust the viewport logic if your setup is different):

// Initialize core Three.js elements
const scene1 = new THREE.Scene();
scene1.background = new THREE.Color(0xf0f0f0); // Light gray for scene1
const scene2 = new THREE.Scene();
scene2.background = new THREE.Color(0xe0e0e0); // Slightly darker gray for scene2

// Cameras for each scene (adjust aspect ratio based on your layout)
const camera1 = new THREE.PerspectiveCamera(75, window.innerWidth/2 / window.innerHeight, 0.1, 1000);
const camera2 = new THREE.PerspectiveCamera(75, window.innerWidth/2 / window.innerHeight, 0.1, 1000);
camera1.position.z = 5;
camera2.position.z = 5;

// Single renderer for both scenes
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Create a draggable cube in scene1
const draggableCube = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshBasicMaterial({ color: 0xff4444 })
);
scene1.add(draggableCube);

// Drag state variables
let isDragging = false;
let draggedObject = null;
const mouse = new THREE.Vector2();
const raycaster = new THREE.Raycaster();
// Plane to calculate drag position (we'll use a flat plane at z=0)
const dragPlane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
const intersectionPoint = new THREE.Vector3();

// Mouse down: Start drag if we click the cube in scene1
renderer.domElement.addEventListener('mousedown', (e) => {
  // Convert mouse position to normalized device coordinates for scene1
  mouse.x = ((e.clientX / (window.innerWidth/2)) * 2) - 1;
  mouse.y = -((e.clientY / window.innerHeight) * 2) + 1;

  raycaster.setFromCamera(mouse, camera1);
  const hits = raycaster.intersectObject(draggableCube);
  
  if (hits.length > 0) {
    isDragging = true;
    draggedObject = draggableCube;
  }
});

// Mouse move: Handle drag and cross-scene transfer
renderer.domElement.addEventListener('mousemove', (e) => {
  if (!isDragging || !draggedObject) return;

  // Check if mouse is in scene2's area (right half of the canvas)
  const inScene2 = e.clientX > window.innerWidth / 2;

  if (inScene2) {
    // Convert mouse to scene2's normalized coordinates
    mouse.x = (((e.clientX - window.innerWidth/2) / (window.innerWidth/2)) * 2) - 1;
    mouse.y = -((e.clientY / window.innerHeight) * 2) + 1;

    raycaster.setFromCamera(mouse, camera2);
    raycaster.ray.intersectPlane(dragPlane, intersectionPoint);

    // Transfer object to scene2 if it's still in scene1
    if (draggedObject.parent === scene1) {
      scene1.remove(draggedObject);
      scene2.add(draggedObject);
    }

    draggedObject.position.copy(intersectionPoint);
  } else {
    // Convert mouse to scene1's normalized coordinates
    mouse.x = ((e.clientX / (window.innerWidth/2)) * 2) - 1;
    mouse.y = -((e.clientY / window.innerHeight) * 2) + 1;

    raycaster.setFromCamera(mouse, camera1);
    raycaster.ray.intersectPlane(dragPlane, intersectionPoint);

    // Transfer object back to scene1 if it's in scene2
    if (draggedObject.parent === scene2) {
      scene2.remove(draggedObject);
      scene1.add(draggedObject);
    }

    draggedObject.position.copy(intersectionPoint);
  }
});

// Mouse up: End drag
renderer.domElement.addEventListener('mouseup', () => {
  isDragging = false;
  draggedObject = null;
});

// Render loop: Draw both scenes in their viewports
function animate() {
  requestAnimationFrame(animate);

  // Render scene1 to left half of canvas
  renderer.setViewport(0, 0, window.innerWidth/2, window.innerHeight);
  renderer.render(scene1, camera1);

  // Render scene2 to right half of canvas
  renderer.setViewport(window.innerWidth/2, 0, window.innerWidth/2, window.innerHeight);
  renderer.render(scene2, camera2);
}
animate();

Important Notes #

• Adjust layout logic: If your scenes are not side-by-side (e.g., top/bottom, separate canvases), modify the inScene2 check to match your actual layout. For separate canvases, listen for mousemove on the document instead of a single canvas.
• DragControls alternative: If you were using THREE.DragControls, you'll need to disable its default behavior and use this manual approach—since DragControls can't handle multiple scenes out of the box.
• Resource sharing: Objects (meshes, materials, geometries) can be safely moved between scenes without duplicating resources; we're just changing their parent node.

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