glTF-transform生成GLB后THREE.GLTFLoader加载顶点颜色格式异常

问题核心原因 #

你遇到的是两个问题共同导致的异常：

• 顶点颜色属性命名不符合glTF官方规范
• gltfpack默认开启了颜色量化压缩策略

正确的顶点颜色传递方案 #

1. 修正属性命名
   glTF标准规定顶点颜色的属性语义必须为COLOR_<索引>格式，单组顶点颜色使用COLOR_0作为属性名，非标准的COLOR命名会导致压缩工具和加载器无法正确识别属性的归一化标记。
   修改你的创建代码即可：

// 把原代码里的 'COLOR' 改为 'COLOR_0'
primitive.setAttribute('COLOR_0', colorAccessor);

只要属性名符合规范，THREE.GLTFLoader会自动识别UNORM8类型的颜色属性，自动将0-255的Uint8值归一化到0-1区间，不需要额外手动处理。

2. （可选）关闭颜色量化压缩
   如果业务需要保留Float32精度的颜色值，可以在运行gltfpack命令时添加-noqc参数关闭颜色量化：

gltfpack -i 输入文件.glb -o 输出文件.glb -noqc

3. （兼容方案）自定义属性手动归一化
   如果因为业务逻辑必须保留COLOR自定义属性名，可以在加载后手动处理属性：

const colorAttr = gltf.scene.getObjectByName('你的模型名').geometry.getAttribute('COLOR');
// 方案1：开启normalized标记，Three.js会自动在Shader中做归一化计算
colorAttr.normalized = true;
colorAttr.needsUpdate = true;

// 方案2：手动转换为0-1区间的Float32数组
const floatColors = new Float32Array(colorAttr.array.map(v => v / 255));
geometry.setAttribute('COLOR', new THREE.BufferAttribute(floatColors, 4));

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