three.js - 在三个 js 应用程序 2d 文本中使用 css 字体与 typeface js

标签 three.js font-face

我最近和 Threejs 一起工作很开心。要在 Threejs 应用程序中创建 2D 文本,我必须创建一个 Canvas ,用文本填充 Canvas 并将 Canvas 添加为纹理。就像本例中所做的那样。 http://stemkoski.github.io/Three.js/Texture-From-Canvas.html

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

除了我在这里列出的缺点之外,我想知道与另一种相比还有哪些其他缺点。

使用@font-face

使用字体

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

提前致谢。

最佳答案

如果您使用字体绘制到 Canvas 中,就像您所说的那样,并且可能在页面的其余部分使用相同的字体,我会使用@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

关于three.js - 在三个 js 应用程序 2d 文本中使用 css 字体与 typeface js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27743284/

相关文章:

three.js - Buffergeometry 显示为黑色,带有 phongmaterial

javascript - 在 3D 模型上画一条与其表面相符的线

css - OTF Web 字体在 Windows 上的 Webkit/Chrome 中呈现错误

css - 字体在 Firefox 或 IE 中不工作

css - 当我们使用文本转换 : uppercase? 时,为什么 IE7 要求 EOT 字体包含小写字形

silverlight - 寻求 Silverlight 应用程序的字体策略

javascript - Three.js flipSided 属性

reactjs - 带有反应 Spring 动画的 react 三纤维

css - 使用 Unicode 字体作为@font-face

three.js - 扩展-THREE.MeshBasicMaterial