ThreeJS纹理应用报错：mapTexelToLinear无匹配重载函数

嘿，我来帮你排查这个问题！你遇到的Shader错误其实是由两个关键问题导致的，咱们一步步来解决：

问题1：错误传递了TextureLoader实例而非加载后的纹理对象 #

你现在的代码里直接把THREE.TextureLoader的实例赋值给了材质的map属性，但TextureLoader.load()是异步方法，它返回的是loader本身，而不是加载完成的纹理。Shader尝试把这个loader实例当作纹理处理，自然会出现类型不匹配的错误。

问题2：已废弃的MeshFaceMaterial #

THREE.MeshFaceMaterial在新版本的Three.js中已经被移除了，现在直接把材质数组传给THREE.Mesh的第二个参数即可。

修正后的代码示例 #

方式1：使用异步回调加载纹理（最稳妥） #

var geometry = new THREE.BoxGeometry(1, 1, 1);
var textureLoader = new THREE.TextureLoader();

// 异步加载纹理，在回调中创建立方体
textureLoader.load("img/texture01.jpg", function(cubeTexture) {
    // 因为六个面用同一个材质，不需要创建6个，一个就够
    var cubeMaterial = new THREE.MeshBasicMaterial({
        map: cubeTexture,
        side: THREE.DoubleSide
    });
    
    // 直接传入材质（单个材质或数组都可以）
    var cube = new THREE.Mesh(geometry, cubeMaterial);
    
    // 记得把立方体添加到场景中
    scene.add(cube);
}, undefined, function(error) {
    console.error("纹理加载失败:", error);
});

方式2：如果使用ES6+的async/await（更简洁） #

async function createCube() {
    var geometry = new THREE.BoxGeometry(1, 1, 1);
    var textureLoader = new THREE.TextureLoader();
    
    // 等待纹理加载完成
    const cubeTexture = await textureLoader.loadAsync("img/texture01.jpg");
    
    var cubeMaterial = new THREE.MeshBasicMaterial({
        map: cubeTexture,
        side: THREE.DoubleSide
    });
    
    var cube = new THREE.Mesh(geometry, cubeMaterial);
    scene.add(cube);
}

// 调用函数
createCube();

额外优化提示 #

如果你的立方体六个面确实需要不同的纹理，才需要创建多个材质组成数组；如果只是同一个纹理重复用，单个材质就足够了，Three.js会自动把纹理映射到每个面上。

内容的提问来源于stack exchange，提问作者Nguyễn Ngô Lâm