Change the color of the back face dynamically

[lindylex]

I followed this tutorial.  

http://doc.babylonjs.com/tutorials/CreateBox_Per_Face_Textures_And_Colors

I would like to change the color of the back face dynamically to the following.

 

var faceColorsCorrect = new Array (6);
faceColorsCorrect[0] = new BABYLON.Color4.FromHexString("#D40606FF"); //back
faceColorsCorrect[1] = new BABYLON.Color4.FromHexString("#2C6744FF"); //front
faceColorsCorrect[4] = new BABYLON.Color4.FromHexString("#95919DFF");

How do I do this after creating the mesh programmatically?

[jerome]

I suppose that you used a box. Unfortunately, the box isn't one of the parametric shapes, this means no update/morphing out-of-the-box (!!!) method is provided to change its settings after its contruction.

So two ways to do then with a box set as updatable :

either get its VertexBuffer.ColorKind data and change them manually for the 4 concerned vertices (2 triangles per face with 2 shared vertices), not that easy

either just apply a material with a blank texture to the wanted face and change the material color (easy)

[lindylex]

Start by doing something like this?

var texture = new BABYLON.Texture ("textures/concrete_cracked.png", scene);
mat.diffuseTexture = texture;

//Create faceUV
var faceUV = new Array (6);
	
//Apply the texture to the front of box
faceUV[1] = new BABYLON.Vector4(0,0,6,6);

I have an image file.  I only need to apply it to the front face of the mesh.  I am not sure about the numerical values for the Vector4(0,0,6,6); .

Thanks

[jerome]

a playground would make things easier to help you

the vector4 values of a faceUV element must be in the range 0 - 1

0,0 is the left bottom corner of the image whatever its size

1,1 is the upper right corner

 

[lindylex]

This is my first playground.

http://www.babylonjs-playground.com/#6BMU2#0

 

 

[jerome]

your texture image is not loaded in the PG (maybe your server doesn't allow http CORS requests)

well, here's an example : http://www.babylonjs-playground.com/#6BMU2#2

I took one of the BJS site texture, so not a blank one. A blank one could just be a tiny white square for instance, not transparent.

I gave the color white to this material.

I set the texture only to face 0 (0,0, 1,1) and nothing on the other faces (0,0, 0,0)

You can obviously mix colours with textures, say here, white for the face 0 and black for the faces 1 and 4

The material color can be changed then at any time : changed to blue here => http://www.babylonjs-playground.com/#6BMU2#3

[lindylex]

Thanks so much.  I see you change the color here.

mat.diffuseColor = BABYLON.Color3.Blue();

How does it know to only change it to blue the back side?  I assume this side. 

faceUV[0] = new BABYLON.Vector4(0, 0, 1, 1);

Is it because the material is only visible on this face?  And set to nothing on the other face in the for loop?

for (var i=0; i < 6; i++){
                faceUV = new BABYLON.Vector4(0,0,0,0);
            }

 

I still do not understand why the color is not blue on all sides.

Thanks

[jerome]

because the texture is applied on the whole back side from its left bottom corner to its right upper corner (0,0,1,1)

and is "scaled" to an invisible point on all the other sides (0,0,0,0)