How to make grids on cube surface?

[bellem3re]

Hi! I'm extremely new to three js, and am using react three fiber for something I am building in a web app. I would like to create a cube, and put grid data on the surface of this cube, like so: https://i.stack.imgur.com/bmGNT.png. Is there an easy way to do this? I thought of a couple ways that I am not sure even works:

• Turn 6 2d arrays into a grids, and then turn them into textures that you draw onto the cube surfaces.

This doesn't scale though, because I want to be able to interact with the grid data on the cube later.

• I was also thinking of putting planes onto the surfaces of the cube.

Any ideas and guidance would be amazing. Thank you!

[mwmwmw]

You can use a <canvasTexture> to draw a grid on the surface of the cube.

Here is an example https://codesandbox.io/s/canvas-animated-texture-10p7ws

If you don't need to change the grid, I'd recommend using a texture.

If you need a different grid on every face of the cube, I'd make a cube in something like Blender, and create a UV map. 6 doesn't divide evenly into 1024, so you'll have some dead space, but, you should be able to tell the canvas renderer exactly where to draw.

The only issue with this is that you need to upload canvas image data to the GPU per frame. That will be an issue if the data you want to render requires that the canvas is high resolution (like 2K and up). If you need high fidelity data, I'd recommend using geometry to do it.

[bellem3re]

Thank you! Quick follow up - does this allow me to easily access specific points on this grid and modify the cells? Or is that a completely separate can of worms?

I initially was thinking I either needed prepopulate these grids (assuming all 6 faces are the same size), then place them on the cuve surface, or I could place the grid first, then populate the grids with data on the cells.

Either way, I would like to be able to add/remove data on the cells of the grids via coordinates. If this isn't possible, that's totally fine, but i'll have to find some way to visualize grid data on this cube somehow.

I also found <gridHelper>. could this be a viable solution too?

[mwmwmw]

In the example you're given a canvas that is 512px x 512px. You can draw anything on it. It's as easy as drawing with the canvas API. Check the draw functions. It doesn't even need to be a grid.

I updated the example to show how you can fill the cells with different data. In this case, color boxes move around the grid.

• Red moves line by line
• Yellow in a circle
• White tracks the mouse position on the surface.

https://codesandbox.io/s/canvas-animated-texture-10p7ws

Calculating where the cells are is very easy.

<gridHelper> is more for debugging, but hey, use it for whatever you want! It uses GL line rendering if I'm not mistaken and those have limited style.

[bellem3re]

Thank you so much, this was so helpful. I've been kind of stuck on this for a while so this helped move me forward

[mwmwmw]

No worries! Glad I could help.

Sometimes there can be too many options. Narrow it down to advance.