Three.js 监听纹理加载
标签:
JavaScript
监听单个材质
我们使用 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
可以帮我们实现加载进度条。
点击查看更多内容
为 TA 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