使用three.js、React Three Fiber和gltfjsx为模型添加动态纹理。

Question

我想尝试three.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，提前感谢。

- naoval luthfi

Answer 1

你可以覆盖预定义的属性。

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坐标，通常在Blender或建模软件中设置。您不能只是将图像放在某个物体上，然后期望它能够自动对齐。

- hpalu

---

我也可以改变图片的位置吗？ - naoval luthfi

是的，纹理有一个偏移属性。对于标志，最好研究一下贴花。 - hpalu

我会尝试一下，如果有效的话，我会将其标记为正确答案，谢谢。 - naoval luthfi