最近在学习Three.js,就练习写了个基于Three.js的本地模型读取器,目前出现了本地.gltf文件无法显示模型的问题,glb格式和fbx模型就可以顺利读取。
/*
**函数名:User_Loader()
**作用:加载用户模型,并预览
*************************************
scene:场景
file:使用el—upload上传的文件
*************************************
*/
export function User_Loader(scene, file) {
let fileName = file.raw.name;
let fileType = file.raw.name.split('.').pop().toLowerCase();
let fileUrl = URL.createObjectURL(file.raw);
var manager = new THREE.LoadingManager();
var objectURLs = [];
manager.setURLModifier((url) => {
url = fileUrl;
objectURLs.push(url);
return url;
});
function glbL(){
var loader = new GLTFLoader(manager);
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath("./draco/");
loader.setDRACOLoader(dracoLoader);
loader.load(fileName, (gltf) => {
scene.add(gltf.scene);
objectURLs.forEach((url) => URL.revokeObjectURL(url));
});
}
switch (fileType) {
case "glb":
glbL()
break;
case "gltf":
glbL()
break;
case "fbx":
var loader = new FBXLoader(manager);
loader.load(fileName, function (object) {
scene.add(object);
objectURLs.forEach((url) => URL.revokeObjectURL(url));
});
break;
}
}
程序未报错,本地用于测试的模型都是使用blender保存的相同内容的不同格式的模型文件,都可以使用blender与three的loader打开。
通过F12能看到gltf.scene中存在模型文件
也能看到scene中也存在对应的group
但是就是场景中看不到模型,换了好几个gltf文件都看不到。而且不知道为什么这段程序在加载gltf模型程序时会运行两次,其他格式模型就只运行一次,正常不是应该只运行一次的吗?
manager.setURLModifier((url) => {
url = fileUrl;
objectURLs.push(url);
return url;
});
希望知道为啥仅不能加载gltf模型的文件,fbx和glb格式没有问题。