【three.js+vue】模型加载慢？加载模型进度条也是一条解决思路

为什么要加一个进度条

3D模型加载慢，心情不是很美丽:（
为什么不试试进度条 呢？一个既简单又美丽的选择！（我看别人加载个什么都要加的我眼红我也想加）
BTW其实我写这篇的时候俺的模型加载速度已经达到了1s以内，但是那个美美的进度条还是让我的心情美美美美哒(# ^ .^#)
事实证明ui的力量真的很神奇~

用到的东西

  1. dataV ，有个现成的进度条；（大神们可以自己写另外炫酷的，我就用这个蛮好看的）
    怎么引用链接放在这里大家自己去看看哈
    你需要找到一个叫进度池的东西就是长这样
  2. three.js 的 gltf 加载器；
    // glTF加载器
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
    加载器加载gltf、glb格式的模型怪好用，还带一个进度的哈

好像是没别的了

给你看我是咋写的

<templete>
    <div id="per">
      <dv-percent-pond :config="config" style="width:200px;height:30px;" />
    </div>
</template>

data() {
    return {
      config: { // 进度条config
        value: 0,
        localGradient: true
      },
    };
  },

gltfLoader里面是这样写的：
一张截图
加载完进度条就消失啦！
效果如图

# vue.js # 前端 # ui # webgl
Logo
天工造物局

北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台

更多推荐

deck.gl TripsLayer 出租车轨迹动画示例实战：从示例运行到着色器原理

TripsLayer 是 deck.gl 中用于渲染**随时间流动的轨迹动画**（如出租车行程、物流路径、迁徙路线）的核心图层。本文以仓库中的最小独立示例 [examples/website/trips](https://link.gitcode.com/i/1442af8f442f4cff39ff546e050fceb5) 为骨架，带你完成从安装依赖、启动应用、理解曼哈顿出租车数据格式，到深入

avatar 天工造物局

Foundry Anvil 中 eth_simulateV1 的 Blob 交易与 Blob Gas 字段规范化：原理、实现与测试验证

本篇技术指南以 [anvil-simulate-blob-transactions.md](https://link.gitcode.com/i/3d2ebe227262de169335eb290af80da8) 这条 changelog 条目为起点，深入剖析 Foundry Anvil 对 `eth_simulateV1` RPC 返回结果中 blob（EIP-4844）交易与 blob gas

avatar 天工造物局

LMCache CLI 实战：用 `lmcache kvcache clear` 管理运行中服务的 KV Cache 状态

本文是一份针对 LMCache 官方 CLI 命令 `lmcache kvcache` 的完整技术指南。该命令用于在**运行中的 LMCache 服务（MP HTTP server）**上管理 KV cache 状态，当前提供 `clear` 子命令，用于清空 L1（CPU 内存）层中缓存的全部 KV 数据。读完本文，你将掌握该命令的完整参数体系、退出码语义、终端/JSON/静默三种输出模式，并能

avatar 天工造物局