Box with cartesian grid

Hello,

I am trying to make a cuboid and show a Cartesian grid with different number of subdivisions in each direction.

I have tried using a tiled box with edge rendering; however, it does not seem to let the subdivisions in the three directions to be controlled independently (tiles are the same on each face). Similarly, the spacing of the grid material is equal in both directions.

To give a bit more context, what I am trying to achieve is what in Three.js would be done with:

var box = new THREE.BoxGeometry(width, height, depth, nx, ny, nz);

and then building a WireframeGeometry on top of it, and using the LineBasicMaterial to create LineSegments and assign them the box geometry.

Any help is greatly appreciated! Thank you :slight_smile:

I guess the most efficient would be to customize the grid material with the node material editor to allow different scale depending on the direction ???

1 Like

Thanks sebavan.

Is there no way to actually have a tiled box with different tiles on each face or, at least, parallel faces? That would seem easier than carrying around a custom material with all the generated code…

I think I found a way using tiled planes:

https://playground.babylonjs.com/#8RK8SM

I am not sure it is the most efficient way to do this, but it seems to work OK.

https://playground.babylonjs.com/#YNLIX6
https://playground.babylonjs.com/#YNLIX6#1

2 Likes

TiledBox has less code but you can only control two dimensions for tile size https://www.babylonjs-playground.com/#Z5JFSM#140

1 Like

Thank you @JohnK and @nasimiasl!

1 Like