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

问题:

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.

回答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 } 

文章来源: Texture issue while using THREE.TextureLoader over deprecated THREE.ImageUtils.loadTexture