2014-02-10 173 views
2

我使用Three.js ParticleSystem顯示大量的點,提供了一個不錯的表現。粒子系統顯示

根據縮放級別的不同,這些粒子可能彼此非常接近,這會在修改相機位置時創建一組奇怪的De Moivre條紋。

用於構建本的代碼:

var material = new THREE.ParticleSystemMaterial({ 
    size : 250, 
    color : colors[i] 
}); 
parentMesh.add(new THREE.ParticleSystem(geometries[i], material)); 

有正在創建4周這樣的粒子系統的目的,它們中的一個具有一紅色材料和其他的綠色,藍色和黃色。

有什麼我可以做的,以避免De Moivre工件行爲?

回答

0

沒有任何截圖/更多的代碼很難說,是什麼原因造成這種影響。你的材料的尺寸相當大,所以首先我會降低它。然後,我將禁用您的材料的depthWrite colors: colors[i], depthWrite : false });

我也會創建一個包含所有粒子的粒子系統。因此,您將所有頂點都推入一個幾何體,並通過向幾何體添加顏色數組來設置此頂點的顏色。在你的材質中,你將顏色設置爲vertexColors。這樣你有一個大的緩衝區,而不是其中的4個。

var myColors = [new THREE.Color(0xff0000),new THREE.Color(0x00ff00),new THREE.Color(0x0000ff),new THREE.Color(0xffff00)], //your predefined colors 
    geometryColors = []; 

for(var i = 0,j = geometry.vertices.length; i < j; i++) { 

    geometryColors[i] = myColors[(i%myColors.length)-1].clone(); //put the color into the geometryColors array (not sure if you really have to clone it) 

} 

geometry.colors = geometryColors; 

var material = new THREE.ParticleSystemMaterial({ 
    depthWrite : false, 
    size : 5, 
    vertexColors : THREE.VertexColors 
}); 

parentMesh.add(new THREE.ParticleSystem(geometry, material)); 
0

無碼和/或截圖,很難肯定地說,但它非常聽起來像是http://en.wikipedia.org/wiki/Z-fighting的情況下。當幾何圖形重疊時,防止這種效應的方法是確保深度軸上的幾何圖形平面之間有足夠的距離。