threeJS 模型过大加载速度慢优化体验

前言

模型一般都比普通的前端项目要大，普通的模型要在1MB，大一点的就上不封顶了。模型越大，电脑加载的时间就越长。为了避免用户判断为bug，或者随便点击导致产生其他bug。我们需要增加进度条来提示用户。

解决方案

增加加载动画

实现代码

    // 导入模型
    function importModel(){
        // 实例化加载器fbx
        const fbxLoader = new FBXLoader();
        // 实例化加载器gltf
        const gltfLoader = new GLTFLoader();
        // 实例化加较器draco -- 为了解决大型模型经过压缩无法直接加载的问题
        const dracoloader = new DRACOLoader();
        dracoloader.setDecoderPath("./draco/");
        // 设置解压模型工具
        gltfLoader.setDRACOLoader(dracoloader);
        // 创建一个Group来存放所有模型
        const group = new THREE.Group();
        // 加载模型的函数
        const loadModels = (urls) => {
            let loadedCount = urls.length;
            urls.forEach((item, index) => {
                if(item.type == 'gltf'){
                    gltfLoader.load(item.url, (gltf) => {
                        if(item.size){
                            gltf.scene.scale.set(item.size,item.size,item.size);// 设置模型渲染大小
                        }else{
                            gltf.scene.scale.set(10,10,10);// 设置模型渲染大小
                        }
                        if(item.pos){
                            gltf.scene.position.set(item.pos.x,item.pos.y,item.pos.z)
                        }else{
                            gltf.scene.position.set(0,0,0);//设置模型位置
                        }
                        group.add(gltf.scene);
                    },
                    (xhr) => {
                        // 计算加载进度百分比
                        let progress = Math.floor((xhr.loaded / xhr.total) * 100);
                        if (progress == 100) isloadModel+=1;
                        let percentage =Math.floor((isloadModel / loadedCount) * 100)
                        document.getElementById("percentage").innerText = percentage
                        if(isloadModel == urls.length){
                            document.getElementById('loading-mark').style.display = 'none'
                        }
                    },
                    // 模型加载错误
                    (error) => {
                        console.log(item.url, 'error');
                    }
                );
                }else{
                    fbxLoader.load(item.url, (model) => {
                        model.scale.set(0.1,0.1,0.1);// 设置模型渲染大小
                        if(item.pos){
                            model.position.set(item.pos.x,item.pos.y,item.pos.z)
                        }else{
                            model.position.set(0,0,0);//设置模型位置
                        }
                        group.add(model);
                    },
                        (xhr) => {
                            // 计算加载进度百分比
                            let progress = Math.floor((xhr.loaded / xhr.total) * 100);
                            if (progress == 100) isloadModel+=1;
                            let percentage =Math.floor((isloadModel / loadedCount) * 100)
                            document.getElementById("percentage").innerText = percentage
                            if(isloadModel == urls.length){
                                document.getElementById('loading-mark').style.display = 'none'
                            }
                        },
                        // 模型加载错误
                        (error) => {
                            console.log(item.url, 'error');
                        }
                    );
                }
            
            });
        };
        // 加载模型并添加到场景
        loadModels(modelList);
        scene.add(group);
    }

效果图