独立改变球体颜色three.js

在我的场景中，我有7个花瓣形成球体（周长6，中心1）。我想随机更改每个球体的颜色。这里是我以前尝试这样做的代码：独立改变球体颜色three.js

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个不同颜色的球体，但相反，所有球体都是相同的颜色。

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

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

来源

2016-11-25 Peter Wang

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

这是我用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/

来源

2016-11-25 03:59:31

这工作！非常感谢！ –

独立改变球体颜色three.js

回答

相关问题