How do I make grids on a cube surface?

Hi! I’m extremely new to three js, and am using react three fiber / three.js 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 cubes later.

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

Any ideas and guidance would be amazing. Thank you!

three has an inbuilt grid: <gridHelper />

here’s an example with a single plane grid + interaction: Plane project - CodeSandbox

some grids

LineGridDesign

Grid Collection

2022-04-04 10.44.19