Загрузка 3D-моделей ([name])

3D-модели доступны в сотнях форматов, каждый из которых имеет различные цели, разнообразные функции и различную сложность. Хотя three.js предоставляет множество загрузчиков, выбор правильного формата и рабочего процесса сэкономит время и не разочарует в дальнейшем. С некоторыми форматами сложно работать, они неэффективны для работы в реальном времени или просто не поддерживаются в полной мере в настоящее время.

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

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

Прежде чем начать

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

Файлы glTF, находящиеся в открытом доступе, доступны на таких сайтах, как Sketchfab, так же есть различные инструменты включающие экспорт glTF:

Если предпочитаемые вами инструменты не поддерживают glTF, рассмотрите возможность запроса экспорта glTF у авторов или опубликуйте в ветке glTF roadmap.

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

Loading

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

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

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

const loader = new GLTFLoader(); loader.load( 'path/to/model.glb', function ( gltf ) { scene.add( gltf.scene ); }, undefined, function ( error ) { console.error( error ); } );

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

Диагностика

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

  1. Проверьте консоль JavaScript на наличие ошибок и убедитесь, что вы использовали обратный вызов `onError` при вызове `.load()` для регистрации результата.
  2. Просмотрите модель в другом приложении. Для glTF, средства просмотра с помощью перетаскивания доступны для three.js и babylon.js. Если модель отображается правильно в одном или нескольких приложениях, сообщить об ошибке в three.js. Если модель не может быть показана ни в одном приложении, мы настоятельно рекомендуем предоставить приложение (можно в песочнице) для воспроизведения бага.
  3. Попробуйте увеличить или уменьшить масштаб модели в 1000 раз. Многие модели масштабируются по-разному, и большие модели могут не отображаться, если камера находится внутри модели.
  4. Попробуйте добавить и расположить источник света. Модель может быть скрыта в темноте.
  5. Ищите неудачные запросы текстур на вкладке сеть, например `"C:\\Path\To\Model\texture.jpg "`. Вместо этого используйте пути относительно вашей модели, например `images/texture.jpg ` — для этого может потребоваться редактирование файла модели в текстовом редакторе.

Помощь

Если вы прошли шаги описанные выше для устранения неполадок, а ваша модель по-прежнему не работает, правильный подход это обращение за помощью которое поможет вам быстрее найти решение. Разместите вопрос на форуме three.js и, по возможности, приложите свою модель (или более простую модель с той же проблемой) в любых доступных вам форматах. Предоставьте достаточно информации, чтобы кто-то другой мог воспроизвести проблему быстро — в идеале, живая демонстрация.