Часто бывают случаи, когда вам может понадобиться использовать текст в вашем three.js приложение - вот несколько способов, как это сделать.
Использование 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;
}
Используйте эти рендереры для отрисовки высококачественного текста, содержащегося в элементах DOM, в вашу сцену three.js. Это похоже на 1. за исключением того, что с помощью этих средств визуализации элементы могут быть более тесно и динамично интегрированы в сцену.
Используйте этот способ, если вы хотите легко нарисовать текст на плоскости в вашем three.js сцене.
Используйте этот способ, если вы предпочитаете работать со своими 3d-приложениями и импортировать модели в three.js .
Если вы предпочитаете работать исключительно в 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]
Растровые шрифты (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:https://www.npmjs.com/package/troika-three-text troika-three-text] отображает качественный сглаженный текст, использующий ту же технику, что и BMFonts, но работающий напрямую с любым .TTF или .WOFF файлом шрифта, чтобы вам не приходилось восстанавливать текстуру глифа в автономном режиме. Он также добавляет возможности, в том числе: