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/

独立改变球体颜色three.js

1 个答案: