javascript - 独立更改球体颜色three.js

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

这很可能是因为他们共享相同的 Material 。为每个创建一个单独的 Material 。

这是我用 3 个球体创建的示例。两个共享相同的 Material ，一个没有。如果我使用共享 Material 设置其中一个球体的颜色，则其他球体也会发生变化:

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/