Object controls on top of 3D Map

[lucascassiano]

Hi, amazing library! I've been working on top of it of a few days already. It simplified my pipeline like 10x.

One thing I've been trying to do, and hopefully someone else got it running, was to have a Pivot Control (or a TransformControls) on an object that is placed on the map.

This didn't work: every time I try to move the object, I think the cursor interaction on the map is overlaying the interaction with the object end up panning the map, with no interaction with the object's arrows.

Any solution for this?

[RodrigoHamuy]

You need to turn off the map controls on drag start and turn them back on on drag end. I will add an example for reference when I have a bit of extra time.

[lucas-vitrus]

Thank you, @RodrigoHamuy !

If I get something running before I will add here for reference. Thanks!

[m6hdix]

Hello, don't be tired Like our friend, I want to move the 3D object on the map, but I want the geographic coordinates of the environment to change when the user moves the mouse over the environment and holds the left click while moving the environment. But I still couldn't, but I got positive results through the leva panel

[RodrigoHamuy]

@m6hdix @lucas-vitrus added an example: https://rodrigohamuy.github.io/react-three-map/?story=pivot-controls--default Key bits are:

import { useMap } from "react-three-map";
// ...
  const map = useMap();
  const onDragStart = useCallback(() => {
    map.dragPan.disable();
    map.dragRotate.disable();
  }, [map]);
  const onDragEnd = useCallback(() => {
    map.dragPan.enable();
    map.dragRotate.enable();
  }, [map]);
  // ...
  return <PivotControls onDragStart={onDragStart} onDragEnd={onDragEnd} />

[m6hdix]

Thank you for your time.❤❤