javascript
/
three.js
oglindă de https://github.com/tazdij/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
							<!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>&lt;div id="info"&gt;Описание&lt;/div&gt;</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>