使用react-three-fiber加载网格(OBJ+MTL+JPG)，纹理不工作

Question

在我的react应用程序中，我正在尝试制作一个显示从pix4d导出的3D网格的视图页面。该网格由三种类型的文件组成：(.obj、.mtl、.jpg) pix4d.com。

我是新手，使用react-three-fiber fiber，我认为这是实现我的问题解决方案的最好方式。

下面是用于加载和渲染3D-Model的react组件的完整代码。

code

提前感谢！

我想了解如何将纹理和材质附加到我的obj渲染模型。

Answer 1

我花了几个星期寻找这个答案，最终我找到了一个让它工作的方法。

Material loader不会自己解决远程文件的导入问题(它在web上，而不是在移动设备上，也许将来会这样做)。因此，我正在创建材料，并手动分配图像。

如下所示：

import { TextureLoader } from 'expo-three';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader';
// useThree is used to get scene reference
import { useThree } from 'react-three-fiber';

const textureLoader = new TextureLoader();
const mapImage = textureLoader.load(require('path/to/image1.png'))
const normalMapImage = textureLoader.load(require('path/to/image2.png'))

请注意，来自expo-three的TextureLoader可以处理从require()返回的文件资源

const loaderObj = new OBJLoader();
const loaderMtl = new MTLLoader();

export default props => {
  const { scene } = useThree();

  loaderMtl.load(
    'https://url_to/material.mtl',
    mtl => {
      mtl.preload();

      loaderObj.setMaterials(mtl);
      loaderObj.load(
        'https://url_to/model.obj',
        obj => {
          // simple logic for an obj with single child
          obj.children[0].material.map = mapImage;
          obj.children[0].material.normalMap = normalMapImage;

          scene.add(obj)
        }
      )
    }
  )

  return null;
}

这是我第一次成功地尝试使用mtl渲染obj，其中包括一张贴图和一张法线贴图，因此，由于它可以工作，我们可以不断更新代码以进行改进。