在THREE.js中的ParticleSystem / PointCloud中标记粒子

时间:2014-09-04 09:21:16

标签: three.js point-clouds particle-system

更新

我有一百万个2D圆圈,它们跨越X,Y轴,其Z值为0(就像散点图一样)。我正在使用THREE.PointCloud和WebGL着色器程序,希望它能提高性能(似乎有效)。它们是使用球的256x256px PNG图像制作的(即使在缩放时点数永远不会达到256x256px?)。我还使用光线投影将鼠标悬停在圆圈上(点击不同颜色和大小的圆圈)。

我尝试为点添加文本标签,当用户缩放并平移场景时,这些标签会缩放并锚定到圆圈。

我尝试为每个点创建一个2D THREE.TextGeometry对象,并将它们添加到Object3D并将其添加到场景中。预计表现不佳,但其他一切都很好。

我目前正在为每个点的标签创建2D画布纹理,将纹理添加到对象然后将其添加到场景中(看起来很快,但字体大小,像素化和坐标让我很头疼。)

我想在某种2D平面上可以添加许多文字标签,这些标签在Z轴上放大时不会像素化。 THREE.PlaneGeometry听起来不错,但在尝试添加对象时遇到错误。

另一种选择是仅显示可见点的标签。我知道PointCloud被认为是单个对象,因此FrustrumCulling不适用于各个点。所以我必须实施自己的剔除检测。如果我这样做,我可以沿着使用HTML元素标记的路线,甚至是TextGeometry方法。

旧问题:

有没有人在THREE.js中有任何成功的标记点/粒子?

理想情况下,非像素化文本标签,能够与pointcloud一起缩放和旋转。

关于像素化,我考虑使用TextGeometry()来制作2D文本标签。然后将标签添加到对象,然后使用与点相同的坐标添加到场景。

但是在100万点的情况下,会添加100万个文字标签的单独对象太多了吗?

1 个答案:

答案 0 :(得分:0)

经过一些研究,似乎签名的距离字段字体可以清晰地呈现文本而不会出现像素化,并且可以通过使用WebGL着色器来实现 - 因此将工作负载卸载到GPU上,这对于标记一百万个粒子非常有用。