Get Mouse X,Y,Z Coordinates In Scene with No Children

Questions
1

I’m re-writing an existing application where a user would click cells in an HTML table and place predefined design items in them and then save that design to be used in another application. The table was only used for position referencing. In the other application that used these designs, the table was not rendered which helped increase performance but still took its toll on mobile devices when the designs became very large (sometimes extending folds beyond the view-port). Some designs have hundreds, if not a thousand individual 12x12 pixel elements all being rendered at the same time.

In picture below, the camera and orbit controls are shifted so that the origin (0,0,0 [red arrow]) is in the top-left (DOM style), rather than the center. The user would be shown the current “cell [purple arrow]” for reference. The “table” is drawn as a series of THREE.Lines spaced 12 points apart from one another. My goal is to confine designs to the 4th quadrant (+X,-Y). Then I would just multiply the -Y by -1 to get a +Y and divide +X and +Y by 12 and floor each to get the corresponding cell index as if it were still an HTML table. This way my end users would not have to re-learn or re-design their projects that were based on the 0,0 index always being in the top-left, rather than the center.

I have tried several different examples to get the +X and -Y position of the mouse (with respect to the origin of the scene) as 3D coordinates and not 2D DOM coordinates since some design elements would have a position X,Y (CSS top,left) greater than the current view-port of the device they were on.

I’m not focusing on mouse events against children in the scene (a new design would have no children anyway), only the (theoretical infinite +X and -Y) coordinates in the scene where the mouse is hovering/clicked. I looked at Raycasting but I’m not entirely sure if that is the path I should follow.

Does anyone have any recommendations or solutions as to which avenue I should pursue?

image
image.png988×562 20.6 KB

1 Like
2

Well… just as fast as I posted, I found my answer. Should’ve researched a little more but here is the solution if anyone is interested.

OnMouseMove = function(e){
    let vector = new THREE.Vector3();
    vector.set((e.clientX / window.innerWidth) * 2 - 1, -(e.clientY / window.innerHeight) * 2 + 1,0);
    vector.unproject(camera);
}
3

That will work only until you scroll the page, I guess…

4

Scrolling is turned off. Everything will be confined to the scene. The designer application takes up 100% of the width and height of the viewport.

1 Like
5

Yes this is true so how we will solve this.

I am trying to make a dynamic line with mouse coordinate so when i am scrolling than only i am getting the points

6

@Alex