Within my scene, a unique arrangement of 7 spheres creates a flower petal formation. The setup includes 6 spheres around the perimeter and one sphere at the center. I aimed to randomize the color of each sphere individually. Below is the code snippet utilized in this attempt:
function changeSphereColors() {
var hex, color, len = spheres.length;
var change = function(i) {
var hex = "#000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);});
color = new THREE.Color(hex);
spheres[i].material.color = color;
}
for (var i=0; i<len; i++) {
change(i);
}
}
var render = function() {
requestAnimationFrame(render);
rotateSpheres();
var num = Math.random();
if (num<0.1) {
changeSphereColors();
}
renderer.render(scene, camera);
}
render();
An array named spheres holds the 7 spheres within the scene. The intention was to assign a distinct random hexadecimal color to each sphere by iterating through them. Curiously, instead of displaying 7 spheres with varied colors, all spheres appear in the same color.
Upon examination of the outputs to verify individual colors and loop functioning correctly, everything appeared operational. Each iteration generated a unique hex color and successfully applied it to the respective sphere.
This leads to the question: Why do all spheres share identical colors?