javascript - 如何在 THREE.TextGeometry 中添加带上标的字符串？

Question

我正在使用 Three.js 开发尺寸标注工具。我想在两个对象之间的一条线上写出距离的尺寸。我想写 2.45⁵ 如图所示。

遗憾的是，Threejs R88 中的 HTML 编码无法获取，例如 TextGeometry 中的上标函数。一种解决方案是将第二个文本几何图形(带有上标数字)附加到主几何图形。但我想避免使用这种解决方案，因为我认为这不是一个非常明智/干净的解决方案。您有解决此问题的想法吗？

像这样的事情显然行不通:

var ss = '5'.sup();

var geometry = new THREE.TextGeometry( '2.45' + ss, {
        font: font,
        size: 80,
        height: 5});

提前谢谢你，我愿意接受每一个建议。

Answer 1

Font您加载的必须支持您要使用的字符。

经过简单的检查，我在 helvetiker_regular.typeface.json 字体文件中找到了“²”。这并不能保证它会包含您要查找的字符。例如，我无法在同一个文件中找到“⁶”的定义。

当然，最简单的解决方法是创建正常比例的数字，然后将它们缩放/定位到下标位置。 Three.js 还提供了组合几何体的方法，因此您可以在此过程中创建更少的网格(解决您的“不干净”问题)。