СОЗДАНИЕ ТЕКСТА
Рассмотрим ситуацию, когда вам понадобилось вывести обычный текст в Three.js приложении. Вот несколько способов, которыми вы можете воспользоваться для этого.
DOM + CSS
Данный способ добавления текста самый простой и быстрый. Он используеется для наложения описаний в большинстве Three.js примеров.
Просто добавьте текстовый контент в блок:
<div id='info'>Description</div>
А затем используйте CSS для абсолютного позиционирования этого блока поверх остальных:
#info {
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 100;
display:block;
}
Напиштте текст в canvas и используйте его как ТЕКСТУРУ
Используйте этот метод, если хотите легко написать текст на плоскости в вашей сцене.
Создайте модель в 3D-редакторе и экспортируйте в three.js
Используйте этот способ, если вы предпочитаете создавать модели в сторонних редакторах.
Процедурная геомертрия для текста
Если же вы предпочитаете работать только в THREE.js, то вы можете создать Меш и Геометрию, являющиемися экземплярами объекта THREE.TextGeometry:
new THREE.TextGeometry( text, parameters );
Однако для того, чтобы это корректно отобразилось, объекту TextGeometry понадобится экземпляр объекта THREE.Font, который будет установлен в его параметре «font». Подороюнее о том, как это можно сделать, см. на странице «Текстовая геометрия», описания каждого принятого параметра и список шрифтов JSON, которые входят в дистрибутив THREE.js.
Примеры
Если Typeface отсутствует или вы хотите использовать шрифт, которого там нет, есть туториал с python-скриптом для блендера, который позволяет экспортировать текст в формат JSON в Three.js: http://www.jaanga.com/2012 /03/blender-to-threejs-create-3d-text-with.html