THREE.TextureLoaderを使用しているときにテクスチャの問題THREE.ImageUtils.loadTexture

Question

この関数を使用して、シリンダにテクスチャを追加していました。

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

テクスチャを追加していますが、コンソールには警告メッセージが表示されます。

THREE.ImageUtils.loadTextureは推奨されていません。代わりに THREE.TextureLoader（）を使用してください。

次に、thisの文書threejs.orgからです。私はこれに機能を変更しました。

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

このコードでは、そのテクスチャラッピングシリンダを取得できません。前後の画像は次のとおりです。 TIA。

Answer 1

機能から材料を返却する必要があります。あなたは次のようにすることができます：

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 
}