Raycast not detecting gltf object (newbie)

Hi folks,

Allow me to share my project: https://codepen.io/Ip3ly5/project/editor/ZLRQNr
I’m trying to replicate what I did in “othercube.html” but using my own models.

I’m running into trouble with getting the raycaster to recognise the model, when I console log it the length remains 0.

function loadModels() {
            const loader = new THREE.GLTFLoader();
            const onLoad = (gltf, position) => {

                const model = gltf.scene.children[0];
                const animation = gltf.animations[0];
                const mixer = new THREE.AnimationMixer(model);
                const action = mixer.clipAction(animation);

                function clicked() {

                    var intersects = raycaster.intersectObjects(gltf.scene.children, true);

Any help is appreciated, in the link above “gltftest.html” is the project in the current state. Sadly the .glb files arent supported on codepen.

Raycasting does not work properly if your model uses morph target or skeleton animation. Does it work if you just raycast against the static model?

Thanks for your response :slight_smile: @Mugen87

It doesn’t, no. I’ve also tried using a different .gltf file which has no animation.
Other people online run into the same error because the model hasn’t yet loaded in. But their solution of adding if (model) … isn’t working for me.

Can you please share the glb in this thread?

Flamingo.glb (75.6 KB)
Parrot.glb (94.8 KB)
Stork.glb (75.0 KB)

If these are the models from the three.js repository, you can use the following URLs in your codepen. There should be no CORS errors. So try to make a live example with one of these:


I was looking for a cdn I could use! Thanks, I’ll do that now.

1 Like

I’ve updated it :slight_smile:

There were CORS errors, but replacing http:// with https:// made it work.

Here is a fixed version (but without animations since raycasting against animated models is not supported).


The problem was you did not setup your raycaster correctly. You have to execute the following line before you perform the raycast:

raycaster.setFromCamera( mouse, camera );

You also did not prepare the mouse coordinates correctly. It’s best when you study the following example and the documentation of THREE.Raycaster in order to get a better understanding of how raycasting works.


1 Like

Firstly I’d like to apologise for requesting help for a syntax error.

The most annoying part is that in the othercube.html I’d put it in there. It must’ve just slipped under the radar :sob:

Thank you for your help Mugen. Really appreciated. Let this serve as a reminder for other newbies to expand your debugging scope :smile:

Fixed version:
https://codepen.io/Ip3ly5/project/editor/ZLRQNr#0 (gltffixed.html)

edit: It would seem you can infact get raycaster to work with animated models… :thinking:

Read the following topic for more information about this issue: