Custom elements for the immersive web

JavaScript 30-11-2019, 23:58 202   


Мы рады представить вам первый набор пользовательских элементов для захватывающей сети, над которой мы работали: <img-360> и <video-360> 

  От команды Mixed Reality мы продолжаем работать над улучшением работы создателя контента, созданием новых фреймворков, инструментов, API, настройкой производительности и так далее.
  Большинство из этих проектов основаны на предположении, что пользователи имеют базовые знания в области 3D-графики и хотят углубиться в полную настройку своего опыта WebXR (например: использование A-Frame или three.js ).
  Но все еще есть много случаев использования, когда создатели контента просто хотят очень простых взаимодействий и не имеют знаний или времени для создания и поддержки пользовательского приложения, созданного поверх платформы WebXR. 

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



Пользовательские элементы предоставляют стандартный способ создания HTML-элементов, чтобы обеспечить простую функциональность, которая соответствует ожиданиям создателей контента без знания 3D, WebXR или даже javascript. 

  Как это работает? 

  Просто включите пакет javascript на свою страницу, и вы можете начать использовать оба элемента в своем HTML: <img-360> и <video-360> .  Вам просто нужно предоставить им 360 изображений или видео, а пользовательские элементы сделают все остальное, включая обнаружение поддержки WebVR.  Вот простой пример, который добавляет 360 изображений и видео на страницу.  Все элементы управления взаимодействием генерируются автоматически: 


<html>
  <head>
    <script src="https://rawcdn.githack.com/MozillaReality/immersive-custom-elements/v0.1.0/build/immersive-custom-elements.js"></script>
  </head>
  <body>
    <img-360 src="360-landscape.jpg" width="640" height="360"></img-360>
    <video-360 src="myvideo.mp4" width="640" height="360"></video-360>
  </body>
</html>

Вы можете попробовать демо здесь и найти подробную информацию о том, как использовать их на Github

  Следующие шаги 

  Сегодня мы выпускаем только эти два элемента, но мы думаем о многих других и будем рады вашим отзывам.  Какие новые элементы вы найдете полезными?  Пожалуйста, присоединяйтесь к нам на GitHub, чтобы обсудить их.
  Мы также рады видеть, что другие компании усердно работают над предоставлением качественных пользовательских элементов для 3D и XR-сети в качестве Google со своим компонентом <model-viewer> и мы надеемся, что другие последуют этому примеру. 




У данной публикации еще нет комментариев. Хотите начать обсуждение?

Добавить комментарий