Question

我使用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工件的行为吗？

Answer 1

没有任何截图/更多代码，很难说是什么导致了这种影响。你的材料的尺寸相当大，所以首先我会降低它。然后我会为您的素材colors: colors[i], depthWrite : false });

停用depthWrite

我还会创建一个包含所有粒子的粒子系统。因此，您将所有顶点推入一个几何体，并通过向几何体添加颜色数组来设置此顶点的颜色。在材质中，然后将颜色设置为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));

Answer 2

没有代码和/或屏幕截图，很难肯定地说，但它听起来像是http://en.wikipedia.org/wiki/Z-fighting的情况。几何体重叠时对抗此效果的方法是确保深度轴上几何平面之间有足够的距离。

粒子系统显示

2 个答案: