You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
143 lines
7.4 KiB
143 lines
7.4 KiB
3 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="ru">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<base href="../../../" />
|
||
|
|
<script src="page.js"></script>
|
||
|
|
<link type="text/css" rel="stylesheet" href="page.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>Создание текста ([name])</h1>
|
||
|
|
<div>
|
||
|
|
<p>
|
||
|
|
Часто бывают случаи, когда вам может понадобиться использовать текст в вашем three.js приложение - вот
|
||
|
|
несколько способов, как это сделать.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2>1. DOM + CSS</h2>
|
||
|
|
<div>
|
||
|
|
<p>
|
||
|
|
Использование HTML, как правило, является самым простым и быстрым способом добавления текста. Этот метод
|
||
|
|
используется для наложения текста в большинстве three.js приложений.
|
||
|
|
</p>
|
||
|
|
<p>Вы можете добавлять содержимое в</p>
|
||
|
|
<code><div id="info">Описание</div></code>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
и использовать разметку CSS для абсолютного позиционирования над всеми остальным с
|
||
|
|
z-index, особенно если вы используете полноэкранный режим three.js.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<code>
|
||
|
|
#info {
|
||
|
|
position: absolute;
|
||
|
|
top: 10px;
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
z-index: 100;
|
||
|
|
display:block;
|
||
|
|
}
|
||
|
|
</code>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h2>2. Использование [page:CSS2DRenderer] или [page:CSS3DRenderer]</h2>
|
||
|
|
<div>
|
||
|
|
<p>
|
||
|
|
Используйте эти рендереры для отрисовки высококачественного текста, содержащегося в элементах DOM, в вашу сцену three.js.
|
||
|
|
Это похоже на 1. за исключением того, что с помощью этих средств визуализации элементы могут быть более тесно и динамично интегрированы в сцену.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h2>3. Нарисуйте текст на холсте используя [page:Texture]</h2>
|
||
|
|
<div>
|
||
|
|
<p>Используйте этот способ, если вы хотите легко нарисовать текст на плоскости в вашем three.js сцене.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h2>4. Создайте модель в вашем любимом 3D-приложении и экспортируйте в three.js</h2>
|
||
|
|
<div>
|
||
|
|
<p>Используйте этот способ, если вы предпочитаете работать со своими 3d-приложениями и импортировать модели в three.js .</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h2>5. Процедурная геометрия текста</h2>
|
||
|
|
<div>
|
||
|
|
<p>
|
||
|
|
Если вы предпочитаете работать исключительно в three.js или создавать процедурные и динамические 3D
|
||
|
|
текстовые геометрии, вы можете создать mesh, геометрия которой является экземпляром THREE.TextGeometry:
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<code>new THREE.TextGeometry( text, parameters );</code>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Однако для того, чтобы это сработало, вашей текстовой геометрии потребуется экземпляр из THREE.Font
|
||
|
|
должен быть установлен в его параметре "шрифт".
|
||
|
|
|
||
|
|
Смотрите страницу [page:TextGeometry] для получения дополнительной информации о том, как это можно сделать, описания каждого
|
||
|
|
принимаемого параметра и список шрифтов JSON, которые поставляются с THREE.js.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>Примеры</h3>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
[example:webgl_geometry_text WebGL / geometry / text]<br />
|
||
|
|
[example:webgl_shadowmap WebGL / shadowmap]
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Если шрифт не работает или вы хотите использовать шрифт, которого там нет, есть учебное пособие по
|
||
|
|
скрипту python для blender, который позволит экспортировать текст в Three.js в формате JSON:
|
||
|
|
[link:http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html]
|
||
|
|
</p>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h2>6. Растровые шрифты</h2>
|
||
|
|
<div>
|
||
|
|
<p>
|
||
|
|
Растровые шрифты (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].
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Стандартные шрифты доступны в таких проектах, как
|
||
|
|
[link:https://github.com/etiennepinchon/aframe-fonts A-Frame Fonts], или вы можете создать свой собственный
|
||
|
|
из любого .TTF шрифта, оптимизированный для включения только символов, необходимых для проекта.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Некоторые полезные инструменты:
|
||
|
|
</p>
|
||
|
|
<ul>
|
||
|
|
<li>[link:http://msdf-bmfont.donmccurdy.com/ msdf-bmfont-web] <i>(web-based)</i></li>
|
||
|
|
<li>[link:https://github.com/soimy/msdf-bmfont-xml msdf-bmfont-xml] <i>(commandline)</i></li>
|
||
|
|
<li>[link:https://github.com/libgdx/libgdx/wiki/Hiero hiero] <i>(desktop app)</i></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h2>7. Текст Тройка (Troika Text)</h2>
|
||
|
|
<div>
|
||
|
|
<p>
|
||
|
|
Пакет [link:https://www.npmjs.com/package/troika-three-text troika-three-text] отображает
|
||
|
|
качественный сглаженный текст, использующий ту же технику, что и BMFonts, но работающий напрямую с любым .TTF
|
||
|
|
или .WOFF файлом шрифта, чтобы вам не приходилось восстанавливать текстуру глифа в автономном режиме. Он также добавляет
|
||
|
|
возможности, в том числе:
|
||
|
|
</p>
|
||
|
|
<ul>
|
||
|
|
<li>Такие эффекты, как штрихи, отбрасываемые тени и кривизна</li>
|
||
|
|
<li>Возможность применять любые three.js Материал, даже пользовательский шейдерный материал</li>
|
||
|
|
<li>Поддержка лигатур шрифтов, скриптов с соединенными буквами и компоновки справа-налево/двунаправленно</li>
|
||
|
|
<li>Оптимизация для больших объемов динамического текста, выполнение большей части работы вне основного потока в веб-воркере</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|