If you are struggling to understand the concept of raycasting in THREE.JS, the official THREE.JS raycaster documentation provides a comprehensive explanation. It covers all the necessary information along with addressing any potential confusion you may have.

var raycaster = new THREE.Raycaster(); 
var mouse = new THREE.Vector2(); 

function onMouseMove( event ) { 
  // calculating the mouse position in normalized device coordinates 
  // (-1 to +1) for both components 
  mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; 
  mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1; 
} 

function render() { 
  // updating the picking ray with the camera and mouse position
  raycaster.setFromCamera( mouse, camera ); 
  // finding objects intersecting the picking ray var intersects =     
  raycaster.intersectObjects( scene.children ); 

  for ( var i = 0; i < intersects.length; i++ ) { 
    intersects[ i ].object.material.color.set( 0xff0000 ); 
  }

  renderer.render( scene, camera ); 
} 
window.addEventListener( 'mousemove', onMouseMove, false );        
window.requestAnimationFrame(render);`

This detailed explanation should make the concept clearer for you.

Make sure to follow the recommended version mentioned above for optimal performance.

If you encounter any issues with your code, simply substitute:

projector.unprojectVector( vector, camera );

with

vector.unproject(camera);

It has come to my attention that the information provided earlier works well when the window is maximized, however, if there are other elements on the page in addition to a canvas, it is necessary to adjust the click events target's offset accordingly.

In this context, 'e' represents the event and 'mVec' is a THREE.Vector2 object.

    let et = e.target, de = renderer.domElement;
    let trueX = (e.pageX - et.offsetLeft);
    let trueY = (e.pageY - et.offsetTop);
    mVec.x = (((trueX / de.width) * 2) - 1);
    mVec.y = (((trueY / de.height) * -2) + 1);
    wup.raycaster.setFromCamera( mVec, camera );
    [Next step: Check for any intersections, etc.]

It is important to account for dragging (mouse movements) as well, as releasing a drag might inadvertently trigger a click event when using window.addEventListener( 'click', function(e) {<code>});

[It is worth noting that the negative sign placement has been adjusted for clarity.]

Visit this link for more information.

const vector = new THREE.Vector3();
const raycaster = new THREE.Raycaster();
const dir = new THREE.Vector3();

...

if ( camera instanceof THREE.OrthographicCamera ) {

    vector.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, - 1 ); // z = - 1 important!

    vector.unproject( camera );

    dir.set( 0, 0, - 1 ).transformDirection( camera.matrixWorld );

    raycaster.set( vector, dir );

} else if ( camera instanceof THREE.PerspectiveCamera ) {

    vector.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 ); // z = 0.5 important!

    vector.unproject( camera );

    raycaster.set( camera.position, vector.sub( camera.position ).normalize() );

}

const intersects = raycaster.intersectObjects( objects, recursiveFlag );

Objects = array of objects of type Object3D to check for intersection with the ray. Can be everything in your scene, but might be inefficient if you have a lot of stuff there.

recursiveFlag = If true, it also checks all descendants. Otherwise it only checks intersection with the object. Default is true.

Read the documentation for more details.

I wanted to share a more detailed account of my experiences in implementing this process, as I believe the previous answers lack in providing a comprehensive explanation.

In my scenario, I utilized STL_Viewer which can be found at this link (). This tool assists in creating a threeJS scene and provides the necessary camera and scene components required for this task.

function mouse_click_normalize(clientX,clientY,offset_left,offset_top){
                var mouse = new THREE.Vector2(); // initialize once
                var c = document.getElementById("stl_contEye").childNodes[0];//retrieve canvas element created here
                mouse.x = ( (event.clientX-offset_left) / (c.clientWidth)  * 2) - 1;
                mouse.y = - ( (event.clientY-offset_top) / (c.clientHeight) ) * 2 + 1;
                console.log(`clientX=${clientX},clientY=${clientY},mouse.x=${mouse.x},mouse.y=${mouse.y}\nwidth=${c.clientWidth},height=${c.clientHeight},offset_left=${offset_left},offset_top=${offset_top}`);
                return mouse;
           }

The above function automatically normalizes the x,y coordinates to the clicked space (between -1 and 1), as required by the raycaster for its setFromCamera function.

To account for potential offsets in the screen section being clicked, I designed it this way to ensure it functions correctly regardless of its position in the DOM. Simply replace "stl_contEye" with the name of the div containing the rendered ThreeJS or STLViewer in your case.

function model_clicked(model_id, e, distance, click_type){
                console.log(e);
                
                var pos = new THREE.Vector3(); // initialize once and reuse
                // var vec = new THREE.Vector3(); // initialize once and reuse
                
                var camera = stl_viewer1.camera;
                var scene = stl_viewer1.scene;
                // vec.unproject( camera );
                // vec.sub( camera.position ).normalize();
                // //var distance2 = (distance - camera.position.z) / vec.z;
                // pos.copy( camera.position ).add( vec.multiplyScalar( distance ) );
                var mouse_coords_normalized = mouse_click_normalize(e.clientX,e.clientY,e.srcElement.offsetLeft,e.srcElement.offsetTop);
                var raycaster = new THREE.Raycaster(); // initialize once
                raycaster.setFromCamera( mouse_coords_normalized, camera );
                //console.log(raycaster);
                //console.log(scene);

                var intersects = raycaster.intersectObjects( scene.children, true );
                if(intersects.length > 0){
                    console.log(intersects);
                    console.log(intersects[0].point);
                    pos = intersects[0].point
                }
}

This method allows you to pinpoint the exact location in 3D space where you clicked. The model_clicked function simply returns an event containing the clientX or clientY, which you must obtain yourself if not using STLViewer's event for click detection. Various examples are provided in the previous answers for this.

I hope this guide proves helpful to those navigating this process, whether with or without stl_viewer.