Question

我正在尝试使用fetch语句加载本地图像并在我的（three.js）应用程序中使用它。它现在的方式，我得到一个无限循环，我不知道为什么。

这是一个很大的应用程序，所以我把相关的片段拉出来了：

var mesh;

function fetch_img(filename) {

    fetch(filename).then(function(response) {

        if (response.ok) {

            return response.blob();
        }
        throw new Error('Network response was an error.');

    }).then(function(blob) {

        mesh.material.map.image.src = URL.createObjectURL(blob);
        mesh.material.map.needsUpdate = true;

    }).catch(function(error) {

        console.log('Fetch failed because: ' + error.message);
    });

}

function start() {

    var material = new THREE.MeshBasicMaterial({

        map: new THREE.TextureLoader().load('loading.jpg', function(texture) {

            mesh = new THREE.Mesh(geometry, material);
            scene.add(mesh);

            fetch_img('test1.jpg');
        })
    });
}

我的想法是使用“加载”＃39;图像然后在创建场景并加载场景时，我通过调用fetch_img()加载真实图像。最终，我会根据用户输入从多个地方拨打fetch_img()。

我希望在尝试理解JavaScript承诺时我做错了 - 有人能指出我正确的方向吗？

Answer 1

以下是发生的事情：

在THREE.TextureLoader内，它正在使用THREE.ImageLoader。 THREE.ImageLoader创建了一个img元素，并为其分配了一个onload事件监听器。然后，它会将img.src设置为您提供的网址。

当您为image.src属性赋予一个新值时，该事件将被触发，并转到其处理程序，该处理程序仍分配给您在THREE.TextureLoader定义中提供的匿名函数。

其余的是历史悠久的。

要修复此问题，请创建新图片，将网址指定给其src媒体资源，然后将整个map.image替换为新图片。

使用fetch（）加载纹理的意外递归

1 个答案: