更改球体颜色独立三个

Question

在我的场景中，我的花瓣形成7个球（周长为6个，中间有1个）。我想随机更改每个球体的颜色。这是我尝试执行此操作的代码：

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();

spheres是一个长度7的阵列，其中每个球体中都有每个球体。由于我循环遍历每个球体并为每个球体分配一个随机六角形，因此应该有7个不同颜色的球体，但是，所有球体都是相同的颜色。

我查看了输出，以查看每种颜色是否不同，并且循环按预期进行，一切似乎都可以正常工作。循环的每次迭代都产生了不同的十六进制颜色，并且将十六进制颜色分配给每个球体。

为什么所有球都具有相同的颜色？

Answer 1

可能是因为它们共享相同的材料。为每种创建一个单独的材料。

这是我用3个球创建的示例。两个共享相同的材料，一个没有。如果我用共享材料设置一个球的颜色，另一个也会更改：

var geometry = new THREE.SphereGeometry(3, 50, 50, 0, Math.PI * 2, 0, Math.PI * 2);
var material1 = new THREE.MeshBasicMaterial();
var material2 = new THREE.MeshBasicMaterial();
var sphere = [new THREE.Mesh(geometry, material1), new THREE.Mesh(geometry, material1), new THREE.Mesh(geometry, material2)];
scene.add(sphere[0]);
scene.add(sphere[1]);
scene.add(sphere[2]);    
var hex = "0x" + "000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);});        
sphere[0].material.color.setHex(hex);
hex = "0x" + "000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);});        
sphere[2].material.color.setHex(hex);
// sphere[0] & sphere[1] now share the same colour, even though I didn't set for sphere[1]. 
// Sphere[2] colour is unique.

http://jsfiddle.net/ebnfsa5h/3/