# Getting gridHelper Coordinates vs. Mouse & Terrain coordinates

**URL:** https://discourse.threejs.org/t/getting-gridhelper-coordinates-vs-mouse-terrain-coordinates/23172
**Category:** Questions
**Tags:** math
**Created:** [February 6, 2021, 1:10am UTC](https://discourse.threejs.org/t/getting-gridhelper-coordinates-vs-mouse-terrain-coordinates/23172 "2021-02-06T01:10:12Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![S33](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/s33/32/41073_2.png) [@S33](https://discourse.threejs.org/u/S33)
#### Post date: [February 6, 2021, 1:10am UTC](https://discourse.threejs.org/t/getting-gridhelper-coordinates-vs-mouse-terrain-coordinates/23172/1 "2021-02-06T01:10:12Z")

</div>

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?

 ![Grid-with-Coords](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/5/f5438ce4dc465067c97c84cd778a41d971b4e4ec.jpeg)

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?

---

<div class="post-metadata">

### Author: ![marquizzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marquizzo/32/25192_2.png) [@marquizzo](https://discourse.threejs.org/u/marquizzo)
#### Post date: [February 6, 2021, 7:02am UTC](https://discourse.threejs.org/t/getting-gridhelper-coordinates-vs-mouse-terrain-coordinates/23172/2 "2021-02-06T07:02:36Z")

</div>

Answered here:

> <https://stackoverflow.com/questions/66072860/three-js-get-gridhelper-coordinates-from-mouseclick/66072938#66072938>

---

<div class="post-metadata">

### Author: ![GlifTek](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gliftek/32/13131_2.png) [@GlifTek](https://discourse.threejs.org/u/GlifTek)
#### Post date: [February 7, 2021, 2:04am UTC](https://discourse.threejs.org/t/getting-gridhelper-coordinates-vs-mouse-terrain-coordinates/23172/3 "2021-02-07T02:04:49Z")

</div>

Some great info right thurr. 😊
