文本渲染

在许多3D网页应用中,您需要通过显示文本来为3D模型补充信息。在本节中,您将了解如何在应用中创建文本。

1.HTML/CSS,注释

HTML/CSS是在网页应用设计中展示信息的最自然的方式。

使用HTML渲染文本有以下几种可行的方法:

请查看 基于HTML的用户界面 章节了解使用HTML的更多信息,以及 add annotation(添加注释)HTML 拼图的参考。

优点

缺点

2.动态文本几何

您可以使用建模套件中的文本对象来创建类似于规则网格的文本几何图形。“动态”意味着Verge3D不在导出的glTF资产中存储文本几何图形数据,而是在场景加载时(使用字体数据)重新创建文本。这还意味着,您可以在运行时中使用 update text object(更新文本对象) 拼图或使用JavaScript实时编辑文字。

若要使文本对象动态化,请确保在导出设置中 不要勾选bake text选项:

创建应用时,您还需勾选Font Converter字体转换选项(默认情况下启用),以开启使用动态文本几何图形功能。此选项将激活opentype.js模块,用于加载和处理字体数据。

如果您创建时忘记启用Font Converter选项,或是应用使用早于Verge3D 3.6的版本创建,可以手动将opentype.js文件从Verge3D安装目录的build文件夹复制到应用目录。

优点

缺点

3.静态文本几何

静态文本几何图形与动态文本几何图形非常相似,不同的是它在导出为glTF资产过程中会被烘焙为文本网格数据。因此您无法在运行时中编辑它们,例如更改内容或字体。但仍然可以分配材质或移动文本,类似于其他几何图形对象。

若要使用静态文本几何图形,请在导出设置中勾选Bake text选项:

优点

缺点

4.带文本的纹理

您可以将文本渲染为位图纹理,然后将该纹理应用到对象。这种技术的流行用例包括定制的billboars,个性化的杯子/T恤,以及珠宝雕刻:

查看texture from text文本纹理拼图章节,了解如何使用纹理与自定义文本的更多信息的拼图。

优点

缺点

5.画布纹理

此方法是对前面技术的扩展,它允许您通过使用JavaScript和画布元素。查看create canvas elem(创建画布元素)拼图获取更多信息。

优点

缺点

遇到问题?

欢迎您随时在 论坛上提问!您还可以加入中文用户社区QQ群(171678760),在线寻求帮助。