# Создание текста ([name])

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

## 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. Использование [page:CSS2DRenderer] или [page:CSS3DRenderer]

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

## 3. Нарисуйте текст на холсте используя [page:Texture]

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

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

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

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

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

`new THREE.TextGeometry( text, parameters );`

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

### Примеры

[example:webgl_geometry_text WebGL / geometry / text]
[example:webgl_shadowmap WebGL / shadowmap]

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

## 6. Растровые шрифты

Растровые шрифты (bitmap fonts) позволяют группировать глифы в единую BufferGeometry. Рендеринг BMFont поддерживает перенос слов, межбуквенный интервал, кернинг, поля расстояния со знаком со стандартными производными, многоканальные поля расстояния со знаком, шрифты с несколькими текстурами и многое другое. Смотрите [link:https://github.com/felixmariotto/three-mesh-ui three-mesh-ui] или [link:https://github.com/Jam3/three-bmfont-text three-bmfont-text].

Стандартные шрифты доступны в таких проектах, как [link:https://github.com/etiennepinchon/aframe-fonts A-Frame Fonts], или вы можете создать свой собственный из любого .TTF шрифта, оптимизированный для включения только символов, необходимых для проекта.

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

- [link:http://msdf-bmfont.donmccurdy.com/ msdf-bmfont-web] (web-based)
- [link:https://github.com/soimy/msdf-bmfont-xml msdf-bmfont-xml] (commandline)
- [link:https://github.com/libgdx/libgdx/wiki/Hiero hiero] (desktop app)

## 7. Текст Тройка (Troika Text)

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

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