使用三个 js 和 React Three Fiber 以及 gltfjsx 为模型添加动态纹理

Question

我想尝试三个js并按照本教程https://www.youtube.com/watch?v=xy_tbV4pC54，我能够运行它

我现在想做的是在模型顶部添加图像纹理，如下所示

https://osorina.github.io/cup-demo/image/

我还没有尝试过任何代码，因为我仍在寻找一种方法来做到这一点，有人说我需要使用fabricjs，但我找不到任何适合我需要的有用资源，希望这里有人知道如何做上面的杯子演示之类的事情。

这是沙箱https://codesandbox.io/s/floating-shoe-forked-qxjoj，提前致谢

Answer 1

你可以覆盖预定义的 props

import { useGLTF, useTexture } from '@react-three/drei'

function Model() {
  const { nodes, material } = useGLTF(...)
  const texture = useTexture("/texture.jpg")
  ...
  return (
    <group>
      <mesh geometry={...} material={...} material-map={texture} />

您还可以直接替换现有材料：

<mesh geometry={...}>
  <meshStandardMaterial map={texture} />
</mesh>

请注意，纹理需要适当的 UV 坐标，这些坐标通常在搅拌机或建模软件中设置。你不能只是对某件事物进行想象并期望它能够对齐。