Javascript 在粒子系统中渲染球体（或点）

我正在使用Three.JS库在web浏览器中显示点云。点云在启动时生成一次，不再添加或删除其他点。但它确实需要旋转、平移和缩放。我已经阅读了有关在three.js中创建粒子的教程

使用这个例子，我可以创建正方形的粒子，或者使用球体的图像来创建纹理。该图像更接近我想要的，但是否可以在不使用该图像的情况下生成点云？例如，球体几何体

该图像的问题在于，当你有数千个点时，它们似乎有时会在边缘相互模糊。从我所能收集到的信息来看，点的png文件中的黑色区域似乎挡住了当前点后面的图像。（但对后面的人来说是透明的）

图像的这种模糊是我想使用形状生成点的原因。我已尝试将

particles=new THREE.Geometry（）

替换为

THREE.SphereGeometry（半径、分段、环）

，并尝试将顶点更改为球体

所以我的问题是。如何修改示例代码，使其渲染球体（或点）而不是正方形？另外，对于我的特殊情况，粒子系统是最有效的系统还是应该生成粒子并设置它们各自的位置？正如我提到的，我只生成一次点，然后旋转、缩放、平移点。（我使用轨迹球示例代码使鼠标事件正常工作）

---

感谢您的帮助

我不认为使用球体渲染点云非常有效。您应该能够使用粒子系统，使用纹理或小画布程序绘制一个圆

其中一个使用canvas程序，以下是重要的部分：

var PI2 = Math.PI * 2;
var program = function ( context )
{
    context.beginPath();
    context.arc( 0, 0, 1, 0, PI2, true );
    context.closePath();
    context.fill();    
};
var particle = new THREE.Particle( new THREE.ParticleCanvasMaterial( {
    color: Math.random() * 0x808008 + 0x808080,
    program: program
} ) );

请随意调整WebGL渲染器的代码

我在中看到的另一个是使用编码的webm视频存储数据并将其传递给GLSL着色器，该着色器通过three.js中的粒子系统进行渲染

如果您的点云来自Kinect，以下资源可能会很有用：

图像的问题是当你有数千个点时 似乎它们有时会在边缘相互模糊。从哪来的 我可以收集它看起来像点的png文件中的黑色区域 阻止紧靠当前点后面的图像。（但事实并非如此 对后面的点透明）

通过旋转，可以消除底层方形结构的透明度重叠问题

depthTest:false

问题是，如果向场景添加其他对象，深度测试将失败，点云将在其他对象之前渲染，而忽略实际顺序。要想绕过这个问题，你还可以关闭它

depthWrite:false

将我的代码与 我看到的唯一区别是：

vec4 outColor=texture2D（纹理，gl_PointCoord）
if（outColor.a<0.5）丢弃
gl_FragColor=色彩

添加到片段着色器后，为我修复了此问题

这不是z格斗，因为随机地，一些角会与远处的粒子重叠。

---

material.alphaTest=0.5

不起作用，关闭深度写入/测试会打乱查看顺序。

如果图像的背景是透明而非黑色，我希望使用图像会起作用。请尝试使用此图像：。另外，

trackball控件

旋转摄像机，而不是点。我的另一个问题是我没有设置particleSystem.sortParticles=true；这似乎会导致渲染时出现问题。Three js现在已弃用粒子。如果您能通过点云获得一个好方法的更新，并且必须使用图像，那就太好了：）您可以尝试使用

material.alphaTest=0.5

。