7. 模型加载进度条
# 模型加载进度条
web3d可视化项目开发，很多时候，3D模型的大小要比普通前端项目的文件大得多，这时候往往需要设置一个进度条，表示模型的加载进度。
# 进度条HTML、CSS、JavaScript代码
课件中提供的是用原生HTML、CSS、JavaScript代码写的一个进度条，当然实际开发的时候，你可以不自己写，选择成熟的UI组件库，比如你使用vue技术栈的Element-ui进度条组件。
建议：正式学习后面threejs代码之前，你可以先自己把下面进度条CSS代码写一遍，然后再学习后面内容。
<head>
<style>
/* 进度条css样式 */
#container {
position: absolute;
width: 400px;
height: 16px;
top: 50%;
left:50%;
margin-left: -200px;
margin-top: -8px;
border-radius: 8px;
border: 1px solid #009999;
overflow: hidden;
}
#per {
height: 100%;
width: 0px;
background: #00ffff;
color: #00ffff;
line-height: 15px;
}
</style>
</head>
<body style="background-color: #001111;">
<div id="container">
<!-- 进度条 -->
<div id="per"> </div>
</div>
<script>
const percentDiv = document.getElementById("per");// 获取进度条元素
percentDiv.style.width = 0.8*400 + "px";//进度条元素长度
percentDiv.style.textIndent = 0.8*400 + 5 +"px";//缩进元素中的首行文本
percentDiv.innerHTML = "80%";//进度百分比
</script>
</body>
# 加载器查看模型加载进度
gltf模型加载进度具体语法可以查看GLTFLoader文档。
loader.load(模型路径,加载完成函数,加载过程函数)
模型本身是有大小的，通过浏览器从服务器加载的时候，本身网络传输是需要时间的。
.load()方法的参数2是一个函数，参数2函数是模型加载完成以后才会被调用执行。
.load()方法的参数3是一个函数，通过函数的参数获取模型加载信息,每当模型加载部分内容，该函数就会被调用，一次加载过程中一般会被调用多次，直到模型加载完成。
loader.load("../工厂.glb", function (gltf) {
model.add(gltf.scene);
}, function (xhr) {
// 控制台查看加载进度xhr
// 通过加载进度xhr可以控制前端进度条进度
const percent = xhr.loaded / xhr.total;
console.log('加载进度' + percent);
})
# 加载进度控制进度条
把案例源码原生HTML、CSS进度条.html中进度条的HTML、CSS、JavaScript代码复制到threejs代码中，修改即可。
loader.load("../工厂.glb", function (gltf) {
model.add(gltf.scene);
}, function (xhr) {
const percent = xhr.loaded / xhr.total;
// console.log('加载进度' + percent);
percentDiv.style.width = percent * 400 + "px"; //进度条元素长度
percentDiv.style.textIndent = percent * 400 + 5 + "px"; //缩进元素中的首行文本
// Math.floor:小数加载进度取整
percentDiv.innerHTML = Math.floor(percent * 100) + '%'; //进度百分比
})
# 加载完成隐藏进度条
threejs模型加载完成后，就不需要显示进度条，可以通过.style.display属性设置，也可以通过.style.visibility属性隐藏进度条。
loader.load("../工厂.glb", function (gltf) {
model.add(gltf.scene);
// 加载完成，隐藏进度条
// document.getElementById("container").style.visibility ='hidden';
document.getElementById("container").style.display = 'none';
}, function (xhr) {
const percent = xhr.loaded / xhr.total;
console.log('加载进度' + percent);
})