Jump to content

Change the color of the back face dynamically


Recommended Posts

I followed this tutorial.  


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?

Link to comment
Share on other sites

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)

Link to comment
Share on other sites

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); .


Link to comment
Share on other sites

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


Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...