Дополненная реальность в браузере с Awe.js

 awe.projections.update({
    data: {
      visible: true
    },
    where: {
      id: 'wormhole'
    }
  });

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

 else if (menu_open) {
    awe.projections.update({
      data: {
        visible: false
      },
      where: {
        id: 'wormhole'
      }
    });
  }

Если маркера нет, а наше меню не открыто, то весь POI скрыт, и мы ожидаем его просмотра.

 else {
    awe.pois.update({
      data: {
        visible: false
      },
      where: {
        id: 'marker'
      }
    });
  }

Мы заканчиваем, говоря awe.js, чтобы обновить сцену.

 awe.scene_needs_rendering = 1;

Последняя часть реальной функциональности, которую мы будем настраивать, это наши события нажатия. Все они находятся в событии object_clicked

 window.addEventListener('object_clicked', function(e) {
    // Our click events
  });

Наше событие click содержит идентификатор проекции, которая была нажата в e.detail.projection_id Мы используем оператор switch, чтобы определить, как реагировать на щелчок. Щелчки на червоточине открывают и закрывают виртуальное меню, в то время как щелчки на кнопках виртуального меню активируют наши светлые цвета. Мы используем оператор switch, поскольку каждая из кнопок запускает один и тот же код ответа.

 switch (e.detail.projection_id) {
    case 'wormhole':
      // Clicks to open and close our menu
    break;
    case 'ar_button_one':
    case 'ar_button_two':
    case 'ar_button_three':
    case 'ar_button_four':
    case 'ar_button_five':
    case 'ar_button_six':
    case 'ar_button_seven':
      // Clicks on our virtual menu buttons
    break;
  }

Наши события щелчка червоточины открывают и закрывают меню в зависимости от того, является ли menu_open Если значение равно false, то мы используем функцию awe.js awe.projections.update() Это выводит его из червоточины. Единственная разница между перемещением каждой проекции состоит в том, насколько каждый объект перемещается по оси Y.

 if (!menu_open) {
    awe.projections.update({
      data: {
        animation: {
          duration: 1
        },
        position: {y: 35}
      },
      where: {id: 'ar_button_one'}
    });

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

 else {
    awe.projections.update({
      data: {
        animation: {
          duration: 1
        },
        position: {y: -31}
      },
      where: {id: 'ar_button_one'}
    });

После нашего оператора if else мы переключаем menu_open

 menu_open = !menu_open;

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

 ...
  case 'ar_button_seven':
    var request = new XMLHttpRequest();
    request.open('GET', 'http://maker.ifttt.com/trigger/'+e.detail.projection_id+'/with/key/yourkeyshouldbehere', true);

    request.onload = function() {
      if (request.status >= 200 && request.status < 400) {
        var data = JSON.parse(request.responseText);
        console.log(data);
      }
    };

    request.send();
  break;

После всего этого, если awe.js не загружается из-за несовместимости и т. Д., У нас есть альтернативный скрипт, который загружается, чтобы показать сообщение об ошибке.

 {
    capabilities: [],
    success: function() { 
      document.body.innerHTML = '<p>Try this demo in the latest version of Chrome or Firefox on a PC or Android device</p>';
    }
  }

Время HTTPS

Обновление от конца 2015 года — я возвращаюсь к этой статье, чтобы добавить новую довольно важную информацию — Chrome теперь требует, чтобы веб-страницы, использующие камеру, обслуживались по HTTPS. Поэтому, прежде чем пытаться выполнить это, вам нужно найти способ запустить свой сервис через HTTPS. Один из методов, которые я использовал для тестирования, — это ngrok, который может предоставить HTTPS-туннель вашему локальному хосту. У нас есть руководство по доступу к Localhost From Anywhere здесь, на SitePoint, которое поможет вам начать работу.

Демо в действии

Если мы запустим этот код в Google Chrome для мобильных устройств и наведем его на маркер, должна появиться червоточина.

Если мы нажмем на червоточину, наши кнопки меню должны оживить свои места.

Если мы нажмем один из пунктов меню …

Это должно изменить цвет нашего LIFX света!

Вывод

Это все, что вам нужно знать, чтобы начать работу с дополненной реальностью в браузере с помощью awe.js. Он имеет большой потенциал, как и многие разработки в мире технологий в наши дни! Команда awe.js постоянно работает над плагином, и скоро должна появиться более новая и еще более полнофункциональная версия! Можно также настроить стереоскопический эффект three.js для использования в Google Cardboard и объединить его с некоторыми функциями awe.js для создания опыта работы с гарнитурой AR. Я думал, что это может быть немного для одной статьи, так что следите за будущей статьей на эту!

Если вы экспериментируете с магией AR, используя этот код, или продолжите, оставьте записку в комментариях или свяжитесь со мной в Твиттере ( @thatpatrickguy ), я хотел бы проверить это!