How can I get the coordinate of - or IN - the HelperGrid I’m tapping on? Especially when there’s an actual Terrain Mesh sitting on top of it?
Here’s my set-up:
-I have a helperGrid set as follows:
let helperGrid = new THREE.GridHelper(600, 120, "yellow", “blue”);
So the distance between each grid line is 5 (cause 600 / 12 = 5)
As I click around the screen, I’d like to know where in the Grid I clicked on. Did I click somewhere in the very first square for example? Which means clicking (for the X value) anywhere between (0, 0, 0) and (5, 0, 0), and for Z-values anywhere between (0, 0, 0) and (0, 0, -5)?
I was going to try and calculate this using my clicked mouse-coordinates, which I calculate using the “mousedown” event, in the usual manner:
mousePositionVector.x = (event.clientX / window.innerWidth) * 2 - 1;
mousePositionVector.y = -(event.clientY / window.innerHeight) * 2 + 1;
But that translates into tiny decimal numbers. For example when I click anywhere in the very first grid box - meaning between x = 0 and x = 5, I’m getting mouse position values such as:
( 0.07309721175584016 , 0.03186646433990892 )
or:
( 0.09269027882441594 , 0.02427921092564489 )
etc.
Meanwhile, the corresponding “event.clientX” and event.clientY” values - for the very same tap event - are:
clientXY = ( 740 , 634 )
So neither set of values seem to be pointing me in the right direction.
Asides from all this, I’d like to eventually place a terrain over this grid - which means that the rayCaster I use will catch the Terrain vertex which may further complicate the issues.
What’s the right way to go about this?
