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 还提供了组合几何图形的方法，因此您可以在此过程中制作更少的网格(解决您的“不干净”问题)。