THREEJS基础实现模型加载进度条

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情

当我们用threejs加载较大模型时，这时候场景里往往会等较长一段时间才会显示出模型，这对于我们来说体验其实有点不是很好，那么我们如何知道模型加载的进度呢？

实现

参考:www.yanhuangxueyuan.com/doc/Three.j…

首先进行初始化场景，摄像机，渲染器，灯光，轨道控制器等基本要素。 然后随便找个模型加载一下。

用这个elf.dae，模型在threejs example中有。

let loader=new ColladaLoader( );
loader.load('./model/elf.dae',function (object)
{
  // object.scene.scale.set(2,2,2)
  scene.add(object.scene)
},(xhr)=>{
  console.log('加载完成的百分比'+(xhr.loaded/xhr.total*100)+'%')
})

我们可以按f12看到打印的进度

接下来，我们设置进度条，可以自己做也可以用ui。

我这边直接用elementui plus

      <div class="progress">
      <el-progress :text-inside="true" :stroke-width="26" :percentage="70" />
    </div>

.progress{
  position: absolute;
  z-index: 10;
  left: 10%;
  width: 80%;
  top:50%
}

效果如下图，这里随便调的，大伙可以自己调到合适的位置。

我们把进度绑定一下

      <div class="progress" id="progress" >
      <el-progress :text-inside="true" :stroke-width="26" :percentage="jd" />
    </div>

let jd=ref(0)
let loader=new ColladaLoader( );
loader.load('./model/elf.dae',function (object)
{
  // object.scene.scale.set(2,2,2)
  scene.add(object.scene)
},(xhr)=>{
  console.log('加载完成的百分比'+(xhr.loaded/xhr.total*100)+'%')
  jd.value=xhr.loaded/xhr.total*100
})

结果如下图

接下来弄个黑屏，那场景在未加载到100前不显示。效果大伙自己设置

<div class="hp" id="hp"></div>

.hp{
  position: absolute;
  background-color: black;
  z-index: 9;
  width: 100%;
  height: 100%;
}

这个.hp的z-index要比进度条那个小，不然会在进度条前面。效果如下图

然后在加载到100的时候将进度条和hp设置为不可见就行了

loader.load('./model/elf.dae',function (object)
{
  // object.scene.scale.set(2,2,2)
  scene.add(object.scene)
  document.getElementById('hp').style.visibility='hidden'
  document.getElementById('progress').style.visibility='hidden'
},(xhr)=>{
  console.log('加载完成的百分比'+(xhr.loaded/xhr.total*100)+'%')
  jd.value=xhr.loaded/xhr.total*100
  // if(jd.value==100)
  // {
  //   document.getElementById('hp').style.visibility='hidden'
  //   document.getElementById('progress').style.visibility='hidden'
  // }

})

我这边使用visibility，设置透明度或者其他一些属性也是可以的，透明度可以配合gsap动画库实现那种淡出效果。

其他方法

如果我们使用以上方法时，如果没有达到我们预期的效果，可以尝试下以下几种方法。

1. 设置模型加载完后再过几秒再执行隐藏，实际上并没有解决，针对不太大的可能有点用(自己骗自己，我最擅长了

2. 就是将一个大模型分成很多部分比如一个拆成20份，然后分开加载，加载好1个进度条为5，19个为95，20份全部加载好才为100。

刚学不久，可能会有一些问题，如果有错误希望在评论区指出。