0

I'm using useGuesture and to make some elements draggable in R3F.

When I start dragging (or even click the element) it moves to the center of the screen before it is then possible to drag it around.

How can I get it to drag from it's current position?

This is some code I've got from https://maxrohde.com/2019/10/19/creating-a-draggable-shape-with-react-three-fiber/ and tried to get it to work with objects that do not start in center of screen.

export default function Draggable(props) {
  const [position, setPosition] = useState(props.position);
  const { size, viewport } = useThree();
  const aspect = size.width / viewport.width;

  const bind: any = useGesture(
    {
      onDrag: ({ event, offset: [x, y] }) => {
        const [, , z] = position;
        setPosition([x / aspect, -y / aspect, z]);
      },
      onDragEnd: event => {
        props.onMove(position);
      },
      onClick: props.onClick,
    },
    { drag: { filterTaps: true } },
  );

  if (!props.children) return null;

  return (
    <mesh position={position} {...bind()}>
      {props.children}
    </mesh>
  );
}
beek
  • 3,522
  • 8
  • 33
  • 86

1 Answers1

0

I know this is a bit old now but I was having the same issue. I've not used 'aspect' in mine as my use is a lot simpler, and used direction instead of offset - offset sends it flying off the page:

const bind = useDrag(({ down, direction: [x, y] }) => {
    if (down) {
      setPosition((prev) => [prev[0] + x, prev[1] - y, prev[2]]); 
    }
  });
Bippity
  • 1
  • 1