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/s3003qkje8u.html
我们很容易观察到,在 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 项目出发,详细介绍了增强现实应用编码开发的匹配,替换和增强
的实现三部曲。