Three js and react button inside group/mesh to call for my add function-CodePudding

this is my three.js code in react, I want to add button inside the group for the glb file how can i do it? I tried most of them, i used <mesh> as button didnt work, same goes for <block> also how do i put colors on my onChange, it's not reading it.

function Violon({ ...props }) {
  const group = useRef()
  const snap = useSnapshot(state)
  // Animate model
  const [violonBody, setviolonBody] = useState('')
  const [violonStick, setviolonStick] = useState('')
  const [violonChincrest, setviolonChincrest] = useState('')

  const addCustomizations = () => {
    //{object}

    Axios.post('http://localhost:5000/customizations', {
      violonBody: violonBody,
      violonStick: violonStick,
      violonChincrest: violonChincrest,
      user: JSON.parse(localStorage.getItem('user'))
    }).then(() => {
      console.log('success')
    })
  }

  // Cursor showing current color
  const [hovered, set] = useState(null)

  
  const { nodes, materials } = useGLTF('v.glb')
  return (
    <group
      ref={group}
      dispose={null}
      onPointerOver={(e) => (e.stopPropagation(), set(e.object.material.name))}
      onPointerOut={(e) => e.intersections.length === 0 && set(null)}
      onPointerMissed={() => (state.current = null)}
      onPointerDown={(e) => (e.stopPropagation(), (state.current = e.object.material.name))}>
      <mesh
        geometry={nodes.subD3_Bout001.geometry}
        material={materials.defaultMat002}
        material-color={snap.items.defaultMat002}
        rotation={[Math.PI / 2, 0, 0]}
        onChange={(event) => {
          setviolonBody(event.target.value)
        }}
      />
      <mesh
        geometry={nodes.subD3_Bridge.geometry}
        material={materials.defaultMat003}
        material-color={snap.items.defaultMat003}
        rotation={[Math.PI / 2, 0, 0]}
      />
      <mesh
        geometry={nodes.subD3_Chincrest.geometry}
        material={materials.defaultMat004}
        material-color={snap.items.defaultMat004}
        rotation={[Math.PI / 2, 0, 0]}
        onChange={(event) => {
          setviolonChincrest(event.target.value)
        }}
      />
      <mesh
        geometry={nodes.subD3_End_pin.geometry}
        material={materials.defaultMat005}
        material-color={snap.items.defaultMat005}
        rotation={[Math.PI / 2, 0, 0]}
      />
      <mesh
        geometry={nodes.subD3_Eyelet.geometry}
        material={materials.defaultMat006}
        material-color={snap.items.defaultMat006}
        rotation={[Math.PI / 2, 0, 0]}
      />
      <mesh
        geometry={nodes.subD3_Fingerboard.geometry}
        material={materials.defaultMat007}
        material-color={snap.items.defaultMat007}
        rotation={[Math.PI / 2, 0, 0]}
      />
      <mesh
        geometry={nodes.subD3_Hair.geometry}
        material={materials.defaultMat008}
        material-color={snap.items.defaultMat008}
        rotation={[Math.PI / 2, 0, 0]}
      />
      <mesh
        geometry={nodes.subD3_Pegs.geometry}
        material={materials.defaultMat009}
        material-color={snap.items.defaultMat009}
        rotation={[Math.PI / 2, 0, 0]}
      />
      <mesh
        geometry={nodes['subD3_Scroll-and-neck'].geometry}
        material={materials.defaultMat010}
        material-color={snap.items.defaultMat010}
        rotation={[Math.PI / 2, 0, 0]}
      />
      <mesh
        geometry={nodes.subD3_Stick.geometry}
        material={materials.defaultMat011}
        material-color={snap.items.defaultMat011}
        rotation={[Math.PI / 2, 0, 0]}
        onChange={(event) => {
          setviolonStick(event.target.value)
        }}
      />
      <mesh
        geometry={nodes.subD3_Strings.geometry}
        material={materials.defaultMat012}
        material-color={snap.items.defaultMat012}
        rotation={[Math.PI / 2, 0, 0]}
      />
      <mesh
        geometry={nodes.subD3_Tailpiece.geometry}
        material={materials.defaultMat013}
        material-color={snap.items.defaultMat013}
        rotation={[Math.PI / 2, 0, 0]}
      />
      <mesh
        geometry={nodes.subD3_Tuners.geometry}
        material={materials.defaultMat014}
        material-color={snap.items.defaultMat014}
        rotation={[Math.PI / 2, 0, 0]}
      />
      <mesh
        geometry={nodes.subD3_Violin001.geometry}
        material={materials.defaultMat015}
        material-color={snap.items.defaultMat015}
        rotation={[Math.PI / 2, 0, 0]}
      />
    </group>
  )
}

this is my three.js code in react, I want to add button inside the group for the glb file how can i do it? Thank you for your helpp!

CodePudding user response：

There is a library called Drei, which allows you to transform a Html section as a 3D mesh.

You could try something like:

<mesh geometry={nodes.subD3_Bout001.geometry}
        material={materials.defaultMat002}
        material-color={snap.items.defaultMat002}
        rotation={[Math.PI / 2, 0, 0]}
        onChange={(event) => {
          setviolonBody(event.target.value)
        }}
      />
    <Html transform occlude>
        <Button ...props />
    </Html>
</Mesh>

CodePudding user response：

The one caveat with Lucas's solution: using Drei, is that there is currently a bug in Firefox that will cause the <Html> component to render completely blurry.