湖北强涛建设工程有限公司网站,潍坊网站建设最新报价,工作表,免费访问国外网站的app本文简介 本文介绍 Three.js 的基础方法#xff1a;监听材质加载。 在 《Three.js 基础纹理贴图》 里介绍了如何给图形贴图#xff0c;贴图前需要先把纹理加载好。我们基于这篇文章继续讲解如何监听材质加载成功或者失败。 监听单个材质 我们使用 TextureLoader 的 load() 方… 本文简介 本文介绍 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: 在加载错误时被调用。 先上一个官方的例子 js // 初始化一个加载器 const loader new THREE.TextureLoader(); // 加载一个资源 loader.load( // 【参数1】资源URL textures/landoceanicecloud2048.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 举个例子 js // 省略部分代码 // 设置加载管理器 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个材质其中一个材质是存在的另一个材质不存在就会分别输出每个材质的结果。 js // 省略部分代码 // 导入纹理贴图基础贴图 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 基础纹理贴图》 点赞 关注 收藏 学会了
