threejs 加载模型进度条

获取模型的加载进度设置进度条

关于three.js如何获取模型的加载进度，然后通过获取的进度数据来控制进度条，无论你加载的外部模型是什么格式，一般都是通过设置加载器.load()方法的第三个参数onProgress实现。

// 以GLTF模型加载为例
var loader = new THREE.GLTFLoader();
loader.load(
	// 参数1：加载模型的路径
	"./模型.gltf",
	// 加载完成回调函数onLoad：表示加载完成后执行函数中代码
	function ( obj ) {
		// obj：加载完成返回模型相关信息
	},
	// 加载过程回调函数onProgress：加载过程不停地重复执行该函数中代码
	function ( xhr ) {
        // 控制台查看加载进度xhr
        // 通过加载进度xhr可以控制前端进度条进度   Math.floor:小数加载进度取整
        console.log('加载进度'+Math.floor(xhr.loaded / xhr.total * 100)+'%');
	},
	// 加载错误回调函数onError
	function ( err ) {
		console.error( '加载发生错误' );
	}
);

进度条

three.js并不提供进度条的代码，只是可以通过load方法获取加载进度，进度条的实现，和普通前端项目开发一样，你可以通过CSS和HTML代码编写一个进度条，也可以使用成熟的UI组件库，比如你使用vue技术栈的Element-ui进度条组件。