Rows and images on planes

Questions
1

Hey!!!

I been trying to edit a script i saw on another website and realized it wasnt going well and the author never responded to my question so Im going to figure it out myself. I saw this PG:

https://www.babylonjs-playground.com/#LXZPJK#3

Ive tried to edit it by making multiple planes with no luck. Here is my code:

        //split image between sides
        var f = new BABYLON.Vector4(0.5,0, 1, 1); // front image = half the whole image along the width
        var b = new BABYLON.Vector4(0,0, 0.5, 1); // back image = second half along the width

        var plane0 = BABYLON.MeshBuilder.CreatePlane("plane0", {height:-1, width: 0.665, sideOrientation: BABYLON.Mesh.DOUBLESIDE, frontUVs: f, backUVs: b}, scene);

 var mat = new BABYLON.StandardMaterial("", scene);
 mat.diffuseTexture = new BABYLON.Texture("image/sw.jpg", scene);
 plane0.material = mat;

 //split image between sides
 var f = new BABYLON.Vector4(0.5,0, 1, 1); // front image = half the whole image along the width
 var b = new BABYLON.Vector4(0,0, 0.5, 1); // back image = second half along the width

 var plane1 = BABYLON.MeshBuilder.CreatePlane("plane1", {height:1, width: 0.665, sideOrientation: BABYLON.Mesh.DOUBLESIDE, frontUVs: f, backUVs: b}, scene);

var mat = new BABYLON.StandardMaterial("", scene);
mat.diffuseTexture = new BABYLON.Texture("image/sw.jpg", scene);
plane1.material = mat;

Question: How do I make rows of planes(would like 16 planes in total)? Also I have an image but it shows on both sides…how do I have one image on one side and a different image on the other side?

:heart: :heart:,
Mekaboo

2

https://doc.babylonjs.com/how_to/frontandbackuv

Your image file can contain more than two images of course.

If all planes have same image front and back create 15 more instances.

If the 16 planes all have different images front and back then either

  1. clone plane 15 times and use 16 different images with two pictures and change texture for each plane
    Or
  2. Use a single image with 32 pictures (or fewer if for example planes have all the dame backs but different fronts) and create 16 different planes using appropriate values for the Vector4s for the f and b in frontUVs: f, backUVs: b

To position in rows and columns set appropriate positions

1 Like
3

Sweet Beans!!

Issue though now is how do I clone…as you may have saw in my code I tried to clone and I got a blank screen when testing via localhost(I will eventually be using a webhost as well)

5

That is SUPER cool…thanks for sharing :blush: