Struggling with Dragging

[ghost]

[drcmda]

That would be very easy to do in r3f since you already have drag and drop as native pointer events but of course drag controls are also easy to implement. And at the same time this is super complex in plain three. I have demos for both but are on vacation right now. @gsimone do you know any code sandboxes?

The canvas creates a default camera, you can always and everywhere access it through useThree and useFrame. But you can also use your own of course. Check out the drei library here on our GitHub, it has simple helpers for that.

[drcmda]

Using your own camera: https://codesandbox.io/s/react-three-fiber-viewcube-py4db

Transform controls https://codesandbox.io/s/r3f-drei-transformcontrols-hc8gm

Drag (simple) https://codesandbox.io/embed/react-three-fiber-gestures-08d22?codemirror=1

Drag (complex version) https://codesandbox.io/s/r3f-lines-capture-1gkvp

[Leon-Sam]

Make sure your react-use-gesture version is on v8 not v7. The major rev to 8 now allows for out of the box usage with R3F. Source

[AChangXD]

One question I have: If multiple objects overlap, let's say 3 of those polygon objects in "Drag (simple)", how can you make it so only one of them is draggable?

An example: https://codesandbox.io/s/vigorous-bohr-pxyzi2?file=/src/App.jsx

I have 3 instances of the same object, they all get initialized to the same spot. When you drag one, it drags all of them.

[AChangXD]

For those coming across this in the future, I ended up having assigned all objects a unique ID, and bind that unique id to the useDrag of @use-gesture/react (newer version of react-use-gesture). I also have a state that track the current object selected. In the useDrag, before I make any updates, I will check if the current object selected is the same as the object id of useDrag:

`
const bind = useDrag(
({ args: [index], active, movement: [x, y], timeStamp, event }) => {
// console.log(event.ray);
if (currentDragObj === null) {
setCurrentDragObj(index);
}
if (active && currentDragObj === index) {
event.ray.intersectPlane(floorPlane, planeIntersectPoint);
setPos([planeIntersectPoint.x, 1.5, planeIntersectPoint.z]);
}
setIsDragging(active);

  if (!active) {
    setCurrentDragObj(null);
  }

  api.start({
    // position: active ? [x / aspect, -y / aspect, 0] : [0, 0, 0],
    position: pos,
    scale: active ? 1.2 : 1,
    rotation: [y / aspect, x / aspect, 0],
  });
  return timeStamp;
},
{ delay: true }

);
`

[naeem-qv]

unable to open
Drag (complex version) https://codesandbox.io/s/r3f-lines-capture-1gkvp

[clearly-outsane]

I can't open it either ^

[gsimone]

To lock the controls when transforming, refer to this example https://drei.react-spring.io/?path=/story/controls-transformcontrols--transform-controls-lock-st

[gsimone]

This is a bit of a react footgun, but you are making a mistake with refs. If you assign the ref inside a map function, you are actually overwriting it with the last value, so

const ref = useRef()

[a,b,c].map((el) => <div ref={ref} />

will set the ref 3 times, with the last one being c.

https://codesandbox.io/s/three-js-react-forked-m3f1k This is the same sandbox, with a slice before the map that only renders one control, and you can see it working correctly.

You can either keep an array of refs or move that logic in its own component:

eg.

function Transformable({ active, children, orbitControls }) {

   const transformControls = useRef()

   useEffect(() => {
    if (transformControls.current) {
      const controls = transformControls.current;
      const callback = (event) =>
        (orbitControls.current.enabled = !event.value);
      controls.addEventListener("dragging-changed", callback);
      return () => controls.removeEventListener("dragging-changed", callback);
    }
  });

   if (!active) return children
  
   return <TransformControls>{children}</TransformControls>

}