西河某人

I have a friend who’s birthday was coming up, so I wanted to do something special for her. As she is a TechGeek just like me, so I couldn’t just get her a simple birthday present like a teddy bear or chocolates. So, I started looking for unique ways to wish her a happy birthday on the Web.

我有一个生日快到的朋友，所以我想为她做点特别的事。 因为她和我一样都是TechGeek，所以我不能只给她一个简单的生日礼物，例如泰迪熊或巧克力。 因此，我开始寻找独特的方式来祝她在网上生日快乐。

I ended up watching a video where a guy was proposing to a girl using VR. So, I decided — that was it! That was how I was gonna do it. Not the proposal part though.

我最终观看了一个视频 ，其中有一个男人正在向使用VR的女孩求婚。 因此，我决定-就是这样！ 那就是我要做的。 虽然不是提案部分。

While I was contributing to Mozilla, I’d created few small VR projects using A-Frame — Mozilla’s web-framework for building virtual reality experiences. And believe me, even if you don’t know much about VR or AR, you can easily create a VR scene using A-Frame. The only prerequisite is HTML, which you can learn easily here. For a better understanding, though, I recommend that you go through A-Frame School, which is a great collection of tutorials intended for beginners.

在为Mozilla做出贡献的同时，我使用A-Frame ( Mozilla的网络框架，用于构建虚拟现实体验)创建了一些小型VR项目。 并且相信我，即使您对VR或AR不太了解，也可以使用A-Frame轻松创建VR场景。 唯一的前提条件是HTML，您可以在此处轻松学习。 但是，为了更好地理解，我建议您学习A-Frame School ，这是一个面向初学者的大量教程。

So I’d decided that I was gonna use A-Frame, but I wanted more than just a simple VR scene displaying “Happy Birthday.” In the end, I chose to create an AR scene. I found a great project called AR.js. If you wanna get started with AR.js, here is a great article for beginners.

因此，我决定要使用A-Frame，但我不仅想要显示“生日快乐”的简单VR场景。 最后，我选择创建一个AR场景。 我发现了一个很棒的项目 AR.js 。 如果您想开始使用AR.js，这里有一个 对初学者来说很棒的文章 。

构建一个基本的AR Web应用 (Building a basic AR web app)

To watch the AR scene, you have to:

要观看AR场景，您必须：

• Open this HIRO marker image in your desktop browser.

  在桌面浏览器中打开此HIRO标记图像 。

• Open this AR web app in your phone browser, and point it to your screen.在手机浏览器中打开该AR Web应用程序，然后将其指向屏幕。

When you scan a marker (here, a HIRO marker), it’ll display an AR scene on your phone, just like the image above. I used a plain HIRO marker, but you can create your own marker as well.

当您扫描标记(此处为HIRO标记)时，它将在手机上显示AR场景，就像上面的图像一样。 我使用了普通的HIRO标记，但是您也可以创建自己的标记 。

So, after adding all these libraries, my code looked like this:

因此，在添加所有这些库之后，我的代码如下所示：

Please note that while accessing any AR web app, if you get any prompt asking permission to access the webcam, please allow it. Otherwise the app won’t work.

请注意，在访问任何AR Web应用程序时，如果出现任何提示询问访问网络摄像头的权限，请允许它。 否则，该应用将无法运行。

添加3D模型和字体 (Add 3D models and fonts)

So, now we have simple AR web app working on our device. But what’s a birthday without cake?! Fortunately, A-Frame supports three types of 3D models: glTF, OBJ, and COLLADA. Learn more about 3D models in A-Frame here.

因此，现在我们在设备上运行了简单的AR Web应用程序。 但是，没有蛋糕的生日是什么？ 幸运的是，A-Frame支持三种类型的3D模型： glTF ， OBJ和COLLADA 。 在此处了解有关A-Frame中3D模型的更多信息。

I downloaded some 3D model files of cake from Google Poly. You can import any asset files in A-Frame using the <a-assets> tag. You can also import separate fonts, in case you want to use a different font.

我从Google Poly下载了Cake的一些3D模型文件。 您可以使用<a-asse ts>标签将所有资产文件导入A框架。 如果要使用其他字体，也可以导入单独的字体。

I was pretty convinced that A-Frame couldn’t be more awesome. But, wait…

我非常相信A-Frame会再出色。 可是等等…

