Convert 2D mouse coordinates to 3D

Questions
1

I would like to know how to obtain the correct 2D coordinates from the mouse and then how to convert those coordinates to 3D. I really appreciate any help.

2

Hi!
Could you clarify, what you try to achieve?

3

You should look at the Three.js Raycaster class. This can transform your 2D mouse click in to a 3D world position. https://threejs.org/docs/#api/en/core/Raycaster

The example code on that page is a good starting point.

4

Thank you very much, I will look at Raycaster.

5

Very perceptive, I 'm trying to determine if there is a bug with this example: https://threejs.org/examples/misc_boxselection.html. I understand that there is a bug with the event variable (which I have fixed in my development environment).

Since I’m not sure where the problem is, I figured I would start at the beginning (mouse mathematics) and work my way through the end (camera mathematics). The issue is after the following lines are executed:

vecTopLeft.unproject(this.camera);
vecTopRight.unproject(this.camera);
vecDownRight.unproject(this.camera);
vecDownLeft.unproject(this.camera);

The coordinates are nowhere near the region that was selected. Additionally, the variable names represent the locations of the points used to form a quadrilateral. After the conversion from 2D to 3D, the variable names no longer match their positions.