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
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
var f = new BABYLON.Vector4(0.5,0, 1, 1); // front image = half the whole image along the widthvar b = new BABYLON.Vector4(0,0, 0.5, 1); // back image = second half along the width
and then place in the options
var 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.
var mat = new BABYLON.StandardMaterial("", scene);mat.diffuseTexture = new BABYLON.Texture("URL to Image File", scene);plane.material = mat;