3D-модели доступны в сотнях форматов файлов, каждый из которых имеет разные цели, различные функции и разную степень сложности. Хотя three.js предоставляет множество загрузчиков, выбор правильного формата и рабочего процесса сэкономит время и избавит от разочарований в будущем. Некоторые форматы сложны в работе, неэффективны для реального времени или просто не полностью поддерживаются на данный момент.
Это руководство предоставляет рекомендуемый рабочий процесс для большинства пользователей, а также предложения на случай, если что-то пойдет не так, как ожидалось.
Перед началом
Если вы новичок в запуске локального сервера, начните с установки. Многие распространенные ошибки при просмотре 3D-моделей можно избежать, правильно размещая файлы.
Рекомендуемый рабочий процесс
По возможности мы рекомендуем использовать glTF (GL Transmission Format). Обе версии формата, .GLB и .GLTF, хорошо поддерживаются. Поскольку glTF ориентирован на доставку ресурсов во время выполнения, он компактен для передачи и быстро загружается. Формат поддерживает такие функции, как сетки, материалы, текстуры, скины, скелеты, морфинг, анимации, источники света и камеры.
Общедоступные файлы glTF можно найти на таких сайтах, как Sketchfab, или различные инструменты поддерживают экспорт в glTF:
- Blender by the Blender Foundation
- Substance Painter by Allegorithmic
- Modo by Foundry
- Toolbag by Marmoset
- Houdini by SideFX
- Cinema 4D by MAXON
- COLLADA2GLTF by the Khronos Group
- FBX2GLTF by Facebook
- OBJ2GLTF by Analytical Graphics Inc
- …and many more
Если ваши предпочитаемые инструменты не поддерживают glTF, рассмотрите возможность запроса экспорта в glTF у авторов или оставьте сообщение в теме обсуждения дорожной карты glTF.
Если glTF не подходит, популярные форматы, такие как FBX, OBJ или COLLADA, также доступны и регулярно поддерживаются.
Загрузка
Только несколько загрузчиков (например, 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 );
} );Устранение неполадок
Вы потратили часы на создание шедевра, загрузили его на веб-страницу, и — о нет! Модель искажена, неправильно окрашена или вообще отсутствует. Начните с этих шагов по устранению неполадок:
- Проверьте консоль JavaScript на наличие ошибок и убедитесь, что вы использовали callback onError при вызове .load(), чтобы зафиксировать результат.
- Просмотрите модель в другом приложении. Для glTF доступны drag-and-drop просмотрщики для three.js и babylon.js. Если модель отображается правильно в одном или нескольких приложениях, сообщите об ошибке в three.js. Если модель не может быть отображена ни в одном приложении, настоятельно рекомендуем сообщить об ошибке в приложении, используемом для создания модели.
- Попробуйте масштабировать модель вверх или вниз в 1000 раз. Многие модели масштабируются по-разному, и большие модели могут не отображаться, если камера находится внутри модели.
- Попробуйте добавить и расположить источник света. Модель может быть скрыта в темноте.
- Проверьте вкладку сети на наличие неудачных запросов текстур, например, «C:\Path\To\Model\texture.jpg». Используйте относительные пути к вашей модели, например, images/texture.jpg — это может потребовать редактирования файла модели в текстовом редакторе.
Помощь
Если вы прошли процесс устранения неполадок, описанный выше, и ваша модель все еще не работает, правильный подход к запросу помощи поможет быстрее найти решение. Опубликуйте вопрос на форуме three.js и, по возможности, включите вашу модель (или более простую модель с той же проблемой) в любых доступных форматах. Включите достаточно информации, чтобы кто-то другой мог быстро воспроизвести проблему — в идеале, живое демо.
