СОЗДАНИЕ ТЕКСТА

Рассмотрим ситуацию, когда вам понадобилось вывести обычный текст в 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.

Примеры

WebGL / geometry / text

canvas / geometry / text

WebGL / shadowmap

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

Яндекс.Метрика