javascript - 在粒子系统中渲染球体(或点)

Question

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

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

图像的问题在于，当您有数千个点时，它们似乎有时会在边缘相互遮挡。据我所知，一个点的 png 文件中的黑色区域似乎挡住了当前点后面的图像。 (但是后面再往前点是透明的)

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

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

谢谢你的帮助

Answer 1

我认为用球体渲染点云效率不高。您应该能够摆脱粒子系统并使用纹理或小型 Canvas 程序来绘制圆圈。

第一个 three.js sample使用 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 渲染器的代码。

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

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

1. DepthCam
2. KinectJS