更新纹理的正确方法 (THREE.JS)

Question

我有一些复选框布尔值可以将不同的纹理加载到 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;
}

Answer 1

如果要在更改纹理后去除云层并更改光照强度，则需要先加载纹理。您可以为此使用 TextureLoader，检查 documentation。在下面的示例中，您实际上不需要下载进度回调，但保留错误回调可能会很好。

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' );
        }
    );
}

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

更新纹理的正确方法 (THREE.JS)

Proper way to update texture (THREE.JS)

javascript

textures

three.js