pivot and drag controls are barely/not working on mobile.

[conor-v]

I was trying to move objects in react three fiber and used the pivotcontrols from drei. On my pc it works perfect, but on mobile it moves just a little before stopping. Even when I'm still dragging my finger on the screen. Are there other controls for mobile how can move object horizontal and vertically?

The onDrag was a test I found online, but I did nothing.

import { PivotControls } from "@react-three/drei";
import { useAppStore } from "../../../stores/appStore";
import * as THREE from "three";

const ModelDisplay = () => {
  const modelType = useAppStore((state) => state.modelType);
  const controls = useAppStore((state) => state.controls);

  const handleModel = (modelType) => {
    switch (modelType) {
      case "model1":
        return (
          <mesh>
            <boxGeometry args={[1, 1, 1]} />
            <meshBasicMaterial color={"pink"} />
          </mesh>
        );
      case "model2":
        return (
          <mesh>
            <boxGeometry args={[3, 1, 1]} />
            <meshBasicMaterial color={"yellow"} />
          </mesh>
        );
      case "model3":
        return (
          <mesh>
            <boxGeometry args={[4, 0.5, 1]} />
            <meshBasicMaterial color={"green"} />
          </mesh>
        );
      case "model4":
        return (
          <mesh>
            <boxGeometry args={[3, 1.5, 1]} />
            <meshBasicMaterial color={"red"} />
          </mesh>
        );
      case "model5":
        return (
          <mesh>
            <boxGeometry args={[2, 2, 1]} />
            <meshBasicMaterial color={"blue"} />
          </mesh>
        );
      case "model6":
        return (
          <mesh>
            <boxGeometry args={[2, 3, 1]} />
            <meshBasicMaterial color={"grey"} />
          </mesh>
        );
      default:
        return (
          <mesh>
            <boxGeometry args={[1, 1, 1]} />
            <meshBasicMaterial color={"pink"} />
          </mesh>
        );
    }
  };

  return (
    <>
      {modelType !== "geen" && (
        <PivotControls
          offset={[0, 0, -0.5]}
          activeAxes={[true, true, false]}
          disableScaling={true}
          visible={controls}
          scale={2}
          onDrag={(local) => {
            const position = new THREE.Vector3();
            const scale = new THREE.Vector3();
            const quaternion = new THREE.Quaternion();
            local.decompose(position, quaternion, scale);

            ref.current.position.copy(position);
            ref.current.scale.copy(scale);
            ref.current.quaternion.copy(quaternion);
          }}
        >
          {handleModel(modelType)}
        </PivotControls>
      )}
    </>
  );
};

export default ModelDisplay;

[conor-v]

Fixed it. I needed to add touch-action: none; to the body.