在Three.js中使用不同于默认字体的字体

Question

因此，我正在为一个项目使用three.js，并且希望能够使用默认的"helvetiker“以外的字体。我做了一些研究，发现你需要使用typeface.js转换字体来得到一个字体文件，而且已经做到了，我只是想不出如何将这个字体“插入”到threejs中。我翻遍了mrdoob three.js示例，但什么也找不到，我还翻遍了three.js源文件，在THREE.FontUtils中找到了一个loadFace函数，但我不确定如何使用它。这是我使用Three.js的第一个项目，因此任何帮助都将不胜感激。谢谢!

格雷格

Answer 1

我看到这个问题没有得到确切的答案。可以在typeface (js)文件的末尾找到The所需的确切字体名称。它是：

“familyName”：“字体名”

threejs需要在引号内使用小写的名称。例如，例如font: Old English Text MT

您应该会在(js)字体文件的末尾找到...，"familyName":"Old English Text MT"，...所以你填入下面的三个so：

font：“旧英文文本mt”

(或者任何跟在familyName后面的东西，用引号括起来，小写。如果您在(js)字体文件中编辑familyName之后的文本，例如"familyName":"cAt aNd DOg“，那么您必须使用它。因此，三个声明应该看起来：

var text3d =新THREE.TextGeometry(n.text，{n.text: 15，height: 10，curveSegments: 10，font：“猫和狗”})；

最后，确保将(js)字体文件放入网站的标题部分，例如：

<script src="fonts/droid/droid_serif_bold.typeface.js"></script>

最后一个有用的东西是(js)字体文件生成器的链接：http://typeface.neocracy.org/fonts.html

Answer 2

我所要做的就是将字体加载到脚本标记中，并在TextGeometry中更改字体：

var text3d = new THREE.TextGeometry(n.text, {
  size: 10,
  height: 5,
  curveSegments: 2,
  font: "droid sans"  //change this
});

我不认为有任何其他步骤是必要的。

Answer 3

正如Tim所说，唯一棘手的事情是正确的字体名称。它似乎是在生成的js (font_family_name)中的“家族名称”，使用小写保留空格。如果你觉得方便的话，你甚至可以编辑它(在.js中)--我已经做过myself了。