GLTF Loader Uncaught (in promise) TypeError: clipObject is undefined

Bilal 0
Viewed 34

I want to load .glb models using ThreeJS as done here, I'm using webpack v5 bundler, and I have changed the code from the upper link to adapt to the new imports:

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";

import BasePlate from "../assets/glb/BasePlate_16x16.glb";
import Lego_2x2 from "../assets/glb/Lego_2x2.glb";
import Lego_2x4 from "../assets/glb/Lego_2x4.glb";
...
    const parrotPosition = new Vector3(0, 0, 2.5);
    loader.load(
        BasePlate,
      gltf => onLoad(gltf, parrotPosition),
      onProgress
    );
  
    const flamingoPosition = new Vector3(7.5, 0, -10);
    loader.load(
        Lego_2x2,
      gltf => onLoad(gltf, flamingoPosition),
      onProgress
    );
  
    const storkPosition = new Vector3(0, -2.5, -10);
    loader.load(
        Lego_2x4,
      gltf => onLoad(gltf, storkPosition),
      onProgress
    );
  }
...

Now when I try to load the models I get the error:

Uncaught (in promise) TypeError: clipObject is undefined

You can find the models, the source code, and the config files here. The js code is here.

Can you please tell me how to render these .glb models correctly? thanks in advance.

gltf three.js
1 Answers

Your code does not work since you try to play animations although your glTF assets are static. I suggest you update loadModels() and remove the usage of AnimationMixer or you implement it conditionally like so:

if (result.animations.length > 0) {

    const mixer = new AnimationMixer(model);
    mixers.push(mixer);

    const animation = result.animations[0]; // pick first animation
    const action = mixer.clipAction(animation);
    action.play();
}
Mugen870
Related