Drag boxGeometry using div R3F

Questions
1

I want to make a drag system in which when the user clicks on a geometry a div appears and when the div is dragged the object drags with it. So far I have made the div to drag the object with it here’s the CodeSandbox if anyone is interested:

https://codesandbox.io/p/sandbox/dragging-html-5g6nvk

The only issue I am facing now is that the dragging gets inverted if the camera is rotated, if anyone can help me regarding this I’ll be very grateful.

@mjurczyk any tips regarding this?

2

You can use the raycaster on the ground plane to get the click position in world space, and use that to compute the movement delta, by subtracting the current hit.point from the previous hit.point, and adding that to your object.
Trying to translate the div position into a worldspace drag amount is possible, but it’s unnecesarily difficult when you can just use the raycaster.

3

Here’s someone with a similar problem:

4

The issue is that I know how to use the raycaster to get the intersection position but in the code of useDrag the event is returning the functions and properties of the div rather than that of the boxGeometry. If the event returns the function and properties of the boxGeometry I can easily utilise the .ray property to calculate the intersection and set the new position.

  const bind = useDrag(({ offset: [x, y], dragging, event }) => {
    event.stopPropagation();
    setPosition([x / 100, 0, y / 100]);
    setActive(dragging);
  });

If there is someway that I can get the event here of the boxGeometry I can easily use the .ray function and then do this:

const bind = useDrag(({ active, event }) => {
    event.stopPropagation();

    const floorPlane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);
    let planeIntersectPoint = new THREE.Vector3();
    console.log(ee);
    event.ray.intersectPlane(floorPlane, planeIntersectPoint);
    if (active) {
      const newPositionX = planeIntersectPoint.x;

      const newPositionZ = planeIntersectPoint.z;
      setBoxPosition([newPositionX, 0, newPositionZ]);
    }
  });