Question

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

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

任何人的示例代码？我可以预先计算Blender中的mipmap并将其保存到dae文件中吗？我怎么做？我要去搜索Blender文档...虽然欢迎提示......

Answer 1

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

把它放在three.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;
}

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

1 个答案: