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

Questions
, ,
1

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!

2

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

3

Hi @drcmda,

Thanks for your code sandbox sample. I am wondering if it is possible to use a Drag Control to perform these same operations? I am trying to drag a projected decal across a sphere, and am finding that Pivot Controls aren’t really suitable. The ‘style’ of Pivot Controls doesn’t fit what I am after - I’m not sure if its possible to restyle them?.

If I could drag another projected shape that is ‘pinned’ to the corner of my main decal, I could then use the resulting matrices for rotation/scaling/translation of the main decal, but this is proving difficult and I can’t find any reasonable information online.

I’ve been trying to work this out all day, and I can get this working for the most part. Main issues I have is the wrapping of a Decal in a DragControls doesn’t work as the decal would need a mesh as its parent, and my decal gets its projected shape from the surrounding mesh so I can’t just throw in a DragControls. I don’t really ‘get’ how to use DragControls via ref as the documentation doesn’t really give a good example…

Any advice would be so greatly appreciated - cheers