three.js может отображать текст непосредственно в трехмерную графику, что отлично сочетается со сценой 3D-модели. В этой статье рассматривается, как визуализировать 3D-текст в three.js — Hello World.
TextGeometry
Geometry in three.js создается с использованием различных классов геометрии, и 3D-текст не является исключением. Чтобы сгенерировать 3D-текст, мы можем использовать TextGeometry directly для генерации.
new TextGeometry('Hello World', {
font: font,
size: size,
height: height,
curveSegments: curveSegments,
bevelThickness: bevelThickness,
bevelSize: bevelSize,
bevelEnabled: true
});
Обратите внимание, однако, что шрифт здесь является обязательным полем. Шрифт здесь не совпадает с семейством шрифтов в css, это должен быть шрифт в three.js.
шрифтLoader
Шрифт в three.js необходимо загрузить с помощью FontLoader, и вместо обычных файлов шрифтов он загружается в виде файла JSON в формате гарнитуры.
const loader = new FontLoader();
loader.load('/fonts/font.typeface.json', function (response) {
font = response;
refreshText();
});
После загрузки текст изменится на загруженный шрифт путем обновления рендеринга текста.
??? Причина аномалии
При использовании TextGeometry часто бывает так, что текст плохо отображается. Это связано с тем, что three.js не может найти текст в шрифте, поэтому мы можем сами сгенерировать файл шрифта.
шрифт Создать
Генерация шрифта начинается с подготовки файла шрифта, следя за тем, чтобы текст, который вы хотите использовать, поддерживался в этом файле шрифта.
Шрифты можно загрузить со следующих веб-сайтов:
После загрузки мы можем найти онлайн-инструмент для преобразования шрифта, такой как тот, который я использую: facetype.js. После преобразования файл шрифта можно использовать в three.js.
Полный код
Повышение уровня кодирования
Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь:
- 👏 Хлопайте за историю и подписывайтесь на автора 👉
- 📰 Смотрите больше контента в публикации Level Up Coding
- 🔔 Подписывайтесь на нас: Twitter | ЛинкедИн | "Новостная рассылка"
🚀👉 Присоединяйтесь к коллективу талантов Level Up и найдите прекрасную работу
