Three.js: Создание текста

Часто возникают ситуации, когда вам может понадобиться использовать текст в вашем приложении на основе three.js. Вот несколько способов, как это можно сделать.

Оглавление

1 1. DOM + CSS
2 2. Использование CSS2DRenderer или CSS3DRenderer
3 3. Отрисовка текста на canvas и использование в качестве текстуры
4 4. Создание модели в вашем любимом 3D-приложении и экспорт в three.js
5 5. Процедурная геометрия текста
- 5.1 Примеры
6 6. Bitmap Fonts
7 7. Troika Text

1. DOM + CSS

Использование HTML, как правило, является самым простым и быстрым способом добавления текста. Этот метод используется для описательных наложений в большинстве примеров three.js.

Вы можете добавить содержимое в элемент

<div id="info">Описание</div>

и использовать CSS для абсолютного позиционирования элемента поверх всех остальных с помощью z-index, особенно если вы используете three.js в полноэкранном режиме.

#info {
	position: absolute;
	top: 10px;
	width: 100%;
	text-align: center;
	z-index: 100;
	display:block;
}

2. Использование CSS2DRenderer или CSS3DRenderer

Используйте эти рендереры для отрисовки высококачественного текста, содержащегося в DOM-элементах, в вашей сцене three.js. Это похоже на первый способ, за исключением того, что с этими рендерерами элементы могут быть более тесно и динамично интегрированы в сцену.

3. Отрисовка текста на canvas и использование в качестве текстуры

Используйте этот метод, если вы хотите легко отрисовать текст на плоскости в вашей сцене three.js.

4. Создание модели в вашем любимом 3D-приложении и экспорт в three.js

Используйте этот метод, если вы предпочитаете работать с вашими 3D-приложениями и импортировать модели в three.js.

5. Процедурная геометрия текста

Если вы предпочитаете работать исключительно в THREE.js или создавать процедурные и динамические 3D-геометрии текста, вы можете создать меш, геометрия которого является экземпляром THREE.TextGeometry:

new THREE.TextGeometry( text, parameters );

Однако, чтобы это работало, ваш TextGeometry должен иметь экземпляр THREE.Font, установленный на его параметр font. Смотрите страницу TextGeometry для получения дополнительной информации о том, как это можно сделать, описания каждого принимаемого параметра и список JSON-шрифтов, которые поставляются с самой библиотекой THREE.js.

Примеры

WebGL / geometry / text
WebGL / shadowmap

Если Typeface недоступен или вы хотите использовать шрифт, которого там нет, есть учебник с Python-скриптом для Blender, который позволяет экспортировать текст в JSON-формат Three.js: http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html

6. Bitmap Fonts

BMFonts (битовые шрифты) позволяют объединять глифы в один BufferGeometry. Рендеринг BMFont поддерживает перенос слов, межбуквенные интервалы, кернинг, поля со знаковыми расстояниями со стандартными производными, многоканальные поля со знаковыми расстояниями, шрифты с несколькими текстурами и многое другое. Смотрите three-mesh-ui или three-bmfont-text.

Стандартные шрифты доступны в проектах, таких как A-Frame Fonts, или вы можете создать свои собственные из любого .TTF шрифта, оптимизировав их для включения только необходимых символов для проекта.

Некоторые полезные инструменты:

msdf-bmfont-web (web-based)
msdf-bmfont-xml (commandline)
hiero (desktop app)

7. Troika Text

Пакет troika-three-text отрисовывает качественный сглаженный текст, используя технику, похожую на BMFonts, но работает напрямую с любыми файлами шрифтов .TTF или .WOFF, так что вам не нужно предварительно генерировать текстуру глифов оффлайн. Он также добавляет возможности, такие как:

Эффекты, такие как обводка, тени и искривление
Возможность применения любого материала three.js, даже пользовательского ShaderMaterial
Поддержка лигатур шрифтов, скриптов с соединенными буквами и право-левого/двунаправленного макета
Оптимизация для большого количества динамического текста, выполняя большую часть работы вне основного потока в веб-воркере