THREE.js导入3D模型时避免\

javascript

2024-03-17 08:56:35

THREE.js 中导入 3D 模型时的 WebGL 错误：无效程序

在使用 THREE.js 导入包含动画的 3D 模型时，你可能会遇到“WebGL: INVALID_OPERATION: useProgram: 程序无效”错误。这可能是由几种因素引起的，本指南将指导你解决此错误并成功导入模型。

问题

导入 3D 模型时，WebGL 可能会显示“程序无效”错误，这表示 GPU 无法编译和链接着色器程序。这通常是由不兼容的着色器材料、禁用扩展或 THREE.js 版本过时引起的。

解决步骤

要解决此错误，请按以下步骤操作：

1. 检查着色器材料： 确保模型中所有网格都使用 WebGL 1.0 兼容的着色器材料。THREE.js r134 之前不支持基于物理的渲染 (PBR) 材料。
2. 启用扩展： 在 WebGL 1.0 中，需要启用 WEBGL_depth_texture 和 OES_texture_float 扩展来启用浮点纹理和深度纹理。
3. 更新 THREE.js 版本： 如果上述步骤无法解决问题，请尝试更新 THREE.js 版本。THREE.js r134 引入了对 WebGL 1.0 中 PBR 材料的支持。

其他注意事项

解决错误时，请考虑以下其他因素：

确保使用正确的加载器导入模型（GLTF 模型应使用 GLTFLoader）。
检查模型文件是否存在损坏或不完整。
更新显卡驱动程序。
如果模型包含动画，请启用动画系统并按预期设置时间线。

示例代码

以下代码示例演示如何启用必要的扩展：

if (renderer.extensions.get('WEBGL_depth_texture')) {
  renderer.extensions.get('WEBGL_depth_texture').enable();
}
if (renderer.extensions.get('OES_texture_float')) {
  renderer.extensions.get('OES_texture_float').enable();
}