Position of Object on Grid

Questions
1

Hi,
I am experimenting with GLTF models and the GridHelper.

I add a grid to a scene using the GridHelper. For simplicity let’s say it is 100x100 with 10 segments so I have 10 squares on my X axis and 10 squares on my Y axis (think checkerboard).
Three.js presents the grid as a 3D object on the screen which is what I need.

I then load a GLTF model onto this scene (and hence it is showing on the grid).
I add DragControls to this model and I drag the model around the grid.
Again, to make things simple I restrict the ‘drag movement’ to only X,Z (I force Y to a constant value so that the object is always ‘on the grid’)

If I label my grid with say, letters across the X axis and number across the Y axis how can I find the position of my model on the grid?
In other words, how can I translate the position of the model to the squares of the grid such as ‘the model is on L-7’?

2

You can just round it to the grid size like

const gridSize = 10;
const x = Math.floor( mesh.position.x / gridSize );
const y = Math.floor( mesh.position.z / gridSize );

const label = String.fromCharCode( 65 + x ) + '-' + y;

You might want to repeat the alphabet after all letters have been used and add numbers depending on your grid size.

1 Like
3

Hi,
Thank you for your help. The code does not work but you did give me idea.
What I ended up doing is calculate the vector between the origin (the gltf model) and the edge of the grid, then calculated how many sections I can fit on that vector and that gives me the cell. I do this for x Axis and I do this for y Axis so I get the unique cell of the grid.