在三个js app 2d文本中使用css字体与字体js

Question

我最近很开心使用threejs。要在threejs应用程序中创建2d文本，我必须创建一个画布，用文本填充画布并将画布添加为纹理。就像在这个例子中完成的那样。 http://stemkoski.github.io/Three.js/Texture-From-Canvas.html

对于我正在使用自定义字体的文本，我有两个选项可以将字体嵌入到应用程序中。使用css3 @font-face或在此站点中转换后将字体包含为字体javascript。 http://typeface.neocracy.org/

我想知道除了我在这里列出的那个之外，还有另外一个与另一个相比的缺点。

使用@font-face

• 在加载元素后加载字体，这需要额外的解决方法Drawing text to <canvas> with @font-face does not work at the first time

使用typeface

• 当字体转换为字体文件时，它们的大小会增长两倍以上。

先谢谢。

Answer 1

如果您使用字体绘制到画布，就像您说的那样，并且可能在页面的其余部分使用相同的字体，我会使用@ font-face，因为它确实是标准方式，不需要JavaScript编码字体。

但如果您还希望能够使用TextGeometry将3D文本写入场景，则必须使用typeface.js

[示例：http://blog.andrewray.me/creating-a-3d-font-in-three-js/]

所以在我看来，这取决于你对该字体的其他用途......

• 仅作为纹理图像“平坦”，在Three.js内部+可能在其他HTML / App中的其他地方

  使用@ font-face

• 在Three.js场景中平面作为纹理图像+也是TextGeometry 3D文本

  使用typeface.js

Answer 2

要在Three.JS中使用arbtirary字体，首先必须将字体转换为可用的形式，例如通过将.ttf文件处理为http://typeface.neocracy.org/来填写字体javascript文件。

其次，检查生成的文件（可能更容易通过将其粘贴到像http://www.jspretty.com/这样的地方来复制它）并且你正在寻找文件末尾的3个参数：“familyName”（这将是成为“font”参数，“cssFontStyle”（将成为“样式”参数，并且“cssFontWeight”（将成为“权重”参数）。

然后您在页面上包含生成的Javascript文件，当您致电时，它将自动被THREE.js选中

new TextGeometry（'my text here'，    {      font：familyName_from_file，      style：cssFontStyle_from_file，      重量：cssFontWeight_from_file    } ）;

然后可以封装在Mesh对象中并在Scene中呈现。