Three.js 加载进度条 - 文章教程

Three.js 加载进度条

发布于 2021-09-07 字数 2703 浏览 1067 评论 0

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

关于 Threejs 通过模型文件加载器,比如 OBJLoaderFBXLoaderObjectLoaderGLTFLoader 等加载一个模型文件,然后实时获得文件的加载进度,可以查看 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" target="_blank" class="external-link" 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>

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

归属感

这个人比较懒,什么都没有填写!

10 文章
2 评论
20591 人气
更多

推荐作者

瑾兮

文章 11 评论 2

carlo_sn

文章 0 评论 0

15867725375

文章 0 评论 0

a3576419

文章 0 评论 0

wendy

文章 0 评论 0