Having "WebGL: INVALID_OPERATION: useProgram: program not valid" while importing 3D model on THREE.js

47 Views Asked by At

I'm try to import a 3D model with GLTFLoader in THREE.js, it work for me when I use models without animation in gltf file, but when I use model that contain animation in gltf file, the waning shows up and the model doesn't show on the scene.

/----------------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);

My model is imported cuz, when I console.log(model) , Ican see the informations of the model,

I've try to set scale or camera position but still... does anyone having this problem?

0

There are 0 best solutions below