javascript
/
three.js
镜像来自 https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
							<!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>Загрузка 3D-моделей ([name])</h1>

	<p>
		3D-модели доступны в сотнях форматов, каждый из которых имеет различные
		цели, разнообразные функции и различную сложность. Хотя three.js предоставляет множество
		<a href="https://github.com/mrdoob/three.js/tree/dev/examples/jsm/loaders" target="_blank" rel="noopener">
		 загрузчиков</a>, выбор правильного формата и
		рабочего процесса сэкономит время и не разочарует в дальнейшем. С некоторыми форматами
		сложно работать, они неэффективны для работы в реальном времени или просто не
		поддерживаются в полной мере в настоящее время.
	</p>

	<p>
		В этом руководстве представлен рабочий процесс, рекомендуемый для большинства пользователей, и рекомендации
		о том, что предпринять, если что-то пойдет не так, как ожидалось.
	</p>

	<h2></h2>

	<p>
		Если вы новичок в управлении локальным сервером, начните с раздела
		[link:#manual/introduction/Installation installation] (Локальная разработка).
		Многих распространенных ошибок при просмотре 3D-моделей можно избежать, правильно разместив файлы.
	</p>

	<h2>Прежде чем начать</h2>

	<p>
		Там, где это возможно, мы рекомендуем использовать glTF (GL Transmission Format). Оба
		<small>.GLB</small> и <small>.GLTF</small> версии формата
		хорошо поддерживаются. Поскольку glTF ориентирован на доставку ресурсов во время выполнения, он
		компактен для передачи и быстр для загрузки. Объекты включают в себя mesh, материалы,
		текстуры, скины, скелеты, цели морфинга, анимацию, освещение и
		камеры.
	</p>

	<p>
		Файлы glTF, находящиеся в открытом доступе, доступны на таких сайтах, как
		<a href="https://sketchfab.com/models?features=downloadable&sort_by=-likeCount&type=models" target="_blank" rel="noopener">
		Sketchfab</a>, так же есть различные инструменты включающие экспорт glTF:
	</p>

	<ul>
		<li><a href="https://www.blender.org/" target="_blank" rel="noopener">Blender</a> от Blender Foundation</li>
		<li><a href="https://www.allegorithmic.com/products/substance-painter" target="_blank" rel="noopener">Substance Painter</a> от Allegorithmic</li>
		<li><a href="https://www.foundry.com/products/modo" target="_blank" rel="noopener">Modo</a> от Foundry</li>
		<li><a href="https://www.marmoset.co/toolbag/" target="_blank" rel="noopener">Toolbag</a> от Marmoset</li>
		<li><a href="https://www.sidefx.com/products/houdini/" target="_blank" rel="noopener">Houdini</a> от SideFX</li>
		<li><a href="https://labs.maxon.net/?p=3360" target="_blank" rel="noopener">Cinema 4D</a> от MAXON</li>
		<li><a href="https://github.com/KhronosGroup/COLLADA2GLTF" target="_blank" rel="noopener">COLLADA2GLTF</a> от Khronos Group</li>
		<li><a href="https://github.com/facebookincubator/FBX2glTF" target="_blank" rel="noopener">FBX2GLTF</a> от Facebook</li>
		<li><a href="https://github.com/AnalyticalGraphicsInc/obj2gltf" target="_blank" rel="noopener">OBJ2GLTF</a> от Analytical Graphics Inc</li>
		<li><a href="http://github.khronos.org/glTF-Project-Explorer/" target="_blank" rel="noopener">…и многое другое</a></li>
	</ul>

	<p>
		Если предпочитаемые вами инструменты не поддерживают glTF, рассмотрите возможность запроса экспорта glTF у авторов или опубликуйте
		<a href="https://github.com/KhronosGroup/glTF/issues/1051" target="_blank" rel="noopener">в ветке glTF roadmap</a>.
	</p>

	<p>
		Если glTF не подходит, используйте популярные форматы, такие как FBX, OBJ или COLLADA
		также доступны и регулярно обновляются.
	</p>

	<h2>Loading</h2>

	<p>
		Только несколько загрузчиков (например, [page:ObjectLoader]) включены по умолчанию с
		three.js — другие должны быть добавлены в ваше приложение индивидуально.
	</p>

	<code>
		import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
	</code>

	<p>
		После того, как вы импортировали загрузчик, вы готовы добавить модель в свою сцену. Синтаксис отличается у
		разных загрузчиков — при использовании другого формата ознакомьтесь с примерами и документацией для этого
		загрузчика. Для glTF использование с глобальными скриптами было бы:
	</p>

	<code>
		const loader = new GLTFLoader();

		loader.load( 'path/to/model.glb', function ( gltf ) {

			scene.add( gltf.scene );

		}, undefined, function ( error ) {

			console.error( error );

		} );
	</code>

	<p>
		См. [page:GLTFLoader GLTFLoader documentation] для получения более подробной информации.
	</p>

	<h2>Диагностика</h2>

	<p>
		Вы потратили часы на создание шедевра ручной работы, загружаете его на
		веб—страницу и - о нет! 😭 Он искажен, неправильно окрашен или полностью отсутствует.
		Начните с выполнения следующих действий по устранению неполадок:
	</p>

	<ol>
		<li>
			Проверьте консоль JavaScript на наличие ошибок и убедитесь, что вы использовали
			обратный вызов `onError` при вызове `.load()` для регистрации результата.
		</li>
		<li>
			Просмотрите модель в другом приложении. Для glTF, средства просмотра с помощью перетаскивания
			доступны для
			<a href="https://gltf-viewer.donmccurdy.com/" target="_blank" rel="noopener">three.js</a> и
			<a href="https://sandbox.babylonjs.com/" target="_blank" rel="noopener">babylon.js</a>. Если модель
			отображается правильно в одном или нескольких приложениях,
			<a href="https://github.com/mrdoob/three.js/issues/new" target="_blank" rel="noopener">сообщить об ошибке в three.js</a>.
			Если модель не может быть показана ни в одном приложении, мы настоятельно рекомендуем предоставить приложение
			(можно в песочнице) для воспроизведения бага.
		</li>
		<li>
			Попробуйте увеличить или уменьшить масштаб модели в 1000 раз. Многие модели
			масштабируются по-разному, и большие модели могут не отображаться, если камера находится
			внутри модели.
		</li>
		<li>
			Попробуйте добавить и расположить источник света. Модель может быть скрыта в темноте.
		</li>
		<li>
			Ищите неудачные запросы текстур на вкладке сеть, например
			`"C:\\Path\To\Model\texture.jpg "`. Вместо этого используйте пути относительно вашей
			модели, например `images/texture.jpg ` — для этого может потребоваться
			редактирование файла модели в текстовом редакторе.
		</li>
	</ol>

	<h2>Помощь</h2>

	<p>
		Если вы прошли шаги описанные выше для устранения неполадок, а ваша модель
		по-прежнему не работает, правильный подход это обращение за помощью которое поможет вам
		быстрее найти решение. Разместите вопрос на
		<a href="https://discourse.threejs.org/" target="_blank" rel="noopener">форуме three.js</a> и, по возможности,
		приложите свою модель (или более простую модель с той же проблемой) в любых
		доступных вам форматах. Предоставьте достаточно информации, чтобы кто-то другой мог воспроизвести
		проблему быстро — в идеале, живая демонстрация.
	</p>

</body>

</html>