三.js：将文本而不是粒子传递到粒子云中答案

【问题标题】：three.js : Pass text instead of particles into particle cloud三.js：将文本而不是粒子传递到粒子云中
【发布时间】：2018-03-29 21:03:02
【问题描述】：

我有一个分叉的 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 还很陌生，因此感谢您提供任何帮助。

【问题讨论】：

标签： javascript three.js html5-canvas word-cloud

【解决方案1】：

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

要达到你想要的效果，基本上有两种选择：

将所有文本渲染为单个精灵纹理，并为每个粒子提供纹理坐标，以便每个粒子渲染正确的文本。（仅文本的二维渲染，对于大量文本不可扩展）请参阅此example。
使每个文本对象都成为自己的几何图形，并在没有粒子系统的情况下对其进行渲染。（您失去了粒子系统的性能增益）

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

【讨论】：

好吧，我可能会满足于 TagCanvas.js 之类的东西。感谢您的提示。