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）

1 个答案: