43 подписчика

Загрузка 3D-моделей в формате glTF (Часть2)

1 декабря 20201 дек 2020

3 мин

Оглавление

Отметьте основную функцию как Async
Выявить ошибки
Создайте модуль birds.js

Отметьте основную функцию как Async

Во-первых, в main.js мы также должны пометить основную функцию как async. Это необходимо для того, чтобы мы могли вызвать метод async World.init.

async function main() {

Теперь мы можем назвать оба этапа настройки приложения World. Сначала синхронный конструктор, как обычно, затем новый метод .init для обработки асинхронных задач.

async function main() {

// Get a reference to the container element

const container = document.querySelector('#scene-container');

// create a new world

const world = new World(container);

// complete async tasks

await world.init();

// start the animation loop

world.start();

}

Выявить ошибки

Ни один метод загрузки файлов не является полным, если мы также не сможем обработать любые возникающие ошибки. Ошибки могут быть как простыми, как опечатка в имени файла, так и чем-то более сложным, например сетевой ошибкой. К счастью, с асинхронными функциями обработка ошибок также проста. Внизу main.js замените эту строку:

main();

… с участием:

main().catch((err) => {

console.error(err);

});

Теперь любые ошибки будут регистрироваться в консоли. В реальном приложении вам может потребоваться более сложная обработка ошибок, например, отображение сообщения пользователю, чтобы он знал, что что-то пошло не так. Однако, пока мы находимся в режиме разработки, наиболее важным является то, что все ошибки записываются в консоль, где мы можем их видеть.

Создайте модуль birds.js

Теперь все настроено, и мы можем продолжить и загрузить нашу первую модель. Откройте (или создайте) модуль components / birds / birds.js. Начните с импорта GLTFLoader, затем создайте функцию async loadBirds. Внутри функции создайте экземпляр загрузчика и, наконец, экспортируйте функцию в конец файла:

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

async function loadBirds() {

const loader = new GLTFLoader();

}

export { loadBirds };

Структура этого нового модуля должна быть вам знакома, поскольку она такая же, как почти все остальные компоненты, которые мы создали до сих пор. Единственное отличие - ключевое слово async. В World обновите список импорта:

import { loadBirds } from './components/birds/birds.js';

import { createCamera } from './components/camera.js';

import { createLights } from './components/lights.js';

import { createScene } from './components/scene.js';

Загрузите попугая

Теперь мы готовы загрузить файл Parrot.glb с помощью .loadAsync. Как только вы это сделаете, запишите загруженные данные в консоль:

async function loadBirds() {

const loader = new GLTFLoader();

const parrotData = await loader.loadAsync('/assets/models/Parrot.glb');

console.log('Squaaawk!', parrotData);

}

Затем вызовите loadBirds в World.init:

async init() {

await loadBirds();

}

Данные, возвращаемые GLTFLoader

Нам нужно глубже взглянуть на данные, которые мы только что загрузили, прежде чем мы сможем добавить модель в нашу сцену, поэтому сейчас мы просто записали данные в консоль. Откройте консоль браузера (нажмите F12). Вы должны увидеть слово Squaaawk! за которым следует объект, содержащий загруженные данные. Этот объект содержит сетки, анимацию, камеры и другие данные из файла:

{

animations: [AnimationClip]

asset: {generator: "Khronos Blender glTF 2.0 I/O", version: "2.0"}

cameras: []

parser: GLTFParser {json: {…}, extensions: {…}, options: {…}, cache: {…}, primitiveCache: {…}, …}

scene: Scene {uuid: "1CF93318-696B-4411-B672-4C12C46DF7E1", name: "Scene", type: "Scene", parent: null, children: Array(0), …}

scenes: [Scene]

userData: {}

__proto__: Object

}

gltfData.animations - это массив анимационных клипов. Вот анимация полета. Мы воспользуемся этим в следующей главе.
gltfData.assets содержит метаданные, показывающие, что этот файл glTF был создан с помощью экспортера Blender.
gltfData.cameras - это массив камер. В этом файле нет камер, поэтому массив пуст.
gltfData.parser содержит технические подробности о GLTFLoader.
gltfData.scene - это группа, содержащая любые сетки из файла. Здесь мы найдем модель попугая.
gltfData.scenes: формат glTF поддерживает хранение нескольких сцен в одном файле. На практике эта функция используется редко.
gltfData.userData может содержать дополнительные нестандартные данные.