three.js：重用纹理？

Question

In my program I have several places where I instantiate geometries, and each place has its own preferences for how their geometries are to be meshed (double sided or not? Lambert or basic material?). However, they all use the same texture. I would like to load this common texture only once. This gives me a design problem:

When loading the texture using TextureLoader.load() , I only get to use the texture once, that is, inside the callback function that I pass to the load function. This means I have to collect all my geometry instances and each of their preferences before loading my texture, such that I can make it all available (through a closure) to my callback function when the loading is initiated.

I'm thinking whether there is a canonical way to solve this problem? I guess other three.js users might have encountered similar situations. I know how I could solve this problem using promises: the load function would return a promise representing the texture. This texture could then be passed to each of the sites that need to mesh geometries. This solution is convenient because I don't have to collect the big amount of geometry data merely to be able to pass it on later in one step.

But is there a similar convenient, or nearly as convenient solution to this problem, that stays in the realm of callback semantics?

Answer 1

I ended up going the Promise route: wrapping the the TextureLoader.load() call in Javascripts built-in promise-returning constructor named Promise :

var loadTexture_promise = ( texture_path, texture_loader ) => {
    var texture_promise;

    if (       loadTexture_promise.texturePromises_cache[texture_path] !== undefined ) {
        return loadTexture_promise.texturePromises_cache[texture_path]
    }

    texture_promise = new Promise(
        function( resolve, reject )
        {
            texture_loader.load(
                texture_path,
                function (texture) {
                    // Success callback of TextureLoader
                    // We're done, so tell the promise it is complete
                    resolve(texture);
                },
                function (XmlHttpRequest_instance) {
                    // Progress callback of TextureLoader
                },
                function (unknown_parameter) {
                    // Failure callback of TextureLoader
                    // Reject the promise with the failure
                    reject(new Error('Could not load texture ' + texture_path));
                }
            );
        }
    );

    // add texture_promise to cache:
    loadTexture_promise.texturePromises_cache[texture_path] = texture_promise;

    return texture_promise;
};
// establish cache object on the loadTexture_promise function:
loadTexture_promise.texturePromises_cache = [];

I then have a lambertMesher function that my geometry suppliers can call:

function lambertMesher ( aGeometry, aTexture_promise, doubleSided, debug ) {
    var aMesh_promise = aTexture_promise.then(
        ( resolved_texture ) =>
        {
            var material, mesh;

            if ( debug ) {
                console.log("resolved_texture: ", resolved_texture);
                console.log("aGeometry: ", aGeometry);
            }

            resolved_texture.minFilter = THREE.NearestFilter;

            if (doubleSided) {
                material = new THREE.MeshLambertMaterial( { map: resolved_texture, side: THREE.DoubleSide } );
            } else {
                material = new THREE.MeshLambertMaterial( { map: resolved_texture, emissive: 0xffffff } );
            }

            mesh = new THREE.Mesh(aGeometry, material);
            if ( debug ) {
                console.log("mesh: ", mesh);
            }
            return mesh

        },
        ( reason_of_textureLoading_failure ) =>
        {
            console.log( "meshing failed. Also: " + reason_of_textureLoading_failure )
        }
    );

    return aMesh_promise
}

Finally, this is how I call my lambertMesher :

var myPlateGeom = new THREE.PlateGeometry( myPlatePolygonSet, true );
var myPlateMesh_promise = utils_meshers.lambertMesher( myPlateGeom, myRobinieTexture_promise, true, false );

and then, finally finally, I add my mesh to my scene like this:

myPlateMesh_promise.then(
    (myPlateMesh) => { myScene.add( myPlateMesh ) },
    (reason)     =>   console.log( "failed to add myPlateMesh. Also: " + reason )
);