从不同的网址加载多个纹理失败

Question

我正在尝试在从不同URL加载的平面上渲染纹理。出于某种原因，在第二张或第三张图像之后，我可以在浏览器中看到加载的图像卡住了并且没有被渲染。

添加使用的代码：

function init() {
   loadPicturesFromDirectUrl();
}

function loadPicturesFromDirectUrl(currentPictureIndex) {
    if (currentPictureIndex === undefined) {
        currentPictureIndex = 0;
    }
    var picture = data.pictures[currentPictureIndex];
    var loader = new THREE.TextureLoader();
    loader.load(picture.url, function (texture) {
        renderPicture(picture, texture);
        currentPictureIndex++;
        if (currentPictureIndex > data.pictures.length - 1) {
            return;
        }
        loadPicturesFromDirectUrl(currentPictureIndex);
    }, null, function (e) {
        console.log(e);
    });
}

function renderPicture(picture, texture) {
    var planeGeometry = new THREE.PlaneGeometry(picture.size.width, picture.size.height);
    var planeMaterial = new THREE.MeshBasicMaterial({ map: texture });
    var planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
    planeMesh.position.x = picture.location.x;
    planeMesh.position.y = picture.location.y;
    planeMesh.rotateY(myzeum.toRadians(180));
    scene.add(planeMesh);
}

Answer 1

您可能希望尝试将所有图片预加载到一个函数中，并将它们存储在数组中，并仅在全部加载后才渲染它们。像这样：

var all_textures = [];
function init() {
    loadPicturesFromDirectUrl();
    for int (i = 0; i < all_picture.length; i++) {
        renderPicture(data.pictures[i], all_textures[i])
    }
}
function loadPicturesFromDirectUrl(currentPictureIndex) {
    if (currentPictureIndex === undefined) {
        currentPictureIndex = 0;
    }
    var picture = data.pictures[currentPictureIndex];
    var loader = new THREE.TextureLoader();
    loader.load(picture.url, function (texture) {
        all_textures[currentPictureIndex] = texture
        currentPictureIndex++;
        if (currentPictureIndex > data.pictures.length - 1) {
            return;
        }
        loadPicturesFromDirectUrl(currentPictureIndex);
    }, null, function (e) {
        console.log(e);
    });
}

function renderPicture(picture, texture) {
    var planeGeometry = new THREE.PlaneGeometry(picture.size.width, picture.size.height);
    var planeMaterial = new THREE.MeshBasicMaterial({ map: texture });
    var planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
    planeMesh.position.x = picture.location.x;
    planeMesh.position.y = picture.location.y;
    planeMesh.rotateY(myzeum.toRadians(180));
    scene.add(planeMesh);
}