VR全景看房全局加载进度管理实现页面loading

VR全景看房当我们实现了VR全景看房房间切换以及地图动画，还需要再进行优化，因为图片过多过大，我们需要一段时间来加载这些图片，这时候我们就需要一个进度提示，让访客知道图片加载进度。

创建加载进度

创建一个div当我们的资源加载时，显示这些信息给用户返回当前状态，当进度为100%的时候就隐藏信息.

<div class="loading" v-if="progress != 100"></div>
<div class="progress" v-if="progress != 100">
<img src="../assets/loading.gif" alt=""/>
<span>房间加载中：{{ progress }}%</span>
</div>

加载状态

纹理加载进度是通过threejs的DefaultLoadingManager来获取.

THREE.DefaultLoadingManager.onProgress = function (item, loaded, total) {
  console.log(item, loaded, total);
  progress.value = new Number((loaded / total) * 100).toFixed(2);
};

VR全景看房视频教程

当前内容为 threejs视频教程 Three.js可视化企业实战WEBGL课 -全景看房与科技展馆-全局加载进度管理实现页面loading-学习笔记

VR全景看房演示地址

vue3 VR全景看房实例演示地址

vue3 全景看房完整实例代码下载

vue3 全景看房实例代码开发环境基于vue3 vite js nodejs 14

请确保有一定的代码基础

当前资源仅为跟随视频教程学习的实践代码非视频教程。

代码效果可以查看上方的演示地址