如何检测纹理图像何时在 THREE.Mesh 中加载完成？答案

【问题标题】：How do I detect when texture image is done loading in THREE.Mesh?如何检测纹理图像何时在 THREE.Mesh 中加载完成？
【发布时间】：2012-12-23 09:45:36
【问题描述】：

我使用 ColladaLoader 在 Three.js 中加载 3D 场景。我尝试从网格对象纹理图像创建 mipmaps 图像。问题是当我访问图像宽度和高度时，图像没有完全加载。在完全加载之前，宽度和高度都为零。

加载 dae 文件时，ColladaLoader 触发“完成”功能。然后我在场景中搜索各个场景对象。具有图像纹理的网格对象之一需要创建 mipmap。问题是当我访问图像时，它的属性没有设置。渲染场景时，包括图像纹理在内的所有对象都被完美渲染（尽管没有 mipmap）。有没有办法让我将事件处理程序添加到图像加载完成时触发的纹理/图像？如果有这样的事件（在 Three.js 对象中），我可以在场景/对象可能已经渲染时添加 mipmaps 吗？我必须采取什么措施来提醒渲染管道 mipmap 已更改？

示例代码有人吗？我可以在 Blender 中预先计算 mipmap 并将它们保存到 dae 文件中吗？我怎么做？我要搜索 Blender 文档...不过欢迎提示...

【问题讨论】：

标签： three.js webgl mipmaps

【解决方案1】：

您可以覆盖 THREE.ImageLoader.prototype.load 以利用纹理加载过程，并在加载图像和渲染器使用图像之间进行任何修改。

把它放在三个.js 脚本标签之后。此函数中的代码与 three.js 原始代码完全相同，除了我的注释标记了您可以放置 mipmap 生成的位置或任何您想要的位置。

THREE.ImageLoader.prototype.load = function ( url, image ) {
    var scope = this;
    if ( image === undefined ) image = new Image();
    image.addEventListener( 'load', function () {
                    // DO WHATEVER WITH THE IMAGE HERE
        scope.dispatchEvent( { type: 'load', content: image } );
    }, false );
    image.addEventListener( 'error', function () {
        scope.dispatchEvent( { type: 'error', message: 'Couldn\'t load URL [' + url + ']' } );
    }, false );
    if ( scope.crossOrigin ) image.crossOrigin = scope.crossOrigin;
    image.src = url;
}

【讨论】：

顺便说一句。您可以使用这种方法自动将 Collada 模型中的纹理大小调整为二次幂（我就是这样做的），这可能会部分回答您的另一个问题：stackoverflow.com/questions/14224403/…
这似乎正是我想要的。
虽然@yaku有一件事；为了不将过多的专用/应用程序特定代码塞入 Three.js 库中，是否可以在您放置评论的下方行中修改“加载”事件。这样图片的修改可以在应用代码中进行，而不是在 Three.js 库中（升级到下一个版本 Three.js 时不需要修改那么多代码。
所以...如果我添加一个事件处理程序来侦听相关图像的加载事件，并向“加载”事件添加一个“URL”属性，以便我可以识别哪个图像已加载以及要在哪些对象上修改 UV 贴图。是否可以这样做，还是基于 DOM 消息的事件模型？ IE。事件是同步调用事件处理程序（阻止处理上面的代码）还是继续处理，只要处理“加载”消息，就会调用事件？？？？？
不要纠缠你或任何事情，我非常感谢你的回答，但我只是尽量减少对标准库的修改。也许在事件中添加一个 URL 标识可能是对 Three.js 的一个很好的修改？