Three.js中Blender导出模型纹理与UV未对齐问题求助

最常见的解决：修正纹理Y轴翻转 #

Three.js默认纹理的Y轴方向和Blender的UV方向相反，这是导致偏移的核心原因，修改代码添加flipY = false即可：

gltfLoader.load('v3.glb', (file) => {
    bowtie_Mesh = file.scene.children.find((child) => child.name === 'bowtie003');
    const uvTexture = new THREE.TextureLoader().load('uv 2.png');
    // 关键：翻转纹理Y轴，匹配Blender的UV方向
    uvTexture.flipY = false;
    
    bowtie_Mesh.material = new THREE.MeshBasicMaterial({
        map: uvTexture
    });

    scene.add(bowtie_Mesh);
});

额外排查点 #

• 检查Blender导出GLB时的设置：确保Geometry选项下的UVs已勾选，不要误勾选“Apply Transform”（会强制缩放UV导致偏移）
• 核对Blender的UV编辑器：确认红色UV岛的位置、大小和纹理图片的对应区域完全一致，没有手动缩放或偏移UV
• 若模型有多个UV集：需指定材质使用正确的UV通道，可通过bowtie_Mesh.material.uvIndex = 0（默认是0，对应第一个UV集）来设置

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