javascript案例

by Apurav Chauhan

通过Apurav Chauhan

如何在JavaScript中使用增强现实-一个案例研究 (How to use Augmented Reality with JavaScript — a case study)

In this experiment, I talk about how Augmented Reality with JS can be used to make learning more fun and interactive. The case study will discuss the design process, implementation and feedback from children in the age group 2 to 10 years.

在这个实验中，我谈论了如何使用JS增强现实技术来使学习变得更加有趣和互动。 该案例研究将讨论2至10岁年龄段儿童的设计过程，实施和反馈。

Augmented Reality (AR) has always attracted me, and in this experiment, I try to create a practical AR application. The use-case we will cover is primary education and we will see how we can make the learning fun and interactive. We will make an app to learn alphabets in three languages primarily: Punjabi, Hindi, and English.

增强现实(AR)一直吸引着我，在这个实验中，我尝试创建一个实用的AR应用程序。 我们将介绍的用例是小学教育，我们将看到如何使学习变得有趣和互动。 我们将制作一个应用程序来学习三种主要语言的字母：旁遮普语，北印度语和英语。

The Javascript Augmented Reality app currently doesn’t have plane detection. For simplicity’s sake we are only superimposing our objects over the viewport with 3d motion tracking.

Javascript增强现实应用程序当前没有平面检测。 为简单起见，我们仅使用3d运动跟踪将对象叠加在视口上。

结束目标 (END GOAL)

Below is a demo of our Javascript AR experiment. You can download and play with the app here.

以下是我们的Javascript AR实验的演示。 您可以在此处下载并使用该应用程序。

The full code has been open-sourced for learning purposes and is available here.

完整的代码已开源，用于学习目的，可在此处获得 。

设计过程 (The Design Process)

To make the learning fun and effortless, I am relying on the following points:

为了使学习变得有趣而轻松，我依靠以下几点：

1. Active participation of the child
   儿童的积极参与
2. Child’s physical activity instead of sitting in one place
   孩子的体育活动，而不是坐在一个地方
3. A bit of effort in finding the alphabets.
   查找字母需要一些努力。
4. Intuitive UX/UI.
   直观的UX / UI。

The core theme of the app will be quite similar to the famous Pokemon Go Augmented reality app. Only two main components will be involved: the Camera Viewport and Alphabets.

该应用程序的核心主题将与著名的Pokemon Go Augmented现实应用程序非常相似。 仅涉及两个主要组成部分：“ 摄影机视口”和“ 字母” 。

AR游戏的Alphabet UX (Alphabet UX for AR Game)

Iteration 1

迭代1

In our first iteration we have 2d alphabets which we will try to merge in our camera viewport. The idea of the Augmented Reality(AR) app is to have children find these alphabet letters in a room or space around them. The prototype after merging the space with 2d alphabets will look something like this:

在我们的第一个迭代中，我们有2d字母，我们将尝试将其合并到相机视口中。 增强现实(AR)应用程序的想法是让孩子们在他们周围的房间或空间中找到这些字母。 将空间与2d字母合并后，原型将如下所示：

As you can see above, the immersive experience is missing with a 2d model because the human eye sees things in 3d.

正如您在上面看到的那样，由于人眼只能看到3D物体，因此2D模型缺少沉浸式体验。

Iteration 2

迭代2

Lets try to create a 3d model and see if we can improve the experience of our Javascript-based Augmented Reality game:

让我们尝试创建3D模型，看看是否可以改善基于Javascript的增强现实游戏的体验：

And below is the comparison of the experience of a motion sensor with 2d vs 3d alphabet models. As you can see, 3D naturally gives you a much more immersive experience when it comes to Augmented reality.

下面是2d与3d字母模型的运动传感器体验的比较。 如您所见，在增强现实方面，3D自然为您提供了更加身临其境的体验。

AR实施流程 (The AR Implementation process)

To implement the above AR concept, I’ll be using the following tools and technologies:

为了实现上述AR概念，我将使用以下工具和技术：

1. Ionic Framework: For building the hybrid app

   Ionic框架 ：用于构建混合应用程序

2. Aframe: For bringing the Virtual reality (VR) and Augmented Reality (AR) experience to our app

   Aframe ：将虚拟现实(VR)和增强现实(AR)体验引入我们的应用程序

3. MagicaVoxel: For creating our 3D models

   MagicaVoxel ：用于创建我们的3D模型

