Thanks to the wonderful support from the stackoverflow community, I was able to successfully implement a basic object picking example.
You can view the functional code here.
However, it's important to note that this example specifically works when the canvas perfectly fits the window size.
The issue arises when the canvas is smaller than the window and has left and top offsets, leading to inaccuracies in object picking.
How do we correct this offset problem? What modifications need to be made to ensure proper object picking functionality?
I've attempted different solutions like adjusting
renderer.setSize(threejsCanvas.clientWidth, threejsCanvas.clientHeight);