Рендеринг текста

Во многих 3D веб-приложениях необходимо отображать текст, который дополняет 3D-модели информативным содержанием. В этом разделе вы узнаете, как создать текст в ваших приложениях.

1. HTML/CSS, аннотации

HTML/CSS - это наиболее органичный способ отображения информации в веб-приложениях.

Ниже указаны возможные способы визуализации текста с использованием HTML:

Просмотрите раздел интерфейс на основе HTML, чтобы получить больше информации об использовании HTML, а также примеры пазлов add annotation и HTML.

Преимущества

Минусы

2. Динамическая текстовая геометрия

Вы можете использовать текстовые объекты из вашего 3D пакета для создания текстовой геометрии, аналогичной обычным объектам. "Динамический" означает, что Verge3D не хранит текстовую геометрию в экспортируемом ассете glTF, а воссоздает ее при загрузке сцены (используя данные шрифта). Это также означает, что вы можете редактировать текст во время его запуска, используя пазл update text object или с помощью JavaScript.

Чтобы сделать ваши текстовые объекты динамическими, убедитесь что опция Bake Text в настройках экспорта неактивна:

Вам также необходимо задать параметр Font Converter (включенный по умолчанию) при создании приложения, чтобы иметь возможность использовать динамическую геометрию текста. Эта опция активирует модуль opentype.js в вашем приложении, который необходим для загрузки и обработки данных шрифта.

Если вы забыли включить параметр Font Converter или создали свое приложение до версии Verge3D 3.6, просто скопируйте файл opentype.js из каталога build дистрибутива Verge3D в каталог приложения.

Преимущества

Минусы

3. Статическая текстовая геометрия

Статическая текстовая геометрия очень похожа на динамическую, за исключением того, что она использует запеченный текстовый меш, который хранится в экспортированном ассете glTF. Такие меши нельзя редактировать во время запуска, например изменять их содержимое или шрифт. Однако вы можете назначать материалы или перемещать текст, как и другие геометрические объекты.

Чтобы экспортируемый текст использовал статическую геометрию, активируйте в настройках экспорта параметр Bake Text:

Преимущества

Минусы

4. Текстовые текстуры

Вы можете преобразовать текст в растровую текстуру, а затем применить эту текстуру к объекту. Популярными вариантами использования такой техники являются кастомные рекламные билборды, чашки/футболки, а также гравировка ювелирных изделий:

Посмотрите пазл текстура из текста для получения дополнительной информации о том, как использовать текстуры с пользовательским текстом.

Преимущества

Минусы

5. Canvas-текстуры

Этот метод является дополнением предыдущего метода, который позволяет выполнять более сложные задачи с помощью JavaScript и элемента canvas. Для получения дополнительной информации ознакомьтесь с пазлом create canvas elem.

Преимущества

Минусы

Остались вопросы?

Задавайте их на нашем форуме!