Skip to main content
 首页 » 资源教程

如何利用WebAR给TA送上炫酷的生日祝福

2018年07月24日 08:13:07118580网络

祝朋友生日快乐不是一件容易的事情。我有个即将要过生日的朋友,所以我希望给她一件特别的生日礼物。由于她和我一样都是在TeckGeek里工作,所以我送的礼物不能只是泰迪熊或巧克力这么简单。所以,我开始思索通过网页来表达自己的生日祝福。

如何利用WebAR给TA送上炫酷的生日祝福 资源教程 第1张

裁剪


我后面看到了一个男生用VR向女生求婚的视频。这为我提供了灵感。下面是我具体的做法。当然,不包含求婚部分。

一直以来,创建AR场景都十分昂贵,直到现在…当我为Mozilla做贡献时,我利用A-Frame开发了一些小型VR项目。相信我,即便你对VR或AR知之甚少,你都可以使用A-Frame来轻松创建VR场景。唯一的先决条件是HTML,但网络已经提供了大量的学习材料。要更好地理解这方面的知识,我建议你选择专门面向初学者的A-Frame School。

我当时决定要从A-Frame入手,但我设想的不仅只是一个显示“生日快乐”的简单VR场景。在最后,我选择创建一个AR场景。我发现了一个名为AR.js的优秀项目。

1. 构建一个基本的AR网页应用程序

如何利用WebAR给TA送上炫酷的生日祝福 资源教程 第2张

裁剪



利用AR.js创建的AR场景

要浏览AR场景,你需要:

  1. 在桌面浏览器中打开这个HIRO标记图像

  2. 在手机浏览器中打开这个AR网络应用程序,并对准你的屏幕。

如何利用WebAR给TA送上炫酷的生日祝福 资源教程 第3张

裁剪


当扫描到一个标记时,系统将在手机屏幕上显示AR场景,如上图所示。我直接采用了这个HIRO标记,但你也可以自行创建自己的标记。

在添加所有这些库之后,我的代码看起来像这样:

如何利用WebAR给TA送上炫酷的生日祝福 资源教程 第4张

裁剪



请注意,在访问AR网页应用时,如果系统提示需要摄像头的访问权限时,请点击允许。否则应用程序将无法工作。

2. 添加3D模型和字体

现在我们设备上已经有了一个简单的AR网页应用程序。但生日哪能没有生日蛋糕呢?幸运的是,A-Frame支持三种3D模型:glTF,OBJ和COLLADA。

我从Google Poly下载了蛋糕的3D模型文件。你可以使用tag在A-Frame中导入任意asset文件。如果要使用其他字体,你也可以导入单独的字体。

我当时以为A-Frame充其量就是这样了。但是…

3. 添加音频

没有生日歌,这就不是完整的生日,对吧?A-Frame同时支持音频文件,你可以通过 tag来导入相关的文件。

如何利用WebAR给TA送上炫酷的生日祝福 资源教程 第5张

裁剪


4. 添加粒子

当你听到某热生日时,你会想到什么。哦,我是指生日蛋糕之后?这当然是派对,是吧?所以,我们利用A-Frame的Particle System Component来为AR场景添加五彩纸屑。

如何利用WebAR给TA送上炫酷的生日祝福 资源教程 第6张

裁剪



5. 好,下面将所有都整合在一起。

5.1 3D模型

这个代码将显示蛋糕的3D模型。但正如你所见,我在旋转和缩放字段中添加了一些值。那么,我们来讨论一下。根据A-frame的GitHub页面

  1. 旋转:旋转组件以度为单位来定义实体的方向,并以纵摇(x),垂摇(y)和纵摇(z)表示旋转度数的三个空格分隔数字。

  2. 比例:比例组件定义实体的收缩,拉伸或倾斜变换。X,Y和Z轴需要三个缩放系数。

  3. MTL:代表材料库文件(.mtl)材料库。材料库文件包含一个或多个材料定义,每个材料定义包括单个材料的颜色,纹理和反射贴图。这些都应用于对象的曲面和顶点。材料文件以ASCII格式存储,并包含.mtl扩展名。

  4. OBJ:从不同3D应用程序导入和导出几何体的文件格式。这是许多3D设计解决方案使用的常见文件类型。

如果你很好奇我是如何知道旋转的确切值,我可以告诉你,我实际上也不知道。我使用了由Mozilla团队创建神奇工具:A-Frame Inspector。

更多关于的信息,请访问这一链接

如何利用WebAR给TA送上炫酷的生日祝福 资源教程 第7张

裁剪



5.2 粒子

好吧,这段代码在一开始看似很复杂,但相信我,事实并非如此。我们之前讨论过旋转,但下面我们要谈谈其他字段:

  1. 位置:将实体放置在3D空间中的某个位置。Position将坐标值作为三个空格分隔的数字。

  2. 预设:预设配置。可能的值包括:默认值,灰尘,雪,雨。我们在这里选择默认值。

  3. 颜色:描述粒子的颜色。这是一种“超过生命周期的值”的属性,这意味着可以给出一组值来描述粒子生命周期内的特定值更改。

  4. 加速度值:描述发射器的基本加速度。

  5. 粒子数:发射器将保持的粒子总数。

  6. 方向:发射器的方向。如果值为1,则发射器将从粒子生命周期的开始处开始。如果值为-1,则发射器将从粒子生命周期的末尾开始,然后向后运行。

  7. 旋转轴:描述发射器的旋转轴。可能的值为x,y和z。

更多关于A-Frame的Particle Component System,请访问这一链接

如何利用WebAR给TA送上炫酷的生日祝福 资源教程 第8张

裁剪



5.3 文本与音频

你也可以使用,但我决定采用Text Geometry Component。它可以用来生成作为单个几何体的文本。

  1. Material:文本几何组件只定义几何。我们可以将任意三个.js材料应用到几何体。

如何利用WebAR给TA送上炫酷的生日祝福 资源教程 第9张

裁剪


  1. Text Geometry:字符串和字体值。 (你应该编辑这部分中的文字,否则你只会祝我的朋友生日快乐)

  2. Sound:将实体定义为声音或音频源。

  3. Autoplay:描述在设置后是否自动播放声音。

  4. Loop:描述声音播放完毕后是否循环播放声音。

  5. On:实体在播放声音之前收听的事件。

如何利用WebAR给TA送上炫酷的生日祝福 资源教程 第10张

裁剪



6. 资源

  1. 源代码

  2. demo

你成功了。你开发了自己第一个AR应用。如果一切正确,你应该能看到类似于下图的影像:

如何利用WebAR给TA送上炫酷的生日祝福 资源教程 第11张

裁剪


终于,“Happy Birthday Krupa!”

评论列表暂无评论
发表评论