共计 2791 个字符，预计需要花费 7 分钟才能阅读完成。
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 的原创文章，请关注公众号 ” 汪子熙 ”:
