Different Textures On The Front And Back Of A Mesh

Having a front and a back makes most sense when talking about flat meshes such as a plane, a disc or a polygon. All of which have exactly two sides both of which can be seen only when the option sideOrientation is set to BABYLON.Mesh.DOUBLESIDE.

However, many meshes have the option sideOrientation and this method applies to them as well. In which case think of the front as outside and the back as inside.

To have different textures front and back the front and back image must be in the same file, like the one below

front and back images

This is then split using the frontUVs and backUVs options.

FrontUVs and BackUVs

Both frontUVs and backUVs have the form Vector4(u0, v0, u1, v1) with 0<= u0, v0, u1, v1 <= 1 and (u0, v0) are the bottom left coordinates and (u1, v1) the top right coordinates of the clipping rectangle of the image.

To split the image above you can form two variables

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

and then place in the options

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

taking into account width to height ratio of section of image.

It is then just a case of creating a StandardMaterial and setting the texture to the image.

const mat = new BABYLON.StandardMaterial("", scene);
mat.diffuseTexture = new BABYLON.Texture("URL to Image File", scene);
plane.material = mat;

Two Sided Examples

Different Images On A Plane Different Images On A Polygon

Inside and Outside Examples

Different Images On A Tube Image On The Outside Of A Sphere Image On The Inside Of A Sphere