Action click with Raycaster

[rtalon83]

I'm doing a hit event over the 3D-Object. About the THREE.js documentation, it says to use Raycaster following the next code. But there are problems with de pitch of maps.

this._canvas.addEventListener('click', this.onCanvasClick);

this._camera = new THREE.PerspectiveCamera(
        this._mapView.map.transform.fov,
        this._mapView.map.transform.width / this._mapView.map.transform.height,
        0.1,
        //1000
        1e21
    );
this._camera.matrixAutoUpdate = false

this._raycaster = new THREE.Raycaster();
this._mouse = new THREE.Vector2( 1, 1 );

onCanvasClick(event) {
    event.preventDefault();       
    this._mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    this._mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
    
    this._raycaster.setFromCamera(this._mouse, this._camera);
    const intersects = this._raycaster.intersectObjects(this._world.children, true);
    
    if (intersects.length > 0) {
        const intersectedObject = intersects[0].object;
        console.log('Object!', intersectedObject);
    }     
}

[rtalon83]

Ok, problem solved!

//this._canvas.addEventListener('click', this.onCanvasClick);
this._mapView.map.on('click', this.onCanvasClick); // event over MapLibre.gl, no canvas


onCanvasClick(event) {
           // get MapLibre.gl coordinates and size
            this._mouse.x = ( event.point.x / this._mapView.map.transform.width ) * 2 - 1;
            this._mouse.y = - ( event.point.y / this._mapView.map.transform.height ) * 2 + 1;

            this._raycaster.setFromCamera(this._mouse, this._camera);
            const intersects = this._raycaster.intersectObjects(this._world.children, true);

            if (intersects.length > 0) {
                const intersectedObject = intersects[0].object;
                console.log('¡Objeto clicado!', intersectedObject);
            }
}

[rtalon83]

Opps! I was wrong!

The issue continues, sometime the intersection is correct but other times it fails.

Any ideas?