Добавление 3D-моделей на ваш сайт

Изображение для сообщения

Когда мы начинаем думать об активах для включения в наши веб-сайты, мы сталкиваемся с обычными подозреваемыми. Изображения, шрифты, видео и аудио — если вы настроены более агрессивно. Но мы находимся на заре нового типа иммерсивных вычислений, когда 3D-модели станут типичным активом, который мы сможем найти на веб-сайтах. Мы уже можем найти отличные репозитории объектов на таких сайтах, как Remix3D (мой любимый) или Poly, и прямо сейчас мы рассмотрим, как легко создавать — и включать — их в наши веб-сайты.

  • Режим «Сделай сам»: инструкции по созданию веб-компонента, который позволяет включать 3D-модель на веб-сайт с помощью BabylonJS.
  • Быстро и легко: перейдите сюда, чтобы получить текущую компонент, готовый для вставки 3D-модели на ваш сайт с помощью HTML!

Мы собираемся создать веб-компонент. Идея состоит в том, что у нас будет тег HTML, который позволит нам вставлять и настраивать некоторые базовые параметры для включения 3D-модели на веб-страницу. Для этого нам нужны веб-компоненты, 3D-движок и некоторые обещания.

Веб-компоненты

Изображение для сообщения

В качестве краткого обзора веб-компонентов, мы можем создавать их с помощью Пользовательских элементов , Shadow DOM и HTML-шаблоны . В нашем примере мы определим настраиваемый элемент «модель-3d» и будем использовать Shadow DOM для создания базовой структуры для средства просмотра 3D-моделей. В следующем посте я расскажу о расширении текущей оболочки и возможностей средства просмотра моделей.

3D Engine

Изображение для сообщения

Я выбрал BabylonJS в качестве 3D-движка, и хотя для такого простого компонента это может быть немного излишним, я хочу постепенно добавлять в него новые функции. Кроме того, простота создания сцены по умолчанию оказалась кстати и была интересным способом погрузиться в этот движок (в прошлом я играл с ThreeJS и A-Frame, и какое-то время мне было любопытно, BabylonJS).

3D-модель

 Изображение для сообщения

Мне пришлось немного поиграть с обещаниями, которые представляют собой объекты, представляющие завершение асинхронной операции, полное событий, чтобы справиться с загрузкой скриптов BabylonJS и жизненным циклом самого компонента. . Если вы увлечены чтением обещаний, я рекомендую этот пост Джо Франкетти, который включает хорошее объяснение и отличную идею для вкуса пончиков #NutellaFilledRainbowSprinklesUnicornSupreme (хотя я больше человек #DulceDeLeche).

Когда мы объединяем эти 4 технологии, мы можем создать новый тег HTML для отображения 3D-модели, который можно использовать следующим образом:

   

Тем не менее, за кадром должен быть холст с контекстом webgl. Встраиваемая трехмерная сцена также потребует освещения, камеры и других настроек в целом. Вот где приходит на помощь BabylonJS, предоставляющий простой способ настроить это!

Чтобы использовать BabylonJS, нам нужно заранее добавить скрипты на страницу. Чтобы использовать определенные функции (например, возможность плавного взаимодействия с сенсорными экранами), нам необходимо связать до трех файлов сценариев. Мы избавим пользователя от необходимости делать это вручную, добавив файлы самостоятельно и настроив среду таким образом, чтобы она отображала 3D-модель наилучшим образом.

Имея это в виду, давайте Представьте, что наш веб-компонент должен делать следующее:

1. Включите необходимые файлы Babylon JS.

2. Настройте 3D-среду (настройте сцену).

3. Загрузите 3D-модель в сцену.

4. Отслеживайте любые изменения атрибутов, которые могут произойти программно или в HTML.

Давайте рассмотрим эти четыре шага один за другим.

Включить BabylonJS

Это простая, но непростая часть. Мы загрузим необходимые скрипты из CDN BabylonJS, но они должны быть загружены до того, как загрузится сам веб-компонент. Это связано с тем, что веб-компонент требует существования объекта BABYLON для создания механизма, который он будет использовать для рендеринга. Веб-компонент создаст скрипт (-ы), загрузит их и добавит в заголовок документа. Таким образом, BabylonJS будет существовать в глобальной области страницы и его можно будет использовать из компонента. Если вы используете более одного файла для BabylonJS, например, используя pep.js для событий указателя, убедитесь, что вы указали, что они должны загружаться синхронно, чтобы избежать их загрузки до того, как babylon.js будет готов.

  const bjs = document.createElement ('script'); 
bjs.src = 'https://cdn.babylonjs.com/babylon.js';

document.head.appendChild (bjs);

