共计 2628 个字符，预计需要花费 7 分钟才能阅读完成。
笔者之前的文章 应用 JavaScript 开发 AR(加强事实)挪动利用的准备常识和环境搭建，介绍了应用加强事实开发库 ViroReact 进行利用开发所需把握的一些最根底的概念和环境搭建步骤。
本文开始具体介绍应用 ViroReact 进行编码开发的技术细节。
依照本文步骤开发而成的利用成果，能够从上面两个视频 demo 查看：
- https://v.qq.com/x/page/o3003…
- https://v.qq.com/x/page/q3003…
这个加强事实利用反对实时地更换特斯拉车身的色彩，可能帮忙使用者不便地查看同一型号的特斯拉汽车，在不同车身色彩外观下的不同视觉效果。
ViroReact 的官网有一个步骤十分具体的向导：
一步步照着做，最初就能通过手机摄像头，在实在的场景里能看到一个硬编码的 Hello World 字符串和一些 3D 物体。
这个 Hello World 级别的源代码在 ViroReact 官网上能下载，大家能够下载到本地运行，跑通之后，就能持续学习本文余下局部介绍的技术细节了。
关上基于 ViroReact 的 Node.js 我的项目，找到 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
Match – 匹配
因为加强事实利用都是将代码生成的虚构物品叠加到事实场景中，因而利用开发人员须要帮忙 ViroReact 找到事实场景中的一个附丽立体，这样 ViroReact 能够把这个附丽立体映射到手机的二维屏幕上，接下来 ViroReact 就能在二维屏幕上绘制虚构物体了。
ViroReact 提供了一个标签 ViroARImageMarker, 顾名思义，该标签可能容许利用开发人员定义一个“Marker”(标识，标记)。
用编程术语来说，这个标签定义的就是一个 place holder，通过 target 属性，关联一个利用开发人员指定的图片。当用户应用加强事实利用通过摄像头在事实世界扫描到和 ViroARImageMarker 指定的图片相匹配的图形时，ViroReact 就会将 Marker 指定的图形替换成利用开发人员当时筹备好的 3D 模型。这个匹配 – 替换过程是 ViroReact 主动实现的，利用开发人员只须要提供 Marker 指向的图片和待替换的 3D 模型即可。采纳这种形式实现的 AR 利用也称为 Marker based AR 利用(当然还有不借助 Marker 实现的 AR 利用).
从上图能看出 target 指向的 Marker 内容为一个名为 logo 的对象，这个对象通过 API ViroARTrackingTargets.createTargets 创立，输出参数是该图片在 AR 我的项目里的相对路径：
该图片如下所示。这也是为什么咱们在演示这个利用时，第一步总是先在电脑上关上这张图片，而后再用手机摄像头去扫描的起因。
Replace – 替换
ViroReact 将事实世界的图形和 AR 利用的 Image Marker 匹配后，就会主动应用一个 3D 对象替换并渲染到 Marker 所在的地位上。
待替换的 3D 对象通过标签 Viro3DObject 定义，有三个重要的属性须要指定：
- source 和 resources：3D 模型文件，个别通过业余的 3D 软件生成。Windows10 自带的 Paint 3D 软件能够关上.obj 结尾的模型文件：
您能够查看上面的视频来 360 度全方位察看 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 对应的图形文件也须要业余人员制作才行：
Augment 加强
这一步是即便从未接触过 AR 利用开发的程序员也十分相熟的：标签 Viro3DObject 反对各种事件响应函数，比方点击之后触发的 onClick 回调函数:
咱们把本人实现的_toggleButtons 函数注册到 onClick 事件上，当特斯拉模型被点击之后，咱们就能够弹出演示视频里的色彩抉择菜单，容许用户指定新的车身色彩。
因为 Viro3DObject 的 materials 属性绑定的 React 模型字段为 this.state.texture, 因而用户抉择了新的色彩后，调用 React 的 this.setState 办法将 texture 属性设置成选中的色彩，即可实现车身色彩的动静刷新。
总结
本文从之前的文章应用 JavaScript 开发 AR(加强事实)挪动利用的准备常识和环境搭建登程，以一个具体的 ViroReact 我的项目登程，具体介绍了加强事实利用编码开发的 匹配，替换和加强 的实现三部曲。
