Three.js加载Blender带纹理3D模型无报错失效问题排查

阿华AIGC实验室

2026-5-28

Node环境下Three.js加载Blender导出模型纹理无效果的排查与解决

嘿，我帮你梳理下问题所在，核心原因和修复步骤都很清晰：

1. 最关键的问题：模型缺少UV坐标

看你提供的模型JSON数据，uvs字段是空数组，而且metadata里的uvs值是0——这就意味着你的立方体完全没有纹理映射的坐标信息！Three.js根本不知道该把纹理贴在模型的哪个位置，自然看不到预期的纹理效果。

怎么补上UV坐标？

回到Blender里操作这两步：

选中你的立方体，切换到编辑模式，按下U键，选择「智能UV投影」或者适合的UV展开方式，确保每个面都有对应的UV信息；
导出Three.js格式时，在导出面板里一定要勾选「UVs」选项，这样导出的模型才会包含UV数据。

2. Node环境下的额外注意点

虽然你没报错，但Node环境里用TextureLoader还有几个小细节要留意：

确认纹理文件image.jpg的路径是正确的，要相对于脚本执行的目录；
加载完纹理后，可以手动设置texture.needsUpdate = true，因为在非浏览器环境下，纹理的初始化可能不会自动触发。

3. 代码调试小技巧

你可以在代码里加一点调试信息，帮你确认问题：

const createObject = () => {
  return Promise.all([
    loadTexture('./image.jpg'),
    loadGeometry('./cube.json')
  ]).then(results => {
    const texture = results[0];
    texture.needsUpdate = true; // 手动触发纹理更新
    const material = new THREE.MeshBasicMaterial({map: texture});
    const geometry = results[1];
    // 打印UV信息，确认是否成功导入
    console.log('模型UV数据:', geometry.uvs);
    const object = new THREE.Mesh(geometry, material);
    return object;
  });
};

如果修复UV后，这里打印的geometry.uvs应该不再是空数组。