Hey guys,
Have a question regarding a challenge I am facing in THREEJS, and would love some input from you.
What I want to achieve is the following: Have a custom size grid cover a custom 3D mesh in space, following it’s vertices, where I can ultimately highlight faces in that grid and position objects in each position. Any opinions on how to go about this ?
Thanks for the help !
Hello! Like this
Yes ! Thats one thing, and the other thing is the fact that the grid has to fit on a 3D mesh in the world. Its a mesh of a terrain, and I want a grid to cover it, so then users can place items like this on the terrain using a grid.
Exactly this actually 
My terrain is an FBX model and this is whats’ been challenging me. I could draw a grid on top of it using shaders, but I have no way of identifying where users are clicking over on the grid to place items there/highlight the coordinate.
Would be really awesome if you can assist through this.
Maybe its wrong calculation.
Need use raycast to terrain. Intersection point divide to cell size and parseInt
Size of cell 2 meter. Intersection point x12.78,y 4.0,z8.21 but ww take x and z for 2d coords
x=parseInt(12.78/2),y=parseInt(8.21/2);
x=6,y=4
Into shader need shader which show square Edit fiddle - JSFiddle - Code Playground
and needs uniforms of coordinates for shader
Thing is, i want to overlay my terrain mesh with a custom grid that can be 5x5 or 500x500, but then i wouldn’t have exact info on it’s size and all that to do proper calculations. Not sure if you get what I mean with how I am approaching it.
Tried it from the scratch:
Plane is 100x100, cell size is 10x10
Just an example, not the ultimate solution.
Thanks for that ! Will look into the code further and check if i’ll be able to take that and apply it to a custom mesh. Will let you know
My main concern is let’s say I apply this shader to a custom 3D model of a random terrain. Assuming the cell size is 1.0, how would I be able to tell how many cells are there in total, and how would I know which cell i am targeting ? Any insight on that ?
Using Box3 you can get size of an object. Divide its width and depth with the size of a cell, and you’ll be able to get the amount of cells.
Cell’s index is something floor(mouse_position.xz / cell_size). You can implement it on js side. See .floor() method of Vector3 / Vector2 in the docs.
Thus, mouse_position.divideScalar(cell_size).floor(), I think. 
Thanks for all the info. Taking it all into consideration made me reach a point where I could say it’s nearly solved on my end. Appreciate the help.
Hi again !
Just have one additional question. I managed to implement the whole thing in my project and it all works perfectly fine thanks to you.
Is there however a way to pre-highlight a cell marking it as “used” basically using a different color or would that not work with this shader approach ?
Thanks again !
And how do you know that the cell is “used”? Where and how do you store this info?
I basically set up a system where I have coordinates of cells that are used (based on the whole discussion prior), so now when someone clicks to place an object, i identify the cell coordinates based on cell size and all, and store these coordinates in a used list. What i’m struggling with though is how I would link this to a shader of some sort.
Ideally it would be a function that’ll go by highlightCell (x, y) and it’ll do the job. I’m currently working on it trying to sort out something, but any insight from your experience would also help very much
You know where you mouse is, you know that the cell is used, then simply use a uniform for colouring the cell. If it’s a free cell, set one color, if it’s not, then set another one. The code of shaders won’t change much, you just use a uniform instead of hardcoded colour.
Here gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0, 1, 1), mf);, instead of vec3(0, 1, 1), there will be the uniform. As I see it
Yep ! That idea would indeed work as I am hovering the mouse.
I wanted to try and basically pre-fill the grid on reload of the website with red cells anywhere where someone’s placed an object, which I guess from my knowledge wouldn’t work by setting the uniform.