Can I interact with different components of my 3d model in React js - Three Fiber?

Question

I have 3d sphere and links around as different mesh component. Can i rotate links mesh around my sphere without this sphere?

My 3d model

I want to interact separately with links mesh and sphere mesh and rotate separately sphere and links.

Answer 1

if u use gltf to jsx https://gltf.pmnd.rs/ , you can then use:

<mesh onClick={handleClick}/>

The model will be decomposed in to declarative parts, you can modify one by one after.

To rotate some part of the mesh via drag, the easiest would be to useGesture package , the basic pipeline is like this:

// mesh / object reference 
const ref = useRef()
// cursor movement XY delta
const delta = useRef(null)

useFrame(() => {
  if (delta !== null)
    ref.current.rotation.set([delta.x,delta.y, 0])
})

return ( <…
  <mesh ref={ref}/>
…/>)

pls note that you need to set delta.current = { x, y } yourself somewhere

That example with drag https://use-gesture.netlify.app/docs/options/#transform