Implementing Draggable Controls for Decals in React Three Fiber

For implementing interactive draggable controls for a decal in your React Three Fiber project, I recommend using the TransformControls or DragControls from the Three.js ecosystem. Since you're using @react-three/drei, you can leverage its built-in wrappers for these controls.

Option 1: Using TransformControls

TransformControls is ideal for your use case as it allows for position, rotation, and scaling adjustments. Here's how you can implement it:

JSXCopied
import { TransformControls } from '@react-three/drei'
import { useRef } from 'react'

function DecalWithControls({ snap, fullTexture, logoTexture, onTransform }) {
  const decalRef = useRef()
  
  return (
    <>
      <Decal
        ref={decalRef}
        position={[snap.decalPosition.x, snap.decalPosition.y, snap.decalPosition.z]}
        rotation={[snap.decalRotation.x, snap.decalRotation.y, snap.decalRotation.z]}
        scale={snap.decalScale}
        map={snap.isFullTexture ? fullTexture : logoTexture}
        depthTest={true}
        depthWrite={true}
      />
      
      <TransformControls 
        object={decalRef} 
        mode="translate" // Can be "translate", "rotate", or "scale"
        onObjectChange={(e) => {
          // Update your state here based on the transformation
          if (onTransform) {
            onTransform({
              position: decalRef.current.position,
              rotation: decalRef.current.rotation,
              scale: decalRef.current.scale
            })
          }
        }}
      />
    </>
  )
}

You can add UI buttons to switch between different transformation modes (translate, rotate, scale).

Option 2: Using DragControls

If you only need position adjustment, DragControls might be simpler:

JSXCopied
import { useEffect, useRef } from 'react'
import { DragControls } from 'three/examples/jsm/controls/DragControls'
import { useThree } from '@react-three/fiber'

function DraggableDecal({ snap, fullTexture, logoTexture, onDrag }) {
  const decalRef = useRef()
  const { camera, gl } = useThree()
  
  useEffect(() => {
    const controls = new DragControls([decalRef.current], camera, gl.domElement)
    
    // Add event listener to highlight dragged objects
    controls.addEventListener('dragstart', function (event) {
      event.object.material.emissive.set(0xaaaaaa)
    })
    
    controls.addEventListener('dragend', function (event) {
      event.object.material.emissive.set(0x000000)
      if (onDrag) {
        onDrag({
          position: event.object.position
        })
      }
    })
    
    return () => {
      controls.dispose()
    }
  }, [camera, gl, onDrag])
  
  return (
    <Decal
      ref={decalRef}
      position={[snap.decalPosition.x, snap.decalPosition.y, snap.decalPosition.z]}
      rotation={[snap.decalRotation.x, snap.decalRotation.y, snap.decalRotation.z]}
      scale={snap.decalScale}
      map={snap.isFullTexture ? fullTexture : logoTexture}
      depthTest={true}
      depthWrite={true}
    />
  )
}

Recommended Approach

For your specific requirements (position, scale, and rotation), I recommend using the TransformControls from @react-three/drei as it provides a complete solution with a user-friendly interface. You can create UI buttons to toggle between different transformation modes, giving users full control over the decal's properties.

Make sure to update your state management (whether it's Redux, Context API, or Zustand) to reflect the changes made through the controls, so that the transformations persist across component re-renders.