在已弃用的 THREE.ImageUtils.loadTexture 上使用 THREE.TextureLoader 时出现纹理问题

我正在使用这个函数在圆柱体上添加纹理。

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 https://threejs.org/docs/#api/loaders/TextureLoader文档来自Threejs.org https://threejs.org/docs/#api/loaders/TextureLoader。我把这个功能改成了这个。

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.

您必须从您的职能中返回材料。你可以这样做：

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
}