只要200行JavaScript代码，就能把特斯拉汽车带到您身边

Jerry的前一篇文章 如何使用JavaScript开发AR(加强现实)移动应用 (一) 介绍了用React-Native + ViroReact开发加强现实应用的一些预备知识。

本文我们开始进入加强现实开发的编码部分。我们仍是用一个实际的例子来说解：只须要200多行JavaScript代码，就能知足您把特斯拉汽车带到身边的愿望，虽然只是特斯拉汽车的模型。

下面这些视频是个人同事，SAP成都研究院数字创新空间的开发人员Wang Leo作的一个小demo：

https://v.qq.com/x/page/o3003...
https://v.qq.com/x/page/q3003...

这个加强现实应用支持实时地更换特斯拉车身的颜色，让您瞬间找到一丝拥有多辆特斯拉汽车的恍惚感。

梦醒了该搬砖了。

ViroReact的官网有一个步骤很是详细的向导：
https://docs.viromedia.com/do...

一步步照着作，最后就能经过您的手机摄像头，在真实的场景里能看到一个硬编码的Hello World字符串和一些3D物体。

这个Hello World级别的源代码在ViroReact官网上能下载，因此本文仍是重点介绍Leo作的demo的实现原理。

打开Leo的项目工程，找到package.json，项目名称为ViroSample, 里面声明了对React-Native和React-viro的依赖。

React-Native加ViroReact这套组合的妙处在于“一次编写，处处运行”的跨平台特性。编写一次JavaScript代码，能在iOS和Android两套操做系统里以原生应用的方式运行。

以Android为例，执行命令行react-native start 加上react-native run-android 后，在android文件夹里能找到针对Android平台生成的原生应用部分源代码。最重要的两个应用引导文件，一个是MainActivity.java, 经过回调函数的方式返回了AR应用的项目名称：

MainApplication.java的getJSMainModuleName经过回调函数的方式指明了JavaScript入口模块的名称：

由于本文不是React-Native的讲解文章，因此不深刻阐述React-Native应用在Android平台的启动原理，感兴趣的朋友能够自行搜索。React-Native生态圈很是活跃，相似的原理分析文章数不胜数。

React-Native + ViroReact开发的加强现实应用，其典型实现套路Jerry概括起来就三步：Match - Replace - Augment

(1) Match - 匹配

因为加强现实应用都是将代码生成的虚拟物品叠加到现实场景中，所以应用开发人员须要帮助ViroReact找到现实场景中的一个依附平面，这样ViroReact能够把这个依附平面映射到手机的二维屏幕上，接下来ViroReact就能在二维屏幕上绘制虚拟物体了。

ViroReact提供了一个标签ViroARImageMarker, 顾名思义，该标签可以容许应用开发人员定义一个“Marker”(标识，标记)。

用编程术语来讲，这个标签订义的就是一个place holder，经过target属性，关联一个应用开发人员指定的图片。当用户使用加强现实应用经过摄像头在现实世界扫描到和ViroARImageMarker指定的图片相匹配的图形时，ViroReact就会将Marker指定的图形替换成应用开发人员事先准备好的3D模型。这个匹配 - 替换过程是ViroReact自动完成的，应用开发人员只须要提供Marker指向的图片和待替换的3D模型便可。采用这种方式实现的AR应用也称为Marker based AR应用(固然还有不借助Marker实现的AR应用).

回到Leo的demo，从上图能看出target指向的Marker内容为一个名为logo的对象，这个对象经过API ViroARTrackingTargets.createTargets建立，输入参数是该图片在AR项目里的相对路径：

该图片以下所示。这是为何Leo在演示这个应用时，第一步老是先在电脑上打开这张图片，而后再用手机摄像头去扫描的缘由。

(2) Replace - 替换

ViroReact将现实世界的图形和AR应用的Image Marker匹配后，就会自动使用一个3D对象替换并渲染到Marker所在的位置上。

待替换的3D对象经过标签Viro3DObject定义，有三个重要的属性须要指定：

source和resources：3D模型文件，通常经过专业的3D软件生成。Windows10自带的Paint 3D软件能够打开.obj结尾的模型文件：

您能够查看下面的视频来360度全方位观察Leo的demo中使用的特斯拉的3D模型：
https://v.qq.com/x/page/s3003...
咱们很容易观察到，在Paint 3D里看到的这辆特斯拉汽车，表面毫无光泽，而Leo视频中的特斯拉，外表能够更换不一样的颜色，这是经过给3D模型添加不一样的texture(纹理)来实现的。

咱们经过ViroMaterials.createMaterials，传入不一样的texture参数，生成不一样的Material对象，最后赋给上图Viro3DObject的materials属性，即完成了待替换3D对象的声明。

经过使用React编程动态修改Viro3DObject materials属性的值，咱们就能实现动态修改摄像头里观察到的特斯拉车身的颜色。

固然这些不一样的texture对应的图形文件也须要专业人员制做才行：

(3) Augment 加强

这一步是即便从未接触过AR应用开发的程序员也很是熟悉的：标签Viro3DObject支持各类事件响应函数，好比点击以后触发的onClick回调函数:

咱们把本身实现的_toggleButtons函数注册到onClick事件上，当特斯拉模型被点击以后，咱们就能够弹出演示视频里的颜色选择菜单，容许用户指定新的车身颜色。

由于Viro3DObject的materials属性绑定的React模型字段为this.state.texture, 所以用户选择了新的颜色后，调用React的this.setState方法将texture属性设置成选中的颜色，便可实现车身颜色的动态刷新。

讲了这么多，您不想本身动手试试？只须要200行JavaScript代码，特斯拉就带回家! 感谢阅读。

更多阅读

• 如何使用JavaScript开发AR(加强现实)移动应用 (一)
• 在SAP UI中使用纯JavaScript显示产品主数据的3D模型视图
• SAP C/4HANA与人工智能和加强现实(AR)技术结合的又一个创新案例

要获取更多Jerry的原创文章，请关注公众号"汪子熙":