渲染粒子系统中的球体(或点)

Question

我正在使用Three.JS库在Web浏览器中显示点云.点云在启动时生成一次,不再添加或删除其他点.但它确实需要旋转,平移和缩放.我已经通过了教程关于three.js所产生的颗粒在这里

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

图像的问题在于,当你有数千个点时,它们似乎有时会在边缘处相互遮挡.从我可以收集的信息来看,点的png文件中的黑色区域似乎会阻挡当前点后面的图像.(但对于后面的点而言它是透明的)

这种模糊图像是我想用形状生成点的原因.我曾尝试更换particles = new THREE.Geometry()用THREE.SphereGeometry(radius, segments, rings),并试图顶点更改为球体.

所以我的问题是.如何修改示例代码以使其呈现球体(或点)而不是正方形？此外,粒子系统对于我的特定情况是最有效的系统还是我应该只生成粒子并设置它们各自的位置？正如我所提到的,我只生成一次点,但随后旋转,缩放,平移点.(我使用TrackBall示例代码来使鼠标事件正常工作).

谢谢你的帮助

Answer 1

我不认为用球体渲染点云是非常有效的.您应该能够使用粒子系统并使用纹理或小画布程序来绘制圆形.

前三个.js示例之一使用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着色器,该着色器通过三个粒子系统渲染.js

如果您的点云来自Kinect,这些资源可能会有用:

1. DepthCam
2. KinectJS