时间戳

首页 > 解决方案 > 使用三个 js 和 React Three Fiber 和 gltfjsx 为模型添加动态纹理

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

问题描述

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

在此处输入图像描述

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

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

在此处输入图像描述

我还没有尝试任何代码，因为我仍在寻找一种方法，有人说我需要使用fabricjs，但我找不到任何适合我需要的有用资源，希望这里有人知道如何做类似上面的cup demo .

这是沙箱https://codesandbox.io/s/floating-shoe-forked-qxjoj，在此先感谢

标签： javascriptreactjs

解决方案

你可以覆盖预定义的道具

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 坐标，这些坐标通常在搅拌机或建模软件中设置。你不能只是把想象放在某件事上并期望它只是对齐。

推荐阅读