记录一下,uniapp中使用three.js遇到glb模型加载不了的问题

1.这几天在写uniapp项目时,需要使用three.js加载三维模型。在加载模型时,遇到 “ Fetch API cannot load file:///static/glb/YZQ_AGV.glb. URL scheme "file" is n”。

这个问题可能时由于uniapp限制了访问,(具体的原因我也没搞明白。。。)。

然后我又搜了一下,使用了另一个方法就可以成功加载。我是使用andro的plus来解决的。

首先,使用plus.io.resolveLocalFileSystemURL来加载模型的glb文件,加载成功文件之后,再用three.js的loader.load()方法渲染模型;这样就可以成功的渲染出glb模型。

getfile(e){
	let url = plus.io.convertLocalFileSystemURL(e)
	return new Promise((resolve,reject)=>{
	    //利用安卓plus来加载模型文件
		plus.io.resolveLocalFileSystemURL(url, entry => {
			var reader = null;
			entry.file( file => {
				reader = new plus.io.FileReader();
				reader.onloadend =  ( read )=> {
					resolve(read.target.result)
				};
				reader.readAsDataURL( file );
			}, function ( error ) {
				alert( error.message );
			});
		},err=>{
			resolve(e)
		})
	})
},
const loader = new GLTFLoader(); //loader.load()加载模型的方法,uniapp使用会报错不支持,所以在封装一层
				this.getfile(that.file).then(res=>{
					loader.load(res,(gltf) => {
						const model = gltf.scene;
						scene.add(model);
					})
				})

然后把光照,摄像机,场景给加上,就可以成功渲染了。

你可能感兴趣的:(javascript,uni-app,前端)