Question

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

我是新人，拥有三纤反应，我认为这是实现解决问题的最佳方法。

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

code

预先感谢！

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

Answer 1

我找了几个星期的答案，终于找到了让它起作用的方法。

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

像这样：

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

注意 TextureLoader 中的 expo-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，包括贴图和法线贴图，因此既然它有效，我们可以不断更新代码以进行改进。

加载带有反应三纤维的网格（OBJ + MTL + JPG），纹理无法正常工作

1 个答案: