What is the Best Way to Create a PlaneGeometry That Displays Several Different Images

I am trying to create 27 different flat planes, each of which will have 9 different textures, e.g.:


The textures can vary from plane to plane and there could be as many as 27 different combinations of textures. So the next plane might look like this:


For now, once these textures are loaded onto a plane, they will not be changed.

The reason I want to do this is to avoid the memory and performance problems of drawing 243 smaller planes (9 X 27) with a single texture each.

One possible solution is to create 9 smaller faces on each large plane and to assign a different material to each face. It appears that doing this would be a fairly straightforward task. However, I am concerned that, from a performance standpoint, the result would not be any better than having 9 smaller planes.

It would seem that a better approach would be to combine the 9 textures into a single texture. But this could not be done on a 1 to 1 basis since the textures are 512 X 512 and the resulting images would be 1536 X 1536 - not a multiple of 2. Thus, I would need to scale the result down to 1024, e.g. by skipping every third pixel. Time spent doing this task at the front end should not be a problem since the results would not be changed during run time.

I have looked at using “renderer.copyTextureToTexture”, but: (1) I haven’t got it to work (an error code about missing “width”), (2) it apparently would require reloading textures several times; and (3) it might not be able to combine three 512 X 512 sized textures into a single 1024 X 1024 texture.

I have considered loading the textures as data, performing the operations and then saving them as a new texture which could be loaded by three.js as a texture. I have done that kind of thing using other programming languages, but haven’t run across any examples showing how to do that with javascript/three.js.

I appreciate any thoughts as to what would be the best approach and where to look for examples of how it is done.

For reference, here is an example of what I am trying to do. This consists of 27 smaller grids nested within 27 larger grids (the 9 grids directly under the 27 smaller grids are not visible). The smaller grids have 27 different random colors, which are replicated on the larger grids (using 9 smaller faces). As you can see, landscape looks fairly random and the transition between the two sets of grids is seamless.

Here we go: writing to, and usage of, a data texture: use your mouse and paint something in the upper-right white canvas and see the immediate effect on the textured spinning cube.


Thanks! I’ll take a look at that.