Three.js 监听纹理加载

本文简介

本文介绍 Three.js 的基础方法：监听材质加载。

在 《Three.js 基础纹理贴图》 里介绍了如何给图形贴图，贴图前需要先把纹理加载好。我们基于这篇文章继续讲解如何监听材质加载成功或者失败。

监听单个材质

我们使用 TextureLoader 的 load() 方法加载纹理时，第一个参数传入纹理的路径，之后还可以多接受3个函数类型的参数。

根据 Three.js 的 TextureLoader.load 文档介绍，这几个参数是：

• 【参数1】url: 文件的URL或者路径。
• 【参数2】onLoad: 材质加载完时调用
• 【参数3】onProgress: 材质加载过程中调用，实例包含 total 和 loaded 。但文档说了在 Three.js r84 时启用了 TextureLoader 进度事件。
• 【参数4】onError: 在加载错误时被调用。

先上一个官方的例子

// 初始化一个加载器
const loader = new THREE.TextureLoader();

// 加载一个资源
loader.load(
    // 【参数1】资源URL
    'textures/land_ocean_ice_cloud_2048.jpg',

    // 【参数2】onLoad回调
    function ( texture ) {
        // 【才材质加载成功后执行】
        const material = new THREE.MeshBasicMaterial( {
            map: texture
         } );
    },

    // 【参数3】目前暂不支持onProgress的回调
    undefined,

    // 【参数4】onError回调，
    function ( err ) {
        console.error( '材质加载失败' );
    }
)

从官网给出的例子中可以看到，【参数3】原本用来监听材质加载进度的 onProgress() 方法用了 undefined 来代替占着位。

监听多个材质

如果要加载多个材质，我们可以使用 LoadingManager 来监听，这个方法可以配合 TextureLoader 一起用的。

LoadingManager 可以监听材质加载结果（成功或失败），也可以监听材质加载进度。

LoadingManager(onLoad, onProgress, onError) 接受3个回调函数，作用分别是：

• onLoad: (可选) 所有加载器加载完成后，将调用此函数。
• onProgress: (可选) 当每个项目完成后，将调用此函数。
• onError: (可选) 当一个加载器遇到错误时，将调用此函数。

我们需要在 new THREE.TextureLoader(loadingManager) 时将 loadingManager 传入。9

举个例子：

// 省略部分代码

// 设置加载管理器
const loadingManager = new THREE.LoadingManager(
  function() {
    console.log('图片加载完成')
  },
  function(url, loaded, total) {
    console.log(`图片加载中，本次加载的材质${url}，第 ${loaded}/${total} 个材质`)
  },
  function(err) {
    console.log('图片加载失败', err)
  }
)

// Three提供的纹理加载器
const textureLoader = new THREE.TextureLoader(loadingManager)

// 导入纹理贴图基础贴图
const imgTexture1 = textureLoader.load('../assets/images/140.jpg')
const imgTexture2 = textureLoader.load('../assets/images/141.jpg')

此时控制台会依次输出

图片加载中，本次加载的材质../assets/images/140.jpg，第 1/2 个材质

图片加载中，本次加载的材质../assets/images/141.jpg，第 2/2 个材质

图片加载完成

这是在 140.jpg 和 141.jpg 都存在的情况下会这样输出。

假设要加载2个材质，其中一个材质是存在的，另一个材质不存在，就会分别输出每个材质的结果。

// 省略部分代码

// 导入纹理贴图基础贴图
const imgTexture1 = textureLoader.load('../assets/images/140.jpg') // 该材质是存在的
const imgTexture2 = textureLoader.load('../assets/images/100.jpg') // 该材质不存在

这种情况会这样输出：

图片加载失败 ../assets/images/13.jpg

图片加载中，本次加载的材质../assets/images/13.jpg，第 1/2 个材质

图片加载中，本次加载的材质../assets/images/140.jpg，第 2/2 个材质

图片加载完成

可以在 onError 里监听到当前哪个材质加载失败，参数会将加载失败的材质路径返回给开发者。

日常开发推荐使用 LoadingManager ，尤其是要监听加载多个材质时，用 LoadingManager 可以帮我们实现加载进度条。

推荐阅读

👍《Three.js 起飞！》

👍《Three.js 场景 Scene》

👍《Three.js 辅助坐标轴》

👍《Three.js 性能监视器 Stats》

👍《Three.js 这样写就有阴影效果啦》

👍《Three.js 基础纹理贴图》

点赞 + 关注 + 收藏 = 学会了 代码仓库