javascript - 三.js : Pass text instead of particles into particle cloud

Question

我有一个 fork 的 Three.js 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 canvas 还很陌生，因此非常感谢您的帮助。

Answer 1

在粒子系统中通常不可能传递每个粒子的几何形状，因为每个粒子的相同几何形状使这些系统变得高效。

要实现您正在寻找的效果，基本上有两种选择:

• 将所有文本渲染到单个 Sprite 纹理中，并为每个粒子提供纹理坐标，以便每个粒子渲染正确的文本。 (仅对文本进行二维渲染，对于大量文本不可扩展)请参阅此 example 。
• 使每个文本对象都有自己的几何体，并在没有粒子系统的情况下渲染它们。 (您失去了粒子系统的性能增益)

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