group/mesh 内的三个 js 和 react 按钮调用我的添加功能

Question

这是我的 three.js 反应代码，我想在 glb 文件的组内添加按钮，我该怎么做？我尝试了其中的大部分，我使用 <mesh> 作为按钮不起作用，同样适用于 <block> 还有我如何在我的 onChange 上添加颜色，它没有读取它。

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>
  )
}

这是我的 three.js 反应代码，我想在 glb 文件的组内添加按钮，我该怎么做？感谢您的帮助！

Answer 1

有一个名为 Drei 的库，它允许您将 Html 部分转换为 3D 网格。

您可以尝试类似的方法：

<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>

Answer 2

Lucas 的解决方案：使用 Drei 的一个警告是，目前 Firefox 中存在一个错误，会导致 <Html> 组件呈现完全模糊。

group/mesh 内的三个 js 和 react 按钮调用我的添加功能

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

node.js

three.js

reactjs

react-three-fiber