在不推荐使用的 THREE.ImageUtils.loadTexture 上使用 THREE.TextureLoader 时的纹理问题 [英] Texture issue while using THREE.TextureLoader over deprecated THREE.ImageUtils.loadTexture

问题描述

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

function createElementMaterial() {三.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;返回 m;}

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

<块引用>

THREE.ImageUtils.loadTexture 已被弃用.用THREE.TextureLoader() 代替.

然后按照

解决方案

你必须从你的函数中返回一个材料.你可以这样做:

function createElementMaterial() {var material = new THREE.MeshBasicMaterial();//创建材质var loader = new THREE.TextureLoader().load(//资源地址IMG_MACHINE,//资源加载时的函数功能(纹理){//对纹理做一些事情texture.wrapS = THREE.RepeatWrapping;texture.wrapT = THREE.RepeatWrapping;texture.offset.x = 90/(2*Math.PI);material.map = 纹理；//加载纹理时设置材质的贴图},//下载过程中调用的函数函数 ( xhr ) {console.log( (xhr.loaded/xhr.total * 100) + '%loaded' );},//下载错误时调用的函数函数 ( xhr ) {console.log('发生错误');});退回材料；//返回材料}

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.

解决方案

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
}

这篇关于在不推荐使用的 THREE.ImageUtils.loadTexture 上使用 THREE.TextureLoader 时的纹理问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！