Raycast not detecting gltf object (newbie)

Questions
,
1

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];
                model.position.copy(position);
                const animation = gltf.animations[0];
                const mixer = new THREE.AnimationMixer(model);
                mixers.push(mixer);
                const action = mixer.clipAction(animation);
                action.play();
                scene.add(model);

                function clicked() {

                    var intersects = raycaster.intersectObjects(gltf.scene.children, true);
                    console.log(intersects.length)
}

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.

2

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?

3

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.

4

Can you please share the glb in this thread?

5

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

6

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:

https://threejs.org/examples/models/gltf/Flamingo.glb
https://threejs.org/examples/models/gltf/Parrot.glb
https://threejs.org/examples/models/gltf/Stork.glb

7

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

1 Like
8

I’ve updated it :slight_smile:

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

9

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

https://jsfiddle.net/mx41e87v/

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.

https://threejs.org/examples/#webgl_interactive_cubes

1 Like
10

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:

11

Read the following topic for more information about this issue: