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

Using fonts different than default in Three.js

本文关键字：不同于 默认 字体 Three js      更新时间：2023-09-26

所以我使用three.js为一个项目，并希望能够使用默认的"helvetiker"以外的字体。我做了一些挖掘，发现你需要使用typeface.js转换字体来获得字体文件，并且已经这样做了，我只是不知道如何将这种字体"插入"到三个js中。我翻遍了mrdoob THREE. js的例子，找不到任何东西，我也翻遍了THREE. js的源文件，在THREE中找到了一个loadFace函数。FontUtils，但我不确定如何使用这个。这是我使用Three.js的第一个项目，所以任何帮助都会非常感激。谢谢!

格雷格

我看到这个问题没有答案。三个js所需的确切字体名称应该在typeface (js)文件的末尾找到。它是:

"familyName":"字体名"

threejs需要将名称放在引号内，但要小写。例如font:古英语文本MT

你会发现在(js)字体文件的末尾…，"familyName":"Old English Text MT"，…所以你要填入三个空格

font: "old English text mt"

(或恰好在familyName后面加引号但小写的任何内容)。如果你在(js)字体文件中编辑familyName后面的文本，例如:"familyName":"cAt aNd DOg"你必须用它。所以threejs声明应该是:

var text3d = new THREE.TextGeometry(n。文本,{尺寸:15日高度:10curveSegments: 10,字体:"猫和狗"});

最后，确保你把你的(js)字体文件放在网站的标题部分，例如:

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

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

我所要做的就是在script标签中加载字体并在TextGeometry中更改字体:

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

我认为没有必要采取其他步骤。

正如Tim所说，唯一棘手的事情是获得正确的字体名称。它似乎是"姓"，是在生成的js， (font_family_name)在小写保持空间。如果你觉得方便的话，你甚至可以编辑它(在。js中)——我自己就是这么做的。

相关文章：