100个酷炫的数据可视化大屏总有一款适合你(含演示实例)，30款 vue3 数据可视化大屏登录页下载

threejs DefaultLoadingManager 加载事件有哪些?

threejs yekong

THREE.DefaultLoadingManager是在使用Three.js库时负责处理加载资源的默认加载管理器。它有几个关键的事件，可以用于处理加载过程中的不同阶段。它提供了四个加载事件，分别是 onStart、onProgress、onLoad 和 onError，每个事件都有不同的作用：

onStart(url, itemsLoaded, itemsTotal)：

  • 作用：当资源加载过程开始时触发此事件。在整个加载过程中，通常在开始加载时执行一次。
  • 参数：
    • url：正在加载的资源的URL。
    • itemsLoaded：当前已加载的资源数量。
    • itemsTotal：总共需要加载的资源数量。

用法示例：

THREE.DefaultLoadingManager.onStart = function (url, itemsLoaded, itemsTotal) {
   // 显示加载提示或进度条
     console.log('Started loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.');
};

onProgress(url, itemsLoaded, itemsTotal)：

  • 作用：当每个资源加载进度更新时触发此事件。可以用来实时更新加载进度信息。
  • 参数：
    • url：正在加载的资源的URL。
    • itemsLoaded：当前已加载的资源数量。
    • itemsTotal：总共需要加载的资源数量。

用法示例：

THREE.DefaultLoadingManager.onProgress = function (url, itemsLoaded, itemsTotal) {
   // 计算加载进度，并更新进度条
    console.log('Loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.');
};

onLoad()：

  • 作用：当所有资源加载成功完成时触发此事件。在整个加载过程结束时执行一次。
  • 参数：无。
    用法示例：
THREE.DefaultLoadingManager.onLoad = function () {
   // 执行加载后的操作，例如隐藏加载提示或进度条
   console.log('Loading complete!');
};

onError(url)：

  • 作用：当某个资源加载失败时触发此事件。用于处理加载失败的情况。
  • 参数：
    • url：加载失败的资源的URL。
      用法示例：
THREE.DefaultLoadingManager.onError = function (url) {
   // 显示错误提示或处理错误
   console.log('There was an error loading ' + url);
};

通过使用 DefaultLoadingManager 或自定义的 LoadingManager，你可以注册这些加载事件的回调函数，以便在资源加载过程中进行必要的处理和反馈。例如，在 onProgress 中可以更新加载进度条，onLoad 中可以触发场景的初始化，onError 中可以处理加载失败的情况等。这样可以更好地控制和监控 Three.js 中资源加载的过程。

我们可以用在threejs的项目资源加载中，用于判断资源是否加载完毕。比如在 vr全景看房 项目中就使用到了DefaultLoadingManager

喜欢