使用THREE.js导入带动画GLTF模型时出现WebGL无效操作错误

问题描述 #

• 无动画的GLTF模型可正常显示，但导入带动画的GLTF模型时，控制台出现WebGL: INVALID_OPERATION: useProgram: program not valid警告，模型无法在场景中渲染
• 已通过console.log(model)确认模型成功导入，调整模型缩放、相机位置后问题仍未解决

代码片段 #

//----------------Setups-------------//
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

const renderer = new THREE.WebGL1Renderer();
renderer.shadowMap.enabled = true;

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

//------------------OrbitControl---------------------//
const orbit = new OrbitControls(camera, renderer.domElement);
camera.position.set(10, 10, 10);
orbit.update(); 

//------------------3D model---------------------//
const donkeyURL = new URL("../assets/car/scene.gltf", import.meta.url);
const assetsLoader = new GLTFLoader();
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath(
      "https://www.gstatic.com/draco/versioned/decoders/1.5.7/"
    );
dracoLoader.setDecoderConfig({ type: "js" });
assetsLoader.setDRACOLoader(dracoLoader);
assetsLoader.load(
  donkeyURL.href,
  (gltf) => {
    const model = gltf.scene;
    scene.add(model);
    model.position.set(0, 0, 0);
    model.scale.set(0.5, 0.5, 0.5);
  },
  undefined,
  function (err) {
    console.error(err);
  }
);

//------------------Animation---------------------//
function animate() {
  renderer.render(scene, camera);
}
renderer.setAnimationLoop(animate);

解决思路 #

• 替换Renderer版本
  当前使用的WebGL1Renderer仅支持WebGL 1.0标准，而带动画的GLTF模型可能依赖WebGL 2.0才支持的着色器特性（比如骨骼蒙皮语法、进阶PBR材质）。将其替换为默认的WebGLRenderer，它会优先使用WebGL 2.0，不支持的环境下自动降级：

  const renderer = new THREE.WebGLRenderer();
  

• 强制开启骨骼蒙皮支持
  若模型包含骨骼动画，部分材质可能未自动开启骨骼支持，手动遍历模型开启：

  assetsLoader.load(
    donkeyURL.href,
    (gltf) => {
      const model = gltf.scene;
      model.traverse((child) => {
        if (child.isMesh) {
          child.material.skinning = true;
        }
      });
      scene.add(model);
      model.position.set(0, 0, 0);
      model.scale.set(0.5, 0.5, 0.5);
    },
    undefined,
    function (err) {
      console.error(err);
    }
  );
  

• 排查DRACO压缩兼容性
  DRACO压缩的模型可能和WebGL 1.0存在兼容性问题，先注释DRACO相关代码，直接加载原始GLTF模型测试：

  // const dracoLoader = new DRACOLoader();
  // dracoLoader.setDecoderPath("https://www.gstatic.com/draco/versioned/decoders/1.5.7/");
  // dracoLoader.setDecoderConfig({ type: "js" });
  // assetsLoader.setDRACOLoader(dracoLoader);
  

• 获取详细着色器错误
  开启Renderer的着色器错误检查，控制台会输出具体编译失败信息，帮助精准定位问题：

  renderer.debug.checkShaderErrors = true;
  

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