faceColor revisited

[touslecoq]

Hi all

New to this Babylon.js malarky and trying to develop a 3D mini-app that will allow user to manipulate building blocks of some sort (e.g. add more blocks. move/rotate them and join them together).

Whilst prototyping this, the blocks (ie meshes) are all cubes created using createBox and with different coloured faces (top and bottom are red and other sides are blue).  I have used the new faceColor option on createBox to do this on creation.

However I want to add behaviour that will temporarily change colour of blocks (e.g. turn them green) as user clicks on them to effectively show that is the selected block, reverting to standard colours when "deselected" (ie when another block is selected).

Is there an easy way to reference the box faces in a similar way to faceColors when constructing using createBox?

e.g.  currentBox.faceColors[0]=new BABYLON.color3.red() ...

I am guessing not.  If no, then is there a technique for easily identifying the vertices that make up the 2 triangles for each face and changing those vertex colors independently?

Note: I read the debate on naming convention for box sides/faces.  For avoidance of doubt when I say "face" here I am referring to a real-world face or side of the cube rather than the individual triangles that make up that side.

Note2: I will want to add some additional behaviour that allows a user to conjoin 2 cubes when in close proximity to each other (a kind of snap-to if you like) but only allow that behaviour on certain sides (imagine a crude Lego (TM) block that can only be connected on top of each other not side to side).  So with one eye to the future, any mechanism for identifying individual faces needs to work for that to.

Thanks muchly

Richard

 

 

[eboo]

maybe you can try to use emissive and diffuse colo.

i use diffuse color for rendering and all meshes have standrad emissive color.

so if you have the same.

maybe you can try somehtink like

var temp=scene.getMeshByName(cazze);
if(!!temp) temp.material.diffuseColor = new BABYLON.Color3(0.9, 0, 0);

when selected and go back to temp.material.diffuseColor = new BABYLON.Color3(0, 0, 0); when not selected

[touslecoq]

Hi thanks.  Problem is that this would change the whole colour of the box whereas I have specific faces of the mesh at different colours.  I think I will have to do this by referencing all vertices on a given face and changing their colour.  Just need to work out the order in which the vertices are listed ... e.g. the first 6 vertices (ie first 18 numbers) are one face, next 6 vertices (ie next 18 numbers) are the opposite face or adjacent face etc.  

[touslecoq]

Found the answer buried here ... proper-way-to-generate-a-meshgeometry-from-scratch

My sample code is here.

Basically I create the box.  Use the faceColors method to colour the individual sides at point of creation (setting 2 green, 2 blue, 2 red in this case).  Then once created I turn the first face black by 1) extracting the color data into an array (four floats per vertex - each vertex's color is seemingly represented as a Color4).  2) updating the values in the array as required - in this case I set the first three floats to 0 (ie black).  3) creating an empty BABYLON.VertexData object and overwriting its .Colors attribute with the modified array.  4) using the vertexData.applyToMesh(meshName, True) function to apply the vertexData object containing only the changed Colors to the mesh.

I haven't fully tested it but the empty vertexData object I created and updated into my Mesh had no Positions, Indices, Normals data in it but the cube remains ok.  I assume therefore that when the applyToMesh function is called it only applies changes where data is provided (Colors data in my case). 

The trick now will be to identify which face (ie which 4 vertices) the user clicked before calling this to change the colour of that face.

This IS fun :).

[jerome]

nice study and work

you discovered so many things by yourself and you found almost all the right answers. Congratulations !

To help you a little : you don't need to recreate a new VertexData object. You could just update the mesh underlying vertexData with updateVerticesData() (surprising !) : http://doc.babylonjs.com/classes/2.3/Mesh#updateverticesdata-kind-data-updateextends-makeitunique-rarr-void

The "kind" to use would be here "BABYLON.VertexBuffer.ColorKind" and keep the rest unchanged. Note that the mesh must be set as updatable.

here is an example of this call : https://github.com/BabylonJS/Babylon.js/blob/master/src/Particles/babylon.solidParticleSystem.ts#L657