123. 实战：酷家乐装修编辑器（二十七）

上节用 draco 压缩了模型，并且加了 loading：

2025-07-27 18.53.06.gif

提升了加载性能、操作体验。

这节我们美化一下 loading，改成进度条的形式。

我们用 antd 的 Progress 组件写进度条：

先把这个 setModelLoaded 注释掉，我们来调样式：

<div id="loading">
  <p>loading...</p>
  <Progress
    percent={50}
    style={{width:500}}
    percentPosition={{ align: 'start', type: 'inner' }}
    size={[500, 30]}
    strokeColor="#B7EB8F"
  />
</div>

用 Progress 组件来做进度条。

改下样式：

#loading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

样式调好了，接下来调数值。

gltfLoader.loadAsync 的第二个参数的回调函数就可以拿到进度：

'./bed.glb': gltfLoader.loadAsync('./bed.glb', (event) => {
  const percent = event.loaded / event.total;
  console.log('进度：', percent * 100 + ' %')
} ),

每个模型的加载都可以计算这样的进度

我们每个模型的进度算 25%，这样 4 个模型加起来正好 100% 进度。

当然，你也可以大模型进度分配的多一点，小模型少一点，这里就不分那么细了。

useEffect(() => {
    const percentArr = [0, 0, 0, 0];
    ['./bed.glb', './dining-table.glb', './door.glb', './window.glb'].forEach((modelUrl, index) => {
      modelMap[modelUrl] = gltfLoader.loadAsync(modelUrl, (event) => {
        const per = event.loaded / event.total;
        percentArr[index] = per;

        let total = 0;
        percentArr.forEach(item => {
          total += item;
        });
        setPercent(Math.floor(total / 4 * 100));
      });
    })
}, []);

把加载模型的逻辑放到组件里，用一个数组保存每个模型的进度。

进度更新的时候计算下总进度，除以 4 乘以 100 然后取整，就是 0-100 的整数。

试一下：

2025-07-27 22.11.37.gif

当然，本地的网速会比较快，我们用 devtools 把网速调成 4g 的：

2025-07-27 22.12.23.gif

这样就明显多了。

去掉 setModelLoaded(true) 的注释，看下整体效果：

2025-07-27 22.13.40.gif

然后我们把 Header 部分改一下：

function Header() {
    return <div className="Header">
        <h1 className="logo">仿酷家乐装修编辑器</h1>
    </div>
}

export default Header;

.logo {
  line-height: 60px;
  margin: 0;
  margin-left: 20px;
  font-size: 36px;
  color: #999;
  font-weight: normal;
  text-shadow: 2px 2px 4px lightblue;
}

2025-07-27 22.32.18.gif

案例代码上传了小册仓库

总结

这节我们美化了下进度条。

gltfLoader.loadAsync 可以在第二个参数的回调函数拿到进度，我们可以把 4 个模型的进度都记录在数组里，然后求和除以 4，就是整体的进度。

当然，你可以给每个模型分配不同的权重，比如大模型的进度占比多一些。

下节我们来实现编辑完之后的全景看房功能。

123. 实战：酷家乐装修编辑器（二十七）

总结

评论