Babylon.js Detect when the mouse clicks on "1" cube

Hello everyone, I am testing with babylon.js and I am creating multiple cubes with colliders to detect mouse click
I could already detect the mouse, however I cannot understand why all the cubes change color when I press only 1.
I want to change the color of only 1, not all together.

I can’t understand in the for loop I add the trigger type collision to each cube, but they all change color together.
Captura de pantalla_2020-01-31_10-31-51

Captura de pantalla_2020-01-31_10-32-00

Could someone explain to me where the error is?
I leave the complete code below and an attachment with the project in case someone can explain to me where the problem is.
I hope it is understood, I use the google translator.
Thank you very much to all.
text babylon (921.2 KB)


var canvas = document.getElementById(“renderCanvas”); // Get the canvas element
var engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine
/******* Add the create scene function ******/
var createScene = function () {

// Create the scene space
var scene = new BABYLON.Scene(engine);

// Add lights to the scene
var light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 1, 0), scene);
var light2 = new BABYLON.PointLight("light2", new BABYLON.Vector3(0, 1, -1), scene);

// Add a camera to the scene and attach it to the canvas
var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 1, new BABYLON.Vector3(0,2,0), scene);
camera.attachControl(canvas, true);

// On pick interpolations
var prepareButton = function(mesh,color,light) {
    mesh.actionManager = new BABYLON.ActionManager(scene);//creo la colision en el cubo y agrego a escena
    //accion que va a pasar al tocar el cubo
        new BABYLON.InterpolateValueAction(

// Add and manipulate meshes in the scene
var crearCubos= function(cantidad_cubos) {
    for(x = 0; x < cantidad_cubos;x++){
        for(z = 0; z < cantidad_cubos;z++){
            var cubo = BABYLON.Mesh.CreateBox("cubo", 1, scene);
            cubo.position.x = x * 1 - cantidad_cubos / 2;
            cubo.position.z = z * 1 - cantidad_cubos / 2;
            cubo.position.y= Math.random() * (1 - 0) + 0;

//llamo a la funcion para crear los cubos con las colisiones 
//recibe como parametro la cantidad de cubo que quieres instanciar
//tener en cuenta que la cantidad es "largo * ancho"

return scene;


/******* End of the create scene function ******/

var scene = createScene(); //Call the createScene function

// Register a render loop to repeatedly render the scene
engine.runRenderLoop(function () {


// Watch for browser/canvas resize events
window.addEventListener(“resize”, function () {


I do not feel like you have set up materials for your boxes. So by default they will all share the same material and thus if you change the diffuse color it will change it for all meshes using that material

And how do I create multiple materials.
I believe in the loop the material?
Doesn’t it matter if they have the same name?

Hi guys.

        new BABYLON.InterpolateValueAction(

There, we are interpolating a color change for light1… and so… light1 changes colors of all mesh.

We need to change mesh.material.diffuseColor, instead.

Look here:

Click a mesh, it changes to random color.

  • Line 18… only param is mesh. Called from line 49.

  • Line 25… change light1 to mesh.material.

  • Line 26… set interpolation to target material’s .diffuseColor property.

  • Line 27… Let’s make a random color HERE, instead of using one from function params.

  • Line 40… here we create a BabylonJS StandardMaterial object-type.

  • Line 41… set material’s ..diffuseColor to gray, starting color.

  • Line 43… install material onto mesh.

We SHOULD be able to click an ALREADY COLORED cube/box, and make it change color AGAIN. I have a bug in that area, still. Maybe registerAction needs a ‘then’ option… for extra clicks. (see ActionManager docs for info about then)

I hope this helps.

1 Like

Woo, it was impossible for me to solve this problem on my own, thank you very much.

1 Like