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 canvas非常陌生，所以不胜感激。

Answer 1

在粒子系统中传递每个粒子的几何结构通常是不可能的，因为每个粒子的相同几何结构使这些系统有效。

为了实现这一目标，你正在寻找基本上有两种选项的效果：

• 渲染所有文本到一个单一的精灵质感，并为每个粒子使得每个粒子渲染正确的文本纹理坐标。 （仅对文本进行二维渲染，不能对大量文本进行缩放）请参阅example。
• 使每个文本对象都是自己的几何图形，并在没有粒子系统的情况下渲染它们。 （你放弃了粒子系统的性能增益）

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