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.
 
 
 
 
 

165 lines
9.7 KiB

<!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/How-to-run-things-locally how to run things locally] (Локальная разработка).
Многих распространенных ошибок при просмотре 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>