Еще нужно иметь в виду, что если мы предоставим параметры для цвета фона и источника, модель в теге HTML, они вызовут attributeChangedCallback до того, как файлы BabylonJS завершат загрузку. Простой и обучающий способ решить эту проблему — использовать промисы. Мы можем подождать, пока BabylonJS не будет готов, чтобы затем продолжить загрузку 3D-модели и установить цвет фона сцены, как указано в этих аргументах. Далее мы обсудим эти наблюдаемые атрибуты немного подробнее.

Настройка 3D-среды

Как только BabylonJS загружен и готов, мы можем создать внутреннюю структуру внутри Shadow DOM компонента. Это не очень сложно, поскольку пока нам нужен только холст, на котором будет работать движок BabylonJS. После этого нам нужно настроить камеру, освещение и сцену. Хотя существует множество вариантов, которые могут удовлетворить то, что вы хотите, вероятно, можно с уверенностью сказать, что мы хотим отображать 3D-модель в исходной точке и вращать камеру вокруг нее в зависимости от взаимодействия с пользователем, как на изображении ниже.

Изображение для сообщения

К счастью, BabylonJS позволяет создать камеру по умолчанию и источник света по умолчанию. Камера имеет тип поворота по дуге (та, которая вращается вокруг точки), и тот же метод позволяет прикрепить к ней элементы управления. Для этого мы используем метод createDefaultCameraOrLight, который снимает всю суету, связанную с настройкой.

Загрузить 3D-модель

Когда сцена готова, следующий шаг это загрузить модель. В зависимости от типа файла вы будете использовать один из нескольких различных загрузчиков. Но в нашем случае я загружаю модель с помощью MeshTask.. Причина этого в том, что этот тип задач входит в состав Assets Manager и может легко импортировать не только файлы .gltf и .glb, но также файлы .obj и .babylon. Кроме того, если мы хотим расширить и загрузить в будущем изображения или другие двоичные данные, у нас уже есть готовый менеджер активов в сцене. Вы можете найти информацию о MeshAssetTask здесь. Ниже вы можете увидеть состав assetsManager и то, как в него добавляется задача.

 const  assetsManager  = new  BABYLON.AssetsManager  ( scene ); 
const meshTask = assetsManager.addMeshTask ('glb task', '', path [0], path [1]); meshTask.onSuccess = функция (задача) {
task.loadedMeshes [0] .position = BABYLON.Vector3.Zero ();
} ... assetsManager.load ();

Отслеживать изменения атрибутов

И последнее, но не менее важное: нам нужно отслеживать атрибуты из веб-компонента. Если они изменены в сценарии или из DOM, модель/сцена должны это отразить соответствующим образом. Для этого нужно определить observableAttributes,

 static get  ObservableAttributes  () {
return [' src ',' background-color '];
}

Это довольно удобно, и я думаю, что это одна из мощных вещей о веб-компонентах, поскольку он действительно позволяет настраивать их и вести себя так, как и следовало ожидать от элемента DOM. В приведенном ниже примере мы видим, как изменение атрибута в теге HTML перезагружает модель для отражения нового источника.

Изображение для сообщения

Обратите внимание, что эти атрибуты пригодятся при их программном изменении, а также при инициализации сам компонент, где они изменятся с нуля на новое значение (цвет или источник). Это еще одна важная причина, по которой при загрузке BabylonJS используется обещание, поскольку инициализация компонента происходит до того, как сцена будет готова загрузить модель.

Это было начальное исследование некоторых довольно аккуратных новые веб-технологии, с целью увидеть, как их можно использовать вместе для создания привлекательных веб-интерфейсов. Я планирую расширить этот пример, изучив формат файла GLTF, добавив поддержку WebXR для отображения этих моделей на гарнитуре VR и сделав некоторые настройки, такие как обеспечение того, чтобы BabylonJS вставлялся только один раз, даже если на странице используются несколько компонентов. . В любом случае, не стесняйтесь вносить свой вклад и использовать код по своему усмотрению. Вы можете найти код здесь.

Одна вещь, которая привлекла мое внимание, — это то, как некоторые модели будут загружаться и работать в зависимости от используемого источника, проигрывателя и даже экспортера.. Хотя это не основная тема данной статьи, я напишу следующий пост, исследуя GLTF, его текущее состояние и пытаюсь объяснить и понять, что происходит. В этом примере я в основном использую файлы .glb из Remix3D и Paint3D. Мне не так повезло с использованием файлов из Google Poly, даже тех, которые я создал с помощью Blocks ранее. Помните, дети, на данный момент этот веб-компонент и 3D-исследование предназначены только для развлечения и обучения.

В демонстрации используется модель Оригами Лисы и Оригами Кролика, созданная Microsoft и доступная по адресу Remix3D на https://www.remix3d.com/details/G009SXD1608R?section=other-models и https://www.remix3d.com/details/G009SXD16GHF?section=other-models.

Оцените статью
techsly.ru
Добавить комментарий