React 三纤维向 obj 模型添加纹理答案

【问题标题】：React three fiber add texture to obj modelReact 三纤维向 obj 模型添加纹理
【发布时间】：2021-08-11 20:19:48
【问题描述】：

在我的应用程序中，我想为加载的 .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>
  )
}

【问题讨论】：

标签： reactjs three.js react-three-fiber

【解决方案1】：

primitive 不是网格的子集。它可以是group 的子代。
primitiverequires both geometry and material as props。 Mesh requires both geometry and material as props. 很明显，两者都不能用作彼此的子集。
要实现您的想法，您只需要使用一个Mesh 或primitive。我建议使用具有丰富文档的Mesh。 primitive 记录不足。
通过useLoader获得的OBJ内部可能有复杂的组。模型通常包含较大的集合，例如 group 或 scene。组和场景不能有纹理。 Mesh可以。

OBJ(result of useLoader) = scene => group => mesh => geometry, texture

需要遍历才能从网格中获取几何图形。

  // I've implemented this with Typescript,
  // but it is not necessary to use 'as' for type conversion.
  const obj = useLoader(OBJLoader, "/rock.obj");
  const texture = useTexture("/guide.png");
  const geometry = useMemo(() => {
    let g;
    obj.traverse((c) => {
      if (c.type === "Mesh") {
        const _c = c as Mesh;
        g = _c.geometry;
      }
    });
    return g;
  }, [obj]);

  // I've used meshPhysicalMaterial because the texture needs lights to be seen properly.
  return (
    <mesh geometry={geometry} scale={0.04}>
      <meshPhysicalMaterial map={texture} />
    </mesh>
  );

我已经在代码沙盒中实现了它。这是工作代码：

https://codesandbox.io/s/crazy-dawn-i6vzb?file=/src/components/Rock.tsx:257-550

【讨论】：

【解决方案2】：

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

有三种可能的解决方案：

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

【讨论】：