72. 模型加载进度条

小彭努力中

于 2024-10-11 15:10:02 发布

阅读量362

点赞数 15

分类专栏： Three.js 文章标签： webgl 3d 前端

本文链接：https://blog.csdn.net/Miller777_/article/details/142854651

版权

Three.js 专栏收录该内容

134 篇文章 3 订阅

订阅专栏

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);
})