时间戳

首页 > 解决方案 > React 三纤维向 obj 模型添加纹理

reactjs - React 三纤维向 obj 模型添加纹理

问题描述

在我的应用程序中，我想为加载的 .obj 模型添加纹理。我的 .fbx 加载模型也有同样的情况。下面是我的示例代码，但这仅适用于 sphereGeometry 之类的东西，而不适用于加载的模型。

提前致谢！

import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
import { useTexture } from '@react-three/drei'

const OBJModel = ({ file }: { file: string }) => {
  const obj = useLoader(OBJLoader, file)
  const texture = useTexture(textureFile)

  return (
    <mesh>
      <primitive object={obj} />
      <meshStandardMaterial map={texture} attach="material" />
    </mesh>
  )
}

标签： reactjsthree.jsreact-three-fiber

解决方案

我相信 obj loader 返回一个组或一个网格，将它放入顶级网格是没有意义的，并且给顶层一个纹理不会改变加载的 obj 网格。

有三种可能的解决方案：

  1. 使用 obj.traverse(...) 并通过突变更改模型，这就是人们在香草三中所做的事情，这是有问题的，因为突变很糟糕，您正在破坏源数据并且您将无法重用该模型
  2. 我建议将您的模型转换为 gltf，然后您可以使用 gltfjsx https://github.com/pmndrs/gltfjsx它可以以声明方式布置完整模型。点击视频，这正是你想要的
  3. 如果您必须使用 obj 文件，您可以手动创建声明图。有一个钩子可以给你{节点，材料} https://docs.pmnd.rs/react-three-fiber/API/hooks#use-graph

推荐阅读