Adding Draggable Controls to Adjust Decal Position, Scale, and Rotation in Three.js

Hello everyone,

I am currently working on a React project using @react-three/fiber and @react-three/drei, and I need some guidance on implementing interactive draggable controls for a decal on a 3D model of a shirt. The goal is to allow users to dynamically adjust the position, scale, and rotation of the decal directly through the UI.

Here is the relevant part of my code where the decal is applied:

jsx

Copy code

<Decal
  position={[snap.decalPosition.x, snap.decalPosition.y, snap.decalPosition.z]}
  rotation={[0, 0, 0]} // Static for now, needs to be dynamic
  scale={snap.decalScale}
  map={snap.isFullTexture ? fullTexture : logoTexture}
  depthTest={true}
  depthWrite={true}
/>

I am using the Decal component from @react-three/drei, and I would like to introduce functionality where the user can click and drag on the decal to change its position, scale, and orientation. What would be the best approach or practices to add such interactive controls? Are there specific libraries or tools within the Three.js ecosystem that I could leverage for this functionality?

Any insights, code examples, or references to similar implementations would be greatly appreciated!

Thank you for your help!

i do not understand math and this is just cobbled together, but it somewhat worked: https://codesandbox.io/p/sandbox/image-alignment-via-decals-88mttv