Three.js 加载进度条

Question

Threejs 加载模型的时候，因为模型文件比较大，为了更好的体验，往往会通过一个进度条来显示模型文件的加载进度。

关于 Threejs 通过模型文件加载器，比如 OBJLoader、FBXLoader、ObjectLoader、GLTFLoader 等加载一个模型文件，然后实时获得文件的加载进度，可以查看 threejs 文档关于这些加载器的基类 FileLoader。

你可把下面一段代码插入到一段模型文件加载案例中测试，如果本地测试，模型文件太大小的话，可能后台直接打印100%，最好把模型放在服务器上进行加载测试。

// 加载器加载模型文件
loader.load("model.obj",onLoad, onProgress);
// 加载完成的回调函数
function onLoad(Object3D) {
  // 加载器解析文件
  scene.add(Object3D)
}
// 加载过程回调函数-可以获得加载进度
function onProgress(xhr) {
  // 后台打印查看模型文件加载进度
  console.log('加载完成的百分比'+(xhr.loaded/xhr.total*100)+'%');
}

进度数据绑定进度条

进度条可以找一个前端进度条组件或者自己通过HTML和CSS代码编写一个，然后在通过threejs模型加载进度的数据来更新进度条。

为了方便测试下面代码是通过vuejs前端框架和vuejs的UI组件库element-ui 来写一个threejs模型加载进度条效果，实际开发中如果一些进度条组件不符合自己需求，可以自己去编写。

加载本地模型或者网速比较快，进度条可能一闪而过不明显，为了更好测试查看进度效果，可以在服务器上测试，或者使用一个比较大的模型来测试。

<!-- 引入前端框架vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<!-- vuejs的库element-ui -->
<script src="http://www.yanhuangxueyuan.com/js/element-ui/index.js"></script>
<!-- element-ui样式 -->
<link rel="stylesheet" href="http://www.yanhuangxueyuan.com/js/element-ui/index.css">
<div id="app">
  <!-- -->
  <!-- 加载完成后，如果想隐藏进度条可以设置  v-if="loadedData!==100"，也就是loadedData等于100隐藏进度条-->
  <div style="position: absolute;width:400px;" :style="{left: left+'px',top: top+'px'}">
    <el-progress :text-inside="true" :stroke-width="30" :percentage="loadedData"></el-progress>
  </div>
</div>
<script>
...
// 在加载过程函数中，更新vue进度条视图绑定的数据
function onProgress(xhr) {
  // 后台打印查看模型文件加载进度
  console.log('加载完成的百分比'+(xhr.loaded/xhr.total*100)+'%');
  //把加载进度数据取整然后传递给Vue组件：进度条
  vm.$data.loadedData = Math.floor(xhr.loaded/xhr.total*100)
}
...
//实例化vue
var vm = new Vue({
  el: "#app",
  data: {
    // loadedData关联加载进度条
    loadedData: 0,
    left: (window.innerWidth - 400) / 2,
    top: (window.innerHeight - 30) / 2,
  },
})
</script>