threejs+uniapp(app+h5)加载模型

复制可直接使用

1：由于app端获取不到dom，所以采用renderjs的写法实现。

     不懂的小伙伴移步：https://uniapp.dcloud.net.cn/tutorial/renderjs.html#renderjs

2：直接加载glb模型即可，由于gltf模型有两个文件，app端真机调试是找不到这个.bin文件的。

     模型转换请移步：https://threejs.org/editor/，新建空项目，同时导入gltf+bin文件，再导出glb

3：添加模型代码

    /**
	 * 添加模型
	 */
	async _setModel(modelName, callback) {
		let modelPath = `./static/gltf/${modelName}`;
		// #ifdef APP
		modelPath = await getfile(modelPath);
		// #endif
		return new Promise((resolve, reject) => {
			new GLTFLoader().load(
				modelPath,
				(gltf) => {
					callback && callback(gltf);
				},
				undefined,
				(error) => {
					console.error(error);
					reject(modelPath + "模型添加失败！");
				}
			);
			resolve(modelPath + "模型添加成功！");
		});
	}

    ...

    // 调用
    this._setModel('bridge.glb', (gltf) => {
		this.scene.add(gltf.scene);
	});

解释：app端真机调试直接加载模型是会报错的：URL scheme "file" is not supported

 Fetch API cannot load file:///storage/emulated/0/Android/data/io.dcloud.HBuilder/apps/HBuilder/www/static/gltf/bridge.glb. URL scheme "file" is not supported. at app-view.js:20430

4：使用 plus.io.convertLocalFileSystemURL 转换文件路径。也就是 "第三点" 中的getfile方法

export function getfile(e) {
	// #ifdef APP-PLUS
	let url = plus.io.convertLocalFileSystemURL(e)
	return new Promise((resolve, reject) => {
		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 => {
			reject(err)
		})
	})
	// #endif
	// #ifndef APP-PLUS
	return new Promise((resolve) => {
		resolve(e)
	})
	// #endif
}

注：由于公司没有小程序的需求，所以没测试小程序是否适配。