Texture issue while using THREE.TextureLoader over deprecated THREE.ImageUtils.loadTexture

Question

I was using this function to add Texture on a Cylinder.

function createElementMaterial() {
    THREE.ImageUtils.crossOrigin = '';
    var t = THREE.ImageUtils.loadTexture( IMG_MACHINE );
    t.wrapS = THREE.RepeatWrapping;
    t.wrapT = THREE.RepeatWrapping;
    t.offset.x = 90/(2*Math.PI);
    var m = new THREE.MeshBasicMaterial();
    m.map = t;
    return m;
}

which is working and adds Texture, but in console it sets a warning message.

THREE.ImageUtils.loadTexture has been deprecated. Use THREE.TextureLoader() instead.

Then following this documentation from threejs.org. I changed the function to this.

function createElementMaterial() {
    var loader = new THREE.TextureLoader();

    // load a resource
    loader.load(
        // resource URL
        IMG_MACHINE,
        // Function when resource is loaded
        function ( texture ) {
            // do something with the texture
                texture.wrapS = THREE.RepeatWrapping;
                texture.wrapT = THREE.RepeatWrapping;
                texture.offset.x = 90/(2*Math.PI);
            var material = new THREE.MeshBasicMaterial( {
                map: texture
            } );
        },
        // 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' );
        }
    );
}

With this code I am not being able to get that texture wrapping cylinder. Here's the before and after image. TIA.

Answer 1

You have to return a material from your function. You can do it like this:

function createElementMaterial() {

    var material = new THREE.MeshBasicMaterial(); // create a material

    var loader = new THREE.TextureLoader().load(
        // resource URL
        IMG_MACHINE,
        // Function when resource is loaded
        function ( texture ) {
            // do something with the texture
                texture.wrapS = THREE.RepeatWrapping;
                texture.wrapT = THREE.RepeatWrapping;
                texture.offset.x = 90/(2*Math.PI);
                material.map = texture; // set the material's map when when the texture is loaded
        },
        // 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' );
        }
    );
    return material; // return the material
}