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.
Could you clarify, what you try to achieve?
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.
Thank you very much, I will look at Raycaster.
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.