Textur-Problem bei der Verwendung von THREE.TextureLoader über veraltet THREE.ImageUtils.loadTexture

Question

Ich habe diese Funktion verwendet, um Textur auf einem Zylinder hinzuzufügen.

das funktioniert und fügt Textur, aber in der Konsole stellt es eine Warnmeldung.

THREE.ImageUtils.loadTexture ist veraltet. Verwenden Sie stattdessen THREE.TextureLoader().

folgende Dann this Dokumentation von threejs.org. Ich habe die Funktion geändert.

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

Mit diesem Code bin ich nicht in der Lage, diese Textur Verpackungszylinder zu bekommen. Hier ist das Vorher-Nachher-Bild. TIA.

Answer 1

Sie müssen ein Material von Ihrer Funktion zurückgeben. Sie können es so tun:

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 
}