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

正在工作并添加了Texture，但在控制台中它设置了一条警告消息。

  

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
}