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.
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 cube.zip (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
mesh.actionManager.registerAction(
new BABYLON.InterpolateValueAction(
BABYLON.ActionManager.OnPickTrigger,
light,
'diffuse',
color,
1000
)
);
};//*/
// 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;
prepareButton(cubo,BABYLON.Color3.Random(),light1);
}
}
};
//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"
crearCubos(6);
/////////////////////////////////////////////////////////////////
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 () {
scene.render();
});
// Watch for browser/canvas resize events
window.addEventListener(“resize”, function () {
engine.resize();
});
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
