TextureLoader.load()

TextureLoader.load()方法是three.js库中的一个类，用于加载纹理贴图。该方法会返回一个纹理贴图Texture对象，以及一个回调函数。在该回调函数内，我们可以做一些纹理贴图的初始化操作。

语法

TextureLoader.load(url: string, onLoad?: Function, onProgress?: Function, onError?: Function): Texture;

参数

• url：一个字符串类型的参数，表示要加载的纹理贴图的URL地址。
• onLoad：一个可选的回调函数，表示纹理加载成功的回调函数。
• onProgress：一个可选的回调函数，表示纹理加载进度的回调函数。
• onError：一个可选的回调函数，表示纹理加载错误的回调函数。

返回值

TextureLoader.load()方法返回一个纹理贴图Texture对象，以及一个回调函数。

示例

const textureLoader = new THREE.TextureLoader();

// 加载纹理贴图
textureLoader.load(
    'model/texture.jpg',
    function (texture) { // 纹理加载成功的回调函数
        // 纹理贴图加载成功后，可以将其应用到模型或网格的材质中
        const material = new THREE.MeshBasicMaterial({
            map: texture // 将纹理贴图应用到材质的map属性中
        });
        
        const mesh = new THREE.Mesh(geometry, material); // 将材质应用到网格中
        scene.add(mesh);// 将网格添加到场景中
    },
    function (xhr) { // 纹理加载进度的回调函数
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    },
    function (error) { // 纹理加载错误的回调函数
        console.log('An error happened' + error);
    }
);

备注

• TextureLoader.load()方法中的url参数也可以是一个Data URI，如data:image/png;base64,XXX。
• 如果使用TextureLoader.load()方法加载的纹理贴图需要使用跨域资源共享（CORS)策略，需要设置服务器端的CORS头部信息，参考MDN文档了解CORS相关内容。