Raycast

[Sharlaan]

Hello awesome Vue-GL :)

I am trying to play with interactivity, using Three.Raycaster.

So i've settled a classic Scene with a loaded Mesh(BufferGeometry) and a plane for the ground.

Next, i implemented this method :

// argument is 'event' from mouse eventListener set in mounted()
getIntersection({ clientX, clientY, offsetX, offsetY, target }) {
    const { top, left } = target.getBoundingClientRect();
    const x = clientX - left;
    const y = clientY - top;
    // const x = offsetX; // offsetX/Y works but are experimental
    // const y = offsetY;
    const { clientHeight, clientWidth } = this.namespace.renderers[0].inst.domElement;
    const mouseCoords = new Vector2();
    const mouseX = (x / clientWidth) * 2 - 1;
    const mouseY = -((y / clientHeight) * 2) + 1;
    mouseCoords.set(mouseX, mouseY);
    console.log({ mouseX, mouseY });
    this.raycaster.setFromCamera(mouseCoords, this.namespace.cameras.cmr0);
    // const Model = this.namespace.scenes.scene.getObjectByName("model"); // FIXME: does not work...
    const model = this.$refs.model.inst; // direct reference to the <vgl-mesh name="model" ref="model" />
    console.log({ model, raycaster: this.raycaster });
    return this.raycaster.intersectObject(model)[0];
}

... my tests shows the ray "finds" the plane, but never the model ... despite the console logging an apparently tangible Mesh.
I'm really clueless there why it does not find the model ?

How do you handle raycasting ?

EDIT: Reproduced the issue in this repo.
This line describes the issue : commented line is the "real" model (asyncloaded BufferGeometry) i want to intersect, while the "working" uncommented line is just the ground (PlaneBufferGeometry)

[h-ikeda]

It seems to be caused by async computed property, because it works correctly when I define a geometry getter (not async).

But I haven't got solutions yet...

[WTDuck]

return this.raycaster.intersectObject(model, true)[0];
It should work if you enable the intersectObjects recursivity

[WTDuck]

mouseDownHandler(event) {
      this.isMouseDown = true;
      this.mouseOrigin = new Vector2(event.offsetX, event.offsetY);
      this.raycaster.setFromCamera(
        new Vector2(
          (event.clientX / window.innerWidth) * 2 - 1,
          -(event.clientY / window.innerHeight) * 2 + 1,
        ),
        this.$refs.camera.inst,
      );
      const [intersect] = this.raycaster.intersectObjects(this.$refs.scene.inst.children, true);
      if (intersect) {
        // do something
      }
}

[Sharlaan]

Setting recursivity is actually wrong : all i want is the nearest face from the model.
Recursivity just hit first the AxesHelper, then the grid, then ground, never the model.

I've also added an arrow helper to show the ray, and surprisingly, it always origins from (0,0,0) not the mouse normalized coordinates (or this.raycaster.ray.origin). EDIT: nevermind, it is just the vgl-arrow-helper is missing the origin prop.
The Ray with THREE.ArrowHelper gives this :

@h-ikeda i suspect same as well, since everything seems correct on the Ray side, but i don't see how to solve...