threejs加载file格式的gltf模型，使用input type=file加载gltf模型

项目场景：

使用input选择gltf加载模型

问题描述

gltf有多个文件如何塞给GLTFLoader加载（不知道怎么办）。

解决方案：

最后在threejs官网看到解决办法

解决思路

URL.createObjectURL(bolb/file)

1：input输入文件获取

const uploadInput = ref<HTMLInputElement | undefined>();
const files: any = uploadInput.value!.files; // 获取files列表

2：查找gltf后缀的主文件，然后记录名称

  for (const val of files) {
        if (val.name.indexOf('.gltf') !== -1) {
          modelUrl.value = val.name // 保存名字
        }
        urls[val.name] = val;
      }

3：获取的files然后在threejs的LoadingManager管理器中加载----setURLModifier需要在加载之前设置

this.manager.setURLModifier((_url: string) => {
        let hasURL = "";
		
		// 这里查找前面的file然后转成地址，再return出去------有可能名称不是完全一样需要匹配
      	hasURL = URL.createObjectURL(_bolbURLs[f]);
        
        _url = hasURL || "";
        return _url;
      });

4：加载模型

设置setURLModifier之后直接加载就行

loader.load( '第二步记录的名称.gltf', (gltf) => {
	scene.add( gltf.scene );
	objectURLs.forEach( ( url ) => URL.revokeObjectURL( url ) ); // 销毁
});

就这么多

官方的范例：

// 将文件拖入网页时创建的Blob或File对象。
const blobs = {'fish.gltf': blob1, 'diffuse.png': blob2, 'normal.png': blob3};

const manager = new THREE.LoadingManager();

// 使用URL回调初始化加载管理器。
const objectURLs = [];
manager.setURLModifier( ( url ) => {

	url = URL.createObjectURL( blobs[ url ] );

	objectURLs.push( url );

	return url;

} );

// 像通常一样加载，然后撤消blob URL
const loader = new THREE.GLTFLoader( manager );
loader.load( 'fish.gltf', (gltf) => {

	scene.add( gltf.scene );

	objectURLs.forEach( ( url ) => URL.revokeObjectURL( url ) );

});

总结

有不对的地方欢迎大佬指出。