添加音频 (Add audio)

Birthdays are also not complete without the birthday song, right? And A-Frame supports Audio files as well. You can use the <audio> tag to import your files, under the <a-assets> tag.

没有生日歌，生日也不完整，对吧？ 而且A-Frame也支持音频文件。 您可以使用<audi o>标记在<a-assets>标记下导入文件。

添加粒子 (Add particles)

What’s the thing that comes to your mind when you hear about a birthday — after cake, of course? A party, right? So, let’s add confetti to our AR scene, using A-Frame’s Particle System Component.

当您得知生日后-当然是蛋糕后，您会想到什么？ 参加派对吧？ 因此，让我们使用A-Frame的“粒子系统组件”将五彩纸屑添加到我们的AR场景中。

让我们放在一起 (Let’s put it all together)

3D模型 (3D Models)

This code will display the 3D model of the cake. But as you can see, I’ve added a few values in the rotation and scale fields. So, let’s discuss that. According to A-frame’s GitHub page:

此代码将显示蛋糕的3D模型。 但是正如您所看到的，我在“ 旋转”和“ 缩放”字段中添加了一些值。 因此，让我们讨论一下。 根据A-frame的GitHub页面 ：

• Rotation: the rotation component defines the orientation of an entity in degrees. It takes the pitch (x), yaw (y), and roll (z) as three space-delimited numbers indicating degrees of rotation.

  旋转 ：旋转组件以度为单位定义实体的方向。 它以俯仰( x )，偏航( y )和横滚( z )作为三个以空格分隔的数字来指示旋转程度。

• Scale: the scale component defines a shrinking, stretching, or skewing transformation of an entity. It takes three scaling factors for the X, Y, and Z axes.

  比例尺 ：比例尺部件定义实体的收缩，拉伸或倾斜变换。 X，Y和Z轴需要三个缩放因子。

• MTL: stands for Material Library File (.mtl) Material library files contain one or more material definitions, each of which includes the color, texture, and reflection map of individual materials. These are applied to the surfaces and vertices of objects. Material files are stored in ASCII format and have the .mtl extension.

  MTL：代表 材质库文件( 。mtl )材质库文件包含一个或多个材质定义，每个定义均包含各个材质的颜色，纹理和反射贴图。 这些将应用于对象的表面和顶点。 材料文件以ASCII格式存储，并带有。 MTL扩展名。

• OBJ: a file format that was created as a simple way to import and export geometry from different 3D applications. This is a common file type used by many 3D design solutions.

  OBJ ：一种文件格式，被创建为一种从不同3D应用程序导入和导出几何图形的简单方法。 这是许多3D设计解决方案使用的常见文件类型。

• Suggestion: If you don’t see your model, try scaling it down. OBJ models generally have extremely large scales in comparison to A-Frame’s scale.

  建议 ：如果看不到模型，请尝试按比例缩小模型。 与A-Frame的比例相比，OBJ模型通常具有极大的比例。

If you’re wondering how I knew the exact values for rotation, well I didn’t. I used an amazing tool created by the Mozilla team called A-Frame Inspector, built for this purpose only.

如果您想知道我如何知道旋转的确切值，那我就不知道了。 我使用了Mozilla团队创建的名为A-Frame Inspector的惊人工具，该工具仅用于此目的。

To learn more about <a-obj-model>, visit this link.

要了解更多关于<A-OBJ-模式 >，请访问THI s的链路。

粒子 (Particles)

Well, this code may look overwhelming at first sight, but believe me, it’s not. We discussed Rotation earlier, but let’s talk about other fields as well:

好吧，这些代码乍一看可能不胜枚举，但请相信我，事实并非如此。 我们之前讨论了旋转，但同时也讨论了其他领域：

• Position: places entities at certain spots in 3D space. The Position takes a coordinate value as three space-delimited numbers.

  位置 ：将实体放置在3D空间中的某些位置。 位置以三个空格分隔的数字作为坐标值。

• Preset: preset configuration. Possible values are: default, dust, snow, rain. Here we chose default in order to display starts.

  预设 ：预设配置。 可能的值是： default ， dust ， snow ， rain 。 在这里，我们选择默认以显示开始。

