1. 首页
  2. three.js

three.js加载材质纹理图像时如何使用async/await/loadAsync

我有一个.obj和.mtl以及我想要渲染的纹理图像。n场景是静态的,所以我想在加载资源后显式调用renderer.render()命令一次(不要使用animate())进行渲染,并查看纹理。n但是看不到纹理。n要等待纹理加载,I:n- 在加载.mtl和.obj文件时,调用loadAsync()而不是load(),n- n- 在某些调用之前添加wait(mtlLoader.loadAsync, 材料预载, objLoader.loadAsync)n- 稍微更改文件MTLLoader、OBJLoader、,与参考(来自三个js/release)相比/three.js-r120/示例/jsm/装载机/MTLLoader.js)(更改是为了适应异步/等待更改)n更改可以工作,但不完全理解原因,并且想知道具体原因。n,关于在其中一个函数中放置async/await,我有一个问题(MTLLoader.MaterialCreator::创建)n在示例13中_MTLLoader.js,这是程序流程:nMTLLoader.MaterialCreator::preloadMTLLoader.MaterialCreator::createMTLLoader.MaterialCreator::createMaterial_n在示例13中_OBJLoader.js, 这是程序流程:n*OBJLoader::parseMTLLoader.MaterialCreator::createn我将*async/await放在*MTLLoader.MaterialCreator函数中:*preload, create, createMaterial_.n理性的做法是在继续程序之前等待纹理加载。n用例1n在这种情况下:n- 在程序继续之前加载纹理。这可以在日志中看到:定义材质objLoader.materials.materials {test2: MeshPhongMaterial}从MTLLoader.MaterialCreator::create定义贴图图像objLoader.materials.materials.test2.map.image But the texture is not displayedThe code for this case can be seen here 3UseCase2If I take-out the async/await>在程序继续之前未加载纹理。这可以在日志中看到:材质列表为空objLoader.materials.materials {}材质测试2未定义objLoader.materials.materials.test2 undefined但显示了纹理…这种情况下的代码可以在这里看到5(出于某种原因,我需要在JSFIDLE中多次单击Run以查看纹理,否则仅显示白色补丁)可以看到)这两种情况之间唯一的变化是>的值(这两种情况的行为对于单渲染或animate()是相同的)为什么在MTLLoader.MaterialCreator::create,中放置async/await时,纹理看不到?谢谢对MTLLoader.load()的onLoad()回调不会等到纹理完全加载。这是有意的,因为在某些用例中,纹理定义足以开始渲染。这意味着您不想等到所有资源全部加载完毕。如果您想这样做,请使用LoadingManager。创建此类的自定义对象并将其传递给MTLLoader和OBJLoader”的ctor。然后,您可以为LoadingManager.onLoad().分配一个回调,在我的示例中,我使用的是await mtlLoader.loadAsync( mtlFilename ).then( onLoad_mtlLoader )而不是onLoad_mtlLoader中的MTLLoader.load(),我调用:let>and then I call onLoad_FileObj_objLoader(它不是异步的,所以不需要等待它)onLoad_FileObj_objLoader(objInstance);这都是在调用renderer.render( scene, camera );之前完成的,因此我希望在调用渲染时,纹理已完全加载。这可以在这里10中看到。您能显示代码没有等待的地方吗?关于LoadingManager,我正在使用它,但用途不同(用于调整url)你能举个例子说明如何传入LoadingManager和如何使用LoadingManager.onLoad(),以及async/await吗?我本可以在回调onLoad_FileObj_objLoader中继续调用渲染并继续程序的其余部分,但我认为我可以使用async/await/loadAsync(为了更清晰)。(顺便说一句:我在你的另一个问题15的评论中了解到loadAsync()而不是load(),我还以为async/awit/loadAsync()可以一起取代回调地狱)谢谢!n- 定义材质objLoader.materials.materials {test2: MeshPhongMaterial}n- 从MTLLoader.MaterialCreator::create定义贴图图像objLoader.materials.materials.test2.map.image n- 定义贴图图像objLoader.materials.materials.test2.map.image n- But the texture is not displayedThe code for this case can be seen here 3n- 材质列表为空objLoader.materials.materials {}n- 材质测试2未定义objLoader.materials.materials.test2 undefinedn- 但显示了纹理…这种情况下的代码可以在这里看到5(出于某种原因,我需要在JSFIDLE中多次单击Run以查看纹理,否则仅显示白色补丁)可以看到)n How to use async/await/loadAsync when loading a material texture imagen

three.js加载材质纹理图像时如何使用async/await/loadAsync 为WP2原创文章,链接:https://www.wp2.cn/three-js/three-js%e5%8a%a0%e8%bd%bd%e6%9d%90%e8%b4%a8%e7%ba%b9%e7%90%86%e5%9b%be%e5%83%8f%e6%97%b6%e5%a6%82%e4%bd%95%e4%bd%bf%e7%94%a8async-await-loadasync/