three.js：将文本而不是粒子传递给粒子云

Question

我有一个分叉的three.js codepen实验，其中有方形粒子浮动。

但我正在尝试修改它，以便我可以将文本（几何？）传递到其中，替换方形粒子，有点像字/标签云。这可能吗？

链接到当前的codepen： https://codepen.io/farisk/pen/pWQGxB

这是我希望实现的目标：

我目前不确定从哪里开始。

我在想某种方式使用文本几何

var loader = new THREE.FontLoader();
let font = loader.parse(fontJSON);
var geometry = new THREE.TextGeometry("hello", {font: font, size: 120, height: 10, material: 0});  

但有人提到这不是正确的方法吗？我对three.js / html画布很新，所以对任何帮助表示赞赏。

Answer 1

在粒子系统中通常无法传递每粒子的几何体，因为每个粒子的相同几何形状使这些粒子系统有效。

为达到您所寻求的效果，基本上有两种选择：

• 将所有文本渲染为单个精灵纹理，并为每个粒子提供纹理坐标，以便每个粒子渲染正确的文本。 （仅对文本进行二维渲染，并且不能对大量文本进行缩放）请参阅此example。
• 使每个文本对象成为自己的几何体，并在没有粒子系统的情况下渲染它们。 （你失去了粒子系统的性能增益）

如果您真的只想实现标签云，您还可以使用纯JavaScript并根据一些计算出的3D位置转换文本元素的位置。