Gltf model and raycaster

Questions
, , ,
1

Hello.
I know that this problem has already been solved on the forum, but I haven’t found the right answer for me.
I’m trying to display the points after passing the cursor over the object. It works with “cube”, but didnt work with my object.
Can you help me? Thank you.

const raycaster = new THREE.Raycaster();

// create cube
const cube = new THREE.Mesh(
    new THREE.BoxGeometry(10,10,10),
    blueMaterial
);
scene.add(cube);

// load model
const gltfLoader3 = new GLTFLoader();
gltfLoader3.load(
  "./static/rektorat.glb",
  (gltf3) => {
    scene.add(gltf3.scene);
  }
);

function tick() {
    
    controls.update();

for (let point of points) {
    const screenPosition = point.position.clone();
    screenPosition.project(camera);

    const x = screenPosition.x * window.innerWidth * 0.5;
    const y = -screenPosition.y * window.innerHeight * 0.5;

    point.element.style.transform = `translate(${x}px, ${y}px)`;

    renderer.domElement.addEventListener("mousemove", (e) => {
        const x = (e.clientX / window.innerWidth) * 2 - 1;
        const y = -(e.clientY / window.innerHeight) * 2 + 1;
        raycaster.setFromCamera(
            new THREE.Vector2(x, y),
            camera
        );
        });
        point.element.style.display = "none";
        var intersections = raycaster.intersectObjects([cube]);
        if(intersections.length > 0)
        point.element.style.display = "block";

}
    renderer.render(scene, camera);
}
renderer.setAnimationLoop(tick);

I have tried

var intersections = raycaster.intersectObjects(gltfLoader3);

or

var intersections = raycaster.intersectObjects(gltf3.scene);

nothing worked

2

Did you try raycaster.intersectObjects(gltf.scene, true) :eyes: ?

Unlike a simple cube - which is just a single mesh - GLTF model contains always more than one 3D object (ie. it contains Scene + children of that scene which are meshes + possible subchildren of these meshes which are also meshes, and so on). Passing true as the second argument of raycaster.intersectObjects ensures that the raycaster will also test intersections with these children within a GLTF model (docs.)

3

Yes. Then it will show me error “Uncaught ReferenceError ReferenceError: gltf3 is not defined”.

4

That error is unrelated - you just try to use a variable you haven’t defined yet.

  1. You cannot raycast against gltfLoader3 - since it’s just a loader, not a model.
  2. You cannot raycast against gltf3, because it’s not defined outside of gltfLoader3.load() callback scope.
  3. You have to load the model and assign it somewhere in the code, only then you can do the raycasting, ex.:
let model;

new GLTFLoader.load('path/to/model.gltf', (gltf) => {
  model = gltf.scene;
});

const tick = () => {
  // NOTE Some code ...

  // NOTE In the render loop you have to ensure that the model is already loaded, since it's an asynchronous process. Put raycasting in a conditional and check if the model is ready.
  if (model) {
    const hits = raycaster.intersectObjects([ model ], true);

    // NOTE Do something with the intersections
  }

  // NOTE Some more code ...
};
5

Thank you so much. You are my hero.