Three.js加载OBJ模型时纹理显示过小问题求助

嘿，我来帮你搞定这两个问题——先是纹理显示得特别小的问题，再说说怎么给每个面设置不同的纹理。从你贴的图1和图2能看到，纹理确实被压缩得很小，几乎看不清细节，咱们一步步来解决：

一、先修正代码里的致命错误 #

你居然用OBJLoader去加载纹理图片！这完全不对啊，加载纹理得用专门的THREE.TextureLoader()，你现在的loader是用来加载OBJ模型的，用它加载纹理肯定会出问题，这大概率是纹理显示异常的首要原因。

修正后的纹理加载代码应该是这样：

// 单独创建纹理加载器，别复用OBJLoader
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('textures/dlam.jpg', render);

二、解决纹理显示过小的核心问题 #

纹理显示小的主要原因基本都是UV映射坐标的问题，分两种情况处理：

• 如果你的OBJ模型导出时没包含UV坐标：打开你的OBJ文件看看有没有vt开头的行（这就是UV坐标），如果没有，说明建模软件导出时没带UV。这种情况下Three.js会自动生成默认UV，但默认UV和模型尺寸不匹配，就会导致纹理缩成一团。你得回到建模软件里给模型展开UV，再重新导出带UV的OBJ文件。
• 如果模型有UV但纹理还是小：那可以调整纹理的重复属性，把你注释掉的代码取消注释，还可以根据模型大小调整重复次数：

texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(4, 4); // 数值越大，纹理重复次数越多，看起来就不会那么小了

哦对了，你注释掉的模型缩放代码model.scale.set(4,4,4)也可以试试，如果模型本身尺寸特别大，适当缩放模型也能让纹理看起来更正常。

三、给每个面设置不同纹理的方法 #

要实现每个面用不同纹理，最简单的思路是把模型拆成单个面的网格，给每个网格单独分配纹理材质，示例代码如下：

const textureLoader = new THREE.TextureLoader();
// 假设你准备了和模型面数对应的纹理路径
const texturePaths = ['textures/face1.jpg', 'textures/face2.jpg', 'textures/face3.jpg', ...];
const modelGroup = new THREE.Group();

// 遍历原模型的每一个面
model.geometry.faces.forEach((face, index) => {
    // 创建单个面的几何体
    const singleFaceGeo = new THREE.Geometry();
    singleFaceGeo.vertices.push(
        model.geometry.vertices[face.a],
        model.geometry.vertices[face.b],
        model.geometry.vertices[face.c]
    );
    singleFaceGeo.faces.push(new THREE.Face3(0, 1, 2));
    
    // 如果原模型有UV，也要把对应面的UV拷贝过来
    if (model.geometry.faceVertexUvs[0][index]) {
        singleFaceGeo.faceVertexUvs[0].push(model.geometry.faceVertexUvs[0][index]);
    }
    singleFaceGeo.computeFaceNormals();
    
    // 加载对应纹理并创建材质
    const texture = textureLoader.load(texturePaths[index]);
    const material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide });
    
    // 创建单个面的网格并加入组
    const faceMesh = new THREE.Mesh(singleFaceGeo, material);
    modelGroup.add(faceMesh);
});

// 把组添加到场景里，替代原来的模型
scene.add(modelGroup);

注意：如果你的模型面数特别多，这种方法可能会影响性能，这时候可以考虑用自定义着色器结合MeshStandardMaterial，通过顶点属性传递纹理索引来实现，但对于面数不多的模型，上面的方法简单又好用。

最后再提一句：一定要确保你的OBJ模型导出时包含UV坐标，不然纹理映射肯定会出各种奇怪的问题哦！

内容的提问来源于stack exchange，提问作者yjcn