Автор оригинала: FreeCodeCamp Community Member.
Апурав Чаухан
В этом эксперименте я говорю о том, как увеличенная реальность с JS может быть использована для обучения более интересным и интерактивным. Тематическое исследование обсудит проектный процесс, внедрение и обратную связь от детей в возрастной группе от 2 до 10 лет.
Дополненная реальность (AR) всегда привлекала меня, и в этом эксперименте я пытаюсь создать практическое приложение AR. Корпус использования, который мы будем охватывать, является начальное образование, и мы увидим, как мы можем сделать обучение и интерактивным. Мы сделаем приложение для изучения алфавитов на трех языках в первую очередь: Punjabi, Hindi и английский.
Приложение Actureted Reality JavaScript в настоящее время не имеет выявления самолета. Ради простоты мы наполняем только наши объекты по поводу просмотра просмотра 3D-отслеживания движения.
Конечная цель
Ниже приведена демократизация нашего эксперимента JavaScript AR. Вы можете скачать и играть с приложением здесь Отказ
Полный код был открытым для обучения и доступен здесь Отказ
Процесс дизайна
Сделать обучение веселым и легким, я полагаюсь на следующие моменты:
- Активное участие ребенка
- Физическая активность ребенка вместо того, чтобы сидеть в одном месте
- Немного усилий в нахождении алфавитов.
- Интуитивно понятный UX/UI.
Основная тема приложения будет совсем похоже на известное приложение Pokemon Go дополнено приложением реальности. Только два основных компонента будут вовлечены: Вид камеры и Алфавиты Отказ
Алфавит UX для AR Game
Итерация 1.
В нашей первой итерации у нас есть 2D алфавиты, которые мы постараемся объединиться в нашей камеры Viewport. Идея приложения Aupmented Reality (Ar) должна иметь детей находить эти буквы алфавита в комнате или пространстве вокруг них. Прототип после слияния пространства с 2D алфавитами будет выглядеть что-то подобное:
Как вы можете видеть выше, беспристрастный опыт отсутствует с 2D-моделью, потому что человеческий глаз видит вещи в 3D.
Итерация 2.
Повторите попытку создать 3D-модель и посмотреть, сможем ли мы улучшить опыт нашего JavaScript Aupmented Reality Game:
А ниже сопоставление опыта датчика движения с моделями 2D VS 3D Alphabet. Как видите, 3D естественным образом дает вам гораздо более захватывающий опыт, когда речь идет о дополненной реальности.
Процесс реализации AR
Для реализации приведенной выше концепции AR я буду использовать следующие инструменты и технологии:
- Ионные рамки : Для построения гибридного приложения
- Aframe : Для привлечения виртуальной реальности (VR) и дополненной реальности (AR) опыта в наше приложение
- Magicavoxel : Для создания наших 3D-моделей
Процесс создания основных приложений очень прост. Вы можете следить за моим предыдущим постом, чтобы узнать, как пойти на создание и развертывание приложения, используя ионные рамки здесь Отказ
После того, как вы следовали за вышеупомянутым пособием, чтобы создать простое приложение, пришло время интегрировать Aframe, чтобы принести наши 3D-алфавиты с датчиками движения в наше приложение.
Просто загрузите приведенные ниже ядро и библиотеки Aframe Loader в Ionic’s Project Index.html Файл:
С этим мы готовы сделать магию AR/VR в нашем базе кодовых кодов JavaScript.
Сейчас в домашнем компонентах Home.html, давайте включаем в себя наши 3D-модели, экспортируемые из Magicavoxel:
И это должно сделать 3D-сцену готовую к взаимодействию со всеми датчиками движения готов:
Добавление эффекта дополненной реальности
Заключительная часть этого эксперимента заключается в том, чтобы добавить ощущение дополненной реальности (Ar) в нашем гибридном приложении на основе JavaScript. Как уже объяснено, дополненная реальность заключается в том, когда вы накладываете 3D-модели или другие объекты в верхней части вашего видового вида камеры. Так что единственное, что отсутствует, – это камера просмотра нашей сцены.
Для этого мы используем плагин предварительного просмотра камеры, как объяснено здесь Отказ И вот полная точка после интеграции с плагином предварительного просмотра камеры:
Нам также необходимо убедиться, что наши фоны прозрачны, так что предварительный просмотр камеры виден на мобильном телефоне. Это очень ВАЖНЫЙ В противном случае вы можете чувствовать, что плагин не работает. Вот файл Home.scss с помощью Transparency CSS включен:
И это то, что он наконец-то выглядел так:
Реакция пользователя на нашу игру дополненной реальности JS
Последний шаг для измерения успеха вашей концепции является реальная проверка пользователя – в нашем случае, дети:) и ниже их живой обратной связи.
Было довольно ясно, что каждый из них наслаждался игрой, и мы получили полные очки на забавной части. Однако изначально я должен был сказать им, чтобы переместить телефон в пространство, чтобы найти буквы. Точки, потерянные с точки зрения интуитивности:(
Отзывы пользователя для дополненной реальности JS Game
Последние мысли
Ну, это был захватывающий проект И я мог видеть много потенциалов для дополненной реальности в обучении и образовании. Дети действительно нравятся И это, безусловно, добавляет пропавший забавный фактор для образования, особенно в нашей монотонной системе образования.
Не стесняйтесь комментировать и поделитесь своим отзывом.
Загрузки
Код для этого приложения доступен в гадость . Не стесняйтесь играть и выдвигать новые функции в нем. Я буду рад нажать обновлениями над производством.
Вы можете скачать приложение для Android здесь Отказ
Оригинал: “https://www.freecodecamp.org/news/augmented-reality-with-javascript-a-case-study-c9cffaadcf07/”