• Color: describes a particle’s color. This property is a “value-over-lifetime” property, meaning an array of values can be given to describe specific value changes over a particle’s lifetime.

  颜色 ：描述粒子的颜色。 此属性是“生命周期内的值”属性，表示可以给出一组值来描述粒子在整个生命周期内的特定值变化。

• Acceleration Value: describes this emitter’s base acceleration.

  加速度值 ：描述此发射器的基本加速度。

• Particle Count: the total number of particles this emitter will hold.

  粒子计数 ：此发射器将容纳的粒子总数。

• Direction: the direction of the emitter. If the value is 1, the emitter will start at beginning of particle's lifecycle. If the value is -1, the emitter will start at end of particle's lifecycle and work it's way backward.

  方向 ：发射器的方向。 如果值为1 ，则发射器将从粒子生命周期的开始开始。 如果值为-1 ，则发射器将在粒子生命周期的结尾开始并朝后退。

• Rotation Axis: Describes this emitter’s axis of rotation. Possible values are x, y and z.

  旋转轴 ：描述此发射器的旋转轴。 可能的值为x ， y和z 。

To know more about A-Frame’s Particle Component System, visit this link.

进一步了解 A-Frame的粒子组件系统 ，请访问此链接 。

文字和音频 (Text and Audio)

Well, you use can use <a-text> as well, but I decided to go with Text Geometry Component for more options. It’s used to generate text as a single geometry.

好了，您也可以使用<a-tex t>，但是我决定使用Text Geometry Component以获得更多选项。 它用于将文本生成为单个几何。

• Material : The text geometry component defines just the geometry. We can apply any three.js material to the geometry.

  材质 ：文本几何图形组件仅定义几何图形。 我们可以将任何three.js材料应用于几何图形。

<a-entity text="value: HELLO" material="color: red; src: #texture"></a-entity>

For more details, visit three.js’s documentation.

有关更多详细信息，请访问three.js的文档 。

• Text Geometry: string and font value. (you should edit the text in this part, otherwise you’ll end up wishing happy birthday to my friend ??)

  文字几何 ：字符串和字体值。 (您应该在此部分中编辑文本，否则最终将祝我的朋友生日快乐？)

• Sound: defines the entity as a source of sound or audio.

  声音 ：将实体定义为声音或音频的来源。

• Autoplay: describes whether to automatically play the sound once set.

  自动播放 ：设置后是否自动播放声音。

• Loop: describes whether to loop the sound once the sound finishes playing.

  循环 ：描述声音播放完毕后是否循环播放声音。

• On: an event for the entity to listen to before playing sound.

  开 ：实体在播放声音之前要收听的事件。

资源： (Resources:)

• Source code

  源代码

• Demo

  演示版

Yes, you made it ? ? ?. You’ve created your first AR application. If you did everything correctly, you should now see something like the image below:

是的，你做到了吗？ ？ ？ 您已经创建了第一个AR应用程序。 如果您正确完成了所有操作，则现在应该看到类似下图的内容：

If you like my work, please follow me on Medium @Pratik Parmar or add me on LinkedIn. Feel free to reach out to me on Twitter: Pratik Parmar or comment down below, in case you need any help.

如果您喜欢我的作品，请在Medium @ Pratik Parmar上关注我，或在 领英 如果需要任何帮助，请随时在Twitter上与我联系： Pratik Parmar或在下方评论。

Apart from Open-source contributions at Mozilla, I’m a Microsoft Student Partner and community member at GDG Baroda. I would like to thank Mozilla and the MozillaIN community for providing me a chance and the resources to learn about VR/AR and Open Source.

除了Mozilla的开源贡献之外，我还是GDG Baroda的Microsoft学生合作伙伴和社区成员。 我要感谢Mozilla和MozillaIN社区为我提供了一个机会和资源来学习VR / AR和开源。

This is me, Pratik Parmar signing off till the next tech adventure. Over and Out…

这就是我， Pratik Parmar签约直到下一次技术冒险。 完了，走吧…

[ Edit: Thank you Vikranth Kanumuru for drawing my attention that URL of source code was broken. It’s been updated now, please go ahead and try now. Keep coding, keep rocking ]

[编辑：谢谢Vikranth Kanumuru提请我注意源代码的URL已损坏。 现在已经更新，请继续尝试。 继续编码，继续摇摆]

翻译自: https://www.freecodecamp.org/news/how-to-wish-someone-happy-birthday-using-augmented-reality-3809776cb655/

西河某人