Hey there! Let's work through this drag control issue with your text geometries in Autodesk Forge Viewer. I've dealt with similar conflicts between Forge's built-in interactions and Three.js controls before, so here's what's likely going wrong and how to fix it:

Why Directly Using Three.js DragControls Fails #

Forge Viewer wraps and customizes Three.js's core systems—especially mouse event handling and raycasting. When you drop in vanilla DragControls, it clashes with Viewer's own navigation logic:

• Viewer intercepts mouse events first, so DragControls might never get the click/hover signals it needs
• The camera and scene references used by DragControls might not match what Viewer is actually using
• Viewer's rendering pipeline needs explicit updates when custom geometry moves

Step-by-Step Fix #

Let's walk through a reliable implementation:

1. Use Viewer's Built-in Three.js Instance
   Don't load a separate Three.js library—use the one bundled with Viewer to avoid version mismatches:

   const THREE = Autodesk.Viewing.Private.Threejs;
   

2. Initialize DragControls with Correct References
   Point DragControls to Viewer's actual camera and canvas, and pass your text meshes as the target objects:

   const textMeshes = [yourTextMesh]; // Replace with your text geometry array
   const dragControls = new THREE.DragControls(
     textMeshes,
     viewer.impl.camera,
     viewer.impl.canvas
   );
   

3. Prevent Event Conflicts
   Stop Viewer from hijacking mouse events when clicking on your text meshes:

   viewer.canvas.addEventListener('mousedown', (e) => {
     const raycaster = dragControls.raycaster;
     const mouse = dragControls.mouse;
     // Calculate normalized mouse coordinates relative to the canvas
     mouse.x = (e.clientX / viewer.canvas.clientWidth) * 2 - 1;
     mouse.y = -(e.clientY / viewer.canvas.clientHeight) * 2 + 1;
   
     raycaster.setFromCamera(mouse, viewer.impl.camera);
     const intersects = raycaster.intersectObjects(textMeshes);
   
     if (intersects.length > 0) {
       e.stopPropagation(); // Block Viewer from handling this click
     }
   }, true);
   

4. Lock Viewer Navigation During Drag
   Prevent camera panning/zooming while dragging your text:

   dragControls.addEventListener('dragstart', () => {
     viewer.navigation.setIsLocked(true);
   });
   
   dragControls.addEventListener('dragend', () => {
     viewer.navigation.setIsLocked(false);
     viewer.impl.sceneUpdated(true); // Force Viewer to render the new position
   });
   

5. Optional: Configure Drag Behavior
   Tweak the controls to fit your needs—like restricting drag axes or using local/world space:

   dragControls.transformGroup = true; // Enable dragging multiple meshes as a group
   dragControls.space = 'world'; // Use world coordinates instead of local mesh space
   // Limit drag to XY plane if needed
   dragControls.addEventListener('drag', (event) => {
     event.object.position.z = 0; // Lock Z-axis position
   });
   

Key Notes #

• If your text meshes are in an overlay scene (created with viewer.impl.createOverlayScene()), make sure DragControls is checking that scene for intersections.
• Always test with Viewer's built-in Three.js—external versions will cause unexpected bugs.
• Check the browser console for errors like missing camera references or raycasting failures if you still run into issues.

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