使用react三纤维加载网格（OBJ MTL JPG），纹理不起作用

Question

在我的react应用程序中，我尝试创建一个显示从pix4d导出的3d网格的视图页面。该网格由三种类型的文件组成，（.obj、.mtl、.jpg）pix4d。通用域名格式。

我是新来的，有三根纤维，我想这是解决我问题的最好办法。

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

密码

提前谢谢！

我想了解如何附加纹理

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，包括一个映射和一个法线映射，所以既然它可以工作，我们就可以不断更新代码以进行改进。