文本渲染
在许多3D网页应用中，您需要通过显示文本来为3D模型补充信息。在本节中，您将了解如何在应用中创建文本。
1.HTML/CSS，注解
HTML/CSS是在网页应用设计中展示信息的最自然的方式。
使用HTML渲染文本有以下几种可行的方法：
- 使用第三方网站设计工具，如Webflow。
- 手动编辑项目中的HTML/CSS文件。
- 使用HTML类的拼图。
- 使用Verge3D的annotations(注解)。
请查看 基于HTML的用户界面 章节了解使用HTML的更多信息，以及 add annotation(添加注解) 和 HTML 拼图的参考。
优点
- web开发中常见的方法。
- 渲染的文本质量好。
- 可以使用高级文本样式，如自定义笔画，字体和3D转换。
缺点
- 不易与已渲染的场景集成。大多数情况下，HTML文本都叠加在3D内容之上渲染。
- 在虚拟现实模式下使用HTML文本没有简单的方法。
- 如果应用中有太多动态文本元素（如注解），会影响渲染速度。
2.动态文本几何
您可以使用建模套件中的文本对象来创建类似于规则网格的文本几何图形。“动态”意味着Verge3D不在导出的glTF资产中存储文本几何图形数据，而是在场景加载时（使用字体数据）重新创建文本。这还意味着，您可以在运行时中使用 update text object(更新文本对象) 拼图或使用JavaScript实时编辑文字。
若要使文本对象动态化，请确保在导出设置中 不要勾选bake text选项：
创建应用时，您还需勾选Font Converter字体转换选项（默认情况下启用），以开启使用动态文本几何图形功能。此选项将激活opentype.js模块，用于加载和处理字体数据。
如果您创建时忘记启用Font Converter选项，或是应用使用早于Verge3D 3.6的版本创建，可以手动将opentype.js文件从Verge3D安装目录的build文件夹复制到应用目录。
优点
- 文本对象是全功能的3D网格对象，可以移动/添加动画/分配自定义材质，与场景中的任何其他3D网格一样。
- 动态文本在运行时中渲染，可减少需通过网络加载的模型数据量。
- 不仅可以修改文本内容，还可以修改字体、挤压深度和斜面。
缺点
- 在场景加载过程中，需要一点时间来生成文本。
- 需要加载字体文件（TTF或WOFF），并使用 字体转换器 模块。
- 并非所有的文本参数都被Verge3D支持。
3.静态文本几何
静态文本几何图形与动态文本几何图形非常相似，不同的是它在导出为glTF资产过程中会被烘焙为文本网格数据。因此您无法在运行时中编辑它们，例如更改内容或字体。但仍然可以分配材质或移动文本，类似于其他几何图形对象。
若要使用静态文本几何图形，请在导出设置中勾选Bake text选项：
优点
- 文本几何的图形会从建模软件中原样输出到场景。
- 不需要额外的字体资产，也无需在场景加载过程中花时间生成字体数据。建议对所有中文文本使用静态文本几何。
缺点
- 长文本会增加glTF资产的大小。因此，加载场景可能需要很多时间，特别是网速不好时。
- 无法在运行时中编辑文本。
4.带文本的纹理
您可以将文本渲染为位图纹理，然后将该纹理应用到对象。这种技术的流行用例包括定制的billboars,个性化的杯子/T恤,以及珠宝雕刻：
查看texture from text文本纹理拼图章节，了解如何使用纹理与自定义文本的更多信息的拼图。
优点
- 渲染性能不错，GPU内存消耗适中。
- 您可以通过使用节点材质添加各种文本效果（例如，用文本创建凹凸映射纹理）。
缺点
- 如果经常更改文本（例如每帧），加载速度可能会变慢。
- 不能使用复杂的文本对齐。
- 文本仅为二维，因此没有挤压/斜面效果。
- 质量有些降低，特别是小图像（小于1K)。
5.画布纹理
此方法是对前面技术的扩展，它允许您通过使用JavaScript和画布元素。查看create canvas elem(创建画布元素)拼图获取更多信息。
优点
- 您可以使用JavaScript进行任何文本定制。
- 可以在绘制文本的同时绘制形状和图像。
- 渲染性能不错，GPU内存消耗适中。
- 您可以通过使用节点材质添加各种文本效果（例如，用文本创建凹凸映射纹理）。
缺点
- 需要良好的JavaScript编程技能。
- 文本仅为二维，因此没有挤压/斜面效果。
- 质量有些降低，特别是小图像（小于1K)。
遇到问题？
欢迎您随时在 论坛上提问！您还可以加入中文用户社区QQ群(171678760)，在线寻求帮助。