如何导出带纹理与颜色的Spline GLTF并在Three.js中正常加载？

一、Spline导出阶段的正确设置 #

• 先确认模型材质完整：在Spline编辑器里选中目标模型，查看右侧材质面板，确保颜色、纹理贴图（比如Base Color贴图）都已正确赋值，没有遗漏未设置的材质项。
• 导出时选对GLTF格式选项：
  • 导出窗口选择GLTF格式，必须勾选Embed Textures（嵌入纹理），这样纹理会被打包进GLTF相关文件中，避免外部路径引用出错。
  • 暂时不要勾选Compress Textures，压缩纹理可能导致Three.js解析失败。
  • 若未勾选嵌入纹理，导出后要把生成的GLTF文件和对应的纹理图片（如.png）全部放到Three.js项目的/models/目录下，保证GLTF文件内的纹理引用路径和实际文件位置一致。

二、Three.js加载阶段的排查与优化 #

1. 完善加载代码的调试逻辑 #

你现有的加载代码可以添加进度和错误回调，方便排查问题，同时可遍历模型检查材质加载情况：

gltfLoader.load(
    '/models/room-spline.gltf',
    (gltf) => {
        gltf.scene.scale.set(0.025, 0.025, 0.025)
        gltf.scene.position.set(0,2,0)
        gltf.scene.rotation.set(0,3.5,0)
        scene.add(gltf.scene)
        
        // 遍历模型，检查材质与纹理加载状态
        gltf.scene.traverse((child) => {
            if (child.isMesh) {
                console.log('当前Mesh材质：', child.material)
                if (child.material.map) {
                    console.log('已加载纹理：', child.material.map)
                } else {
                    console.log('该Mesh未加载到纹理')
                }
            }
        })
    },
    (progress) => {
        console.log(`加载进度：${Math.round((progress.loaded / progress.total)*100)}%`)
    },
    (error) => {
        console.error('GLTF加载失败：', error)
    }
)

2. 检查场景光照配置 #

很多时候不是纹理没加载，而是场景缺少足够光照导致材质显示异常，添加基础光照即可解决：

// 添加环境光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6)
scene.add(ambientLight)

// 添加方向光
const dirLight = new THREE.DirectionalLight(0xffffff, 0.9)
dirLight.position.set(8, 12, 10)
scene.add(dirLight)

3. 确认文件路径正确性 #

如果未使用嵌入纹理，要确保GLTF文件引用的纹理图片和GLTF文件在同一目录下，比如/models/下同时存在room-spline.gltf和对应的纹理图片，避免路径错误导致纹理加载失败。

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