reactjs - 使用react-three-fiber加载网格（OBJ + MTL + JPG），纹理不起作用

Question

在我的反应应用程序中，我正在尝试制作一个显示从 pix4d 导出的 3d 网格的视图页面。该网格包含三种类型的文件，(.obj, .mtl, .jpg) pix4d.com。

我是新手，使用 react-three-fiber，我认为这是解决问题的最佳方法。

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

代码

提前致谢！

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

Answer 1

我一直在寻找这个答案几个星期，最后我找到了一种让它工作的方法。

材料加载器本身并不能解决远程文件的导入问题（它在网络上解决，而不是在移动设备上，也许将来会解决）。所以，我正在创建材料并手动为其分配图像。

像这样的东西：

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'))

注意TextureLoaderfromexpo-three可以处理从返回的文件资源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，因此由于它有效，我们可以不断更新代码以进行改进。