react-three-fiber 加载 obj / gltf 格式的文件

一、加载 obj 文件

import { useLoader } from '@react-three/fiber';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader';

const objModel = useLoader(OBJLoader, '/example.obj',
  loader => {
    const objMaterial = useLoader(MTLLoader, '/example.mtl');
    loader.setMaterials(objMaterial );
  },
);

二、加载 gltf 文件

import { useLoader } from '@react-three/fiber';
import { GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';

const gltfObj = useLoader(GLTFLoader, '/example.gltf',
  loader => {
    const dracoLoader = new DRACOLoader();
    // 以下路径表示 DRACOLoader 加载器调用时的必要依赖文件（可去 threejs 源码中寻找）
    // 该文件版本需要与 threejs 的版本对应
    dracoLoader.setDecoderPath('/draco/');
    loader.setDRACOLoader(dracoLoader);
  }
).scene;