2014-02-10 136 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的情况下。当几何图形重叠时,防止这种效应的方法是确保深度轴上的几何图形平面之间有足够的距离。