The basic app building process is very simple. You can follow my earlier post to learn how to go about building and deploying an app using the Ionic framework here.

基本的应用程序构建过程非常简单。 您可以按照我之前的文章在此处学习如何使用Ionic框架构建和部署应用程序。

Once you have followed the above tutorial to create a simple app, it’s time to integrate Aframe to bring our 3D alphabets with motion sensors into our app.

一旦您按照上述教程创建了一个简单的应用程序，就可以将Aframe集成到我们的应用程序中，将带运动传感器的3D字母集成到应用程序中。

Just load the below Aframe core and Aframe loader libraries in ionic’s project index.html file:

只需在ionic的项目index.html文件中加载以下Aframe核心和Aframe加载器库：

<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>

<script src="https://rawgit.com/donmccurdy/aframe-extras/v2.1.1/dist/aframe-extras.loaders.min.js"></script>

With this we are ready to do some AR/VR magic in our Javascript code base.

这样，我们就可以在我们的Javascript代码库中做一些AR / VR魔术了。

Now in your home component’s home.html, let’s include our 3D models exported from magicavoxel:

现在，在您的home组件的home.html中，包括从magicavoxel导出的3D模型：

And this should make a 3D scene ready for interaction with all motion sensors ready:

这应该使3D场景准备好与所有运动传感器进行交互：

添加增强现实效果 (Adding Augmented Reality Effect)

The final part of this experiment is to add the Augmented Reality (AR) feeling in our Javascript-based hybrid app. As already explained, Augmented Reality is when you superimpose 3D models or other objects on top of your camera viewport. So the only thing missing is the camera viewport behind our scene.

该实验的最后一部分是在基于Javascript的混合应用程序中添加增强现实(AR)感觉。 如前所述，增强现实是指将3D模型或其他对象叠加在摄影机视口上方时。 因此，唯一缺少的是我们背后的摄影机视口。

To do this, we use the camera preview plugin as explained here. And here is the full gist after integration with the camera preview plugin:

要做到这一点，我们使用相机的预览插件作为解释在这里 。 这是与相机预览插件集成后的完整要点：

We also need to ensure that our backgrounds are transparent so that the camera preview is visible in mobile. This is very IMPORTANT otherwise you might feel that the plugin is not working. Here is the home.scss file with transparency css enabled:

我们还需要确保背景是透明的，以便在移动设备中可以看到相机预览。 这非常重要，否则您可能会觉得插件无法正常工作。 这是启用了透明css的home.scss文件：

And this is what it would finally look like:

这就是最终的样子：

用户对我们的增强现实JS游戏的React (User reaction to our Augmented reality JS game)

The final step to measure the success of your concept is real user validation — in our case, kids :) And below is their live feedback recorded.

衡量您的概念是否成功的最后一步是真实的用户验证-在我们的情况下，孩子们:)下面是他们的实时反馈记录。

It was pretty clear that each one of them enjoyed the game and we got full points on fun part. However, initially I had to tell them to move the phone in space to find the letters. Points lost in terms of intuitiveness :(

很明显，他们每个人都很喜欢这款游戏，而我们在有趣的部分上获得了满分。 但是，起初我必须告诉他们将手机移到太空中才能找到字母。 凭直觉而失去的点数：(

用户对增强现实JS游戏的反馈 (User feedback for Augmented Reality JS game)

最后的想法 (Final Thoughts)

Well it was an exciting project and I could see a lot of potential for Augmented Reality in learning and education. Children really like it and it surely adds the missing fun factor to education, especially in our monotonous Education system.

好吧，这是一个令人兴奋的项目，我可以在学习和教育中看到增强现实的巨大潜力。 孩子们真的很喜欢它，它肯定会增加教育中缺少的乐趣因素，尤其是在我们单调的教育系统中。

Feel free to comment and share your feedback.

随时发表评论并分享您的反馈。

资料下载 (Downloads)

The code for this app is available in github. Feel free to play and push new features in it. I’ll be happy to push updates over production.

该应用程序的代码可在github中找到 。 随意播放并推送其中的新功能。 我很乐意将更新推送到生产之上。

You can download the app for android here.

您可以在此处下载适用于Android的应用程序。

翻译自: https://www.freecodecamp.org/news/augmented-reality-with-javascript-a-case-study-c9cffaadcf07/

javascript案例