獨立改變球體顏色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

回答

相關問題