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.
166 lines
9.7 KiB
166 lines
9.7 KiB
2 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>Загрузка 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>
|