Attempting to create a simple program with an animation that switches the color of a traffic light from green to red and back every 2 seconds, but the color change is not working as expected.
I have tried debugging the code by printing the booleans that should trigger the color change, and everything seems correct. However, the color remains unchanged. The element I am trying to modify is called "bombilla" and the color change function is called "changeColor" which is being executed every two seconds using setInterval()
// JavaScript code for creating a simple animation
var scene;
var camera;
var renderer;
var cube;
var cylinder;
var red = 1;
// Create the scene
scene = new THREE.Scene();
scene.background = new THREE.Color(0xf0f0f0);
// Create orthographic camera and add it to the scene
camera = new THREE.OrthographicCamera(window.innerWidth / -200, window.innerWidth / 200, window.innerHeight / 200, window.innerHeight / -200, 0.1, 1000);
scene.add(camera);
// Create a renderer for the scene
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
cube = new THREE.BoxBufferGeometry(1, 1, 1);
cylinder = new THREE.CylinderGeometry(0.1, 0.1, 5, 100);
// Define various mesh elements
var carga = new THREE.Mesh(cube, new THREE.MeshLambertMaterial({ color: 0xA6A6A6 }));
var cabina = new THREE.Mesh(cube, new THREE.MeshLambertMaterial({ color: 0xF2F2F2 }));
// More mesh definitions...
scene.add(carga);
scene.add(cabina);
// Add more mesh elements to the scene...
// Create directional light for the scene
var light = new THREE.DirectionalLight(0xffffff, 1.5);
light.position.set(2, 1, 5).normalize();
scene.add(light);
var init = function() {
// Initialization function to set up the initial positions and scales of mesh elements
// Omitted for brevity...
};
// Function to change the color of the bulb (traffic light)
var changeColor = function() {
if (red == 1) {
bombilla.material.color.set(0x0CAB00);
red = 0;
} else if (red == 0) {
bombilla.material.color.set(0xFF0000);
red = 1;
}
}
var update = function() {
// Call the changeColor function every 2 seconds
setInterval(changeColor, 2000);
};
var render = function() {
renderer.render(scene, camera);
};
var GameLoop = function() {
// Main game loop function
init();
update();
render();
};
GameLoop(); // Start the game loop