更新于 

如何显示资源加载进度

使用到的模型地址

THREE.LoadingManager

LoadingManager实例配置到Loader中，
可以用来监控资源加载的几种状态：

  • onStart
  • onLoad
  • onProgress
    • 参数:(url资源地址, loaded已加载数量, total全部需要加载的资源数量)
  • onError

资源进度条主要依靠onProgress和onLoad两个阶段，

  • onProgress反馈加载进度
  • onLoad加载完毕时关闭进度条界面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<style>
  *{
    padding:0;
    margin:0;
  }
  .progress-content{
    position:absolute;
    left:0;
    top:0;
    width: 100%;
    height:100vh;
    background-color:rgba(0,0,0,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .progress-label{
    font-size: 2rem;
    color:#fff;
    margin-bottom:3px;
  }
  #progress-bar{
    width:30%;
  }
</style>
<div class="progress-content">
    <div class="progress-label">Loading...</div>
    <progress id="progress-bar" value="0" max="100" />
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const loadingManager = new THREE.LoadingManager()

const progressBar = document.getElementById('progress-bar')
loadingManager.onProgress = (url, loaded, total) => {
  progressBar.setAttribute('value', loaded/total*100)
}
const progressContent = document.querySelector('.progress-content')
loadingManager.onLoad = () => {
  progressContent.style.display = 'none'
}
const gltfLoader = new GLTFLoader(loadingManager)
const rgbeLoader = new RGBELoader(loadingManager)

rgbeLoader.load('./assets/MR_INT-006_LoftIndustrialWindow_Griffintown.hdr', texture => {
  texture.mapping = THREE.EquirectangularReflectionMapping
  scene.environment = texture
  gltfLoader.load('./assets/mars_one_mission/scene.gltf', gltf => {
    scene.add(gltf.scene)
  },undefined,err=>console.error(err))
})