Currently, I am working on a typescript program that involves manipulating a collection of objects, all initially colored red (e.g. cup.material.color is red).
My goal is to be able to change the color of one object, such as a cube, by pressing a certain key (e.g. ArrowUP). This part is working smoothly. However, the challenge lies in ensuring that when I change the color of one object, any previously colored object reverts back to the default color. Essentially, only one object should have a non-default color at a time.
I attempted to solve this issue by creating a variable to store the initial color, but my solution seems to be flawed. Here's an example of my code:
var cube1 = new THREE.Mesh(
new THREE.BoxGeometry(),
new THREE.MeshBasicMaterial({color:0xffffff})
);
var cube2 = new THREE.Mesh(
new THREE.BoxGeometry(),
new THREE.MeshBasicMaterial({color:0xffffff})
);
var previousCube;
window.addEventListener("keydown",function(event){
if(event.key == "ArrowUp") {
cube1.material.color.set("red");
previousCube = cube1;
}
if(event.key == "s") {
cube2.material.color.set("red");
previousCube.material.color.set("0xffffff")
previousCube = cube2;
}
}