Javascript 更新纹理的正确方法（THREE.JS）

我有一些复选框布尔值，可以在three.js中将不同的纹理加载到球体

我遇到了这些图像加载速度不够快的问题，这会对性能造成一些拖累。我想我需要预加载它们，但不确定最好的方式。我还包括我目前的代码，因为可能有一个更好的解决方案或一些我不需要的代码

function showPoliticalMap(){
    var world = scene.getObjectByName("world").children[1],
        cloud = scene.getObjectByName("cloud"),
        uri = world.material.map.image.baseURI;

    scene.remove(cloud);
    spotlight.intensity = 0;
    ambientLight.intensity = 1;
    world.material.map.image.currentSrc = uri + "img/earthmapoutlineblue_optimized.jpg";
    world.material.map.image.src = uri + "img/earthmapoutlineblue_optimized.jpg";
    world.material.map.needsUpdate = true;
    world.material.needsUpdate = true;
}

---

如果要在纹理更改后移除云并更改灯光强度，则需要在更改之前加载纹理。您可以使用

TextureLoader

为此，请检查。在下面的示例中，您实际上不需要下载进度回调，但是错误回调可以很好地保留

function showPoliticalMap(){
    var world = scene.getObjectByName("world").children[1],
        cloud = scene.getObjectByName("cloud"),
        uri = world.material.map.image.baseURI;

    // instantiate a loader
    var loader = new THREE.TextureLoader();

    // load a resource
    loader.load(
        // resource URL
        uri + "img/earthmapoutlineblue_optimized.jpg",
        // Function when resource is loaded
        function ( texture ) {
            // do something with the texture
            world.material.map = texture;
            world.material.needsUpdate = true;

            scene.remove(cloud);
            spotlight.intensity = 0;
            ambientLight.intensity = 1;
        },
        // Function called when download progresses
        function ( xhr ) {
            console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
        },
        // Function called when download errors
        function ( xhr ) {
            console.log( 'An error happened' );
        }
    );
}

---

我还没有测试过它，所以不确定它是否能直接工作，但它显示了它的原理。

如果要在纹理更改后移除云并更改光强度，则需要在更改之前加载纹理。您可以使用

TextureLoader

为此，请检查。在下面的示例中，您实际上不需要下载进度回调，但是错误回调可以很好地保留

function showPoliticalMap(){
    var world = scene.getObjectByName("world").children[1],
        cloud = scene.getObjectByName("cloud"),
        uri = world.material.map.image.baseURI;

    // instantiate a loader
    var loader = new THREE.TextureLoader();

    // load a resource
    loader.load(
        // resource URL
        uri + "img/earthmapoutlineblue_optimized.jpg",
        // Function when resource is loaded
        function ( texture ) {
            // do something with the texture
            world.material.map = texture;
            world.material.needsUpdate = true;

            scene.remove(cloud);
            spotlight.intensity = 0;
            ambientLight.intensity = 1;
        },
        // Function called when download progresses
        function ( xhr ) {
            console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
        },
        // Function called when download errors
        function ( xhr ) {
            console.log( 'An error happened' );
        }
    );
}

---

我还没有测试过它，所以不确定它是否能直接工作，但它显示了它的原理。

啊，这些确实有效。我不确定这是否是更新纹理的正确方法，但现在我知道了！非常感谢。顺便说一句，纹理加载器回调被窃听/不幸无法工作。看看这个问题：啊，这些确实有效。我不确定这是否是更新纹理的正确方法，但现在我知道了！非常感谢。顺便说一句，纹理加载器回调被窃听/不幸无法工作。见本期：