在 Three.js 中使用与默认字体不同的字体答案

【问题标题】：Using fonts different than default in Three.js在 Three.js 中使用与默认字体不同的字体
【发布时间】：2013-02-18 23:32:29
【问题描述】：

所以我在一个项目中使用了three.js，并且希望能够使用默认的“helvetiker”以外的字体。我做了一些挖掘，发现您需要使用 typeface.js 转换字体以获取字体文件，并且已经这样做了，我只是不知道如何将这种字体“插入”到threejs中。我已经挖掘了 mrdoob three.js 示例并且找不到任何东西，我还在three.js 源文件中挖掘并在 THREE.FontUtils 中找到了一个 loadFace 函数，但我不知道如何使用它.这是我第一个使用 Three.js 的项目，因此我们将不胜感激。谢谢！

格雷格

【问题讨论】：

标签： javascript fonts three.js typeface.js

【解决方案1】：

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

"familyName":"字体名"

threejs 需要引号内的名称，但要小写。例如，例如字体：古英语文本 MT

你应该在（js）字体文件的末尾找到...,"familyName":"Old English Text MT",...所以你在三个js中填写这个：

font: "古英语文本 mt"

（或引号中的familyName之后的任何内容但小写。如果您在（js）字体文件中编辑familyName之后的文本，例如“familyName”：“cAt aNd DOg”，那么您必须使用它。所以threejs声明那么应该看看：

var text3d = new THREE.TextGeometry(n.text, { 尺寸：15，高度：10，曲线段：10，字体：“猫和狗” });

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

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

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

【讨论】：

如果新政不景气，请使用此网站进行转换：gero3.github.io/facetype.js
如果您在 node.js 中，请将 loadFace 调用替换为字体文件中的require ('three').typeface_js.loadFace。

【解决方案2】：

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

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

我认为不需要任何其他步骤。

【讨论】：

如果我将它切换到 mrdoob 示例中包含的另一种字体，那可以找到，但我无法让它与我为其创建 .js 文件的字体一起使用.
您的字体名称可能有误。打开您创建的 *.typeface.js 文件并查找“full_font_name”属性。那是您创建的字体的名称。用该名称替换“droid sans”。
还要确保您引用的字体全部小写。
这里是我的字体 js 文件中的 full_font_name 部分"full_font_name":"TradeGothicLTStd-Bold","font_family_name":"Trade Gothic LT Std Bold","这里是我创建文本几何的地方var textGeo = new THREE.TextGeometry( txt, { size:70, height:5, curveSegments:2, font:"TradeGothicLTStd-Bold" }); 我也尝试过使用 "tradegothicltstd-bold" ，但仍然没有运气。感谢您对此的帮助。我很感激。
tradegothicltstd_bold（下划线）

【解决方案3】：

正如 Tim 所说，唯一棘手的事情是正确设置字体名称。它似乎是生成的 js 中的“姓氏”，（font_family_name）小写 - 保留空格。如果您觉得方便，您甚至可以编辑它（在 .js 中） - 我已经完成了 myself。

【讨论】：