使用 ViroReact 开发增强实现应用的一个具体例子(二)

简介: 本文开始详细介绍使用 ViroReact 进行编码开发的技术细节。

Replace - 替换

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

待替换的3D对象通过标签Viro3DObject定义,有三个重要的属性需要指定:

image.png

  • source和resources:3D模型文件,一般通过专业的3D软件生成。Windows10自带的Paint 3D软件可以打开.obj结尾的模型文件:

image.png

您可以查看下面的视频来360度全方位观察 demo 中使用的特斯拉的3D模型:


https://v.qq.com/x/page/s3003qkje8u.html


我们很容易观察到,在 Paint 3D 里看到的这辆特斯拉汽车,表面毫无光泽,而Leo视频中的特斯拉,外表可以更换不同的颜色,这是通过给3D模型添加不同的texture(纹理)来实现的。

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

image.png

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

当然这些不同的texture对应的图形文件也需要专业人员制作才行:

image.png

Augment 增强

这一步是即使从未接触过AR应用开发的程序员也非常熟悉的:标签Viro3DObject支持各种事件响应函数,比如点击之后触发的onClick回调函数:

image.png

我们把自己实现的_toggleButtons函数注册到onClick事件上,当特斯拉模型被点击之后,我们就可以弹出演示视频里的颜色选择菜单,允许用户指定新的车身颜色。


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

image.png

总结

本文从之前的文章使用 JavaScript 开发AR(增强现实)移动应用的预备知识和环境搭建出发,以一个具体的 ViroReact 项目出发,详细介绍了增强现实应用编码开发的匹配,替换和增强的实现三部曲。


image.png


目录
相关文章
|
9月前
|
存储 缓存 监控
《优化接口设计的思路》系列:第二篇—接口用户上下文的设计与实现
大家好!我是sum墨,一个一线的底层码农,平时喜欢研究和思考一些技术相关的问题并整理成文,限于本人水平,如果文章和代码有表述不当之处,还请不吝赐教。 作为一名从业已达六年的老码农,我的工作主要是开发后端Java业务系统,包括各种管理后台和小程序等。在这些项目中,我设计过单/多租户体系系统,对接过许多开放平台,也搞过消息中心这类较为复杂的应用,但幸运的是,我至今还没有遇到过线上系统由于代码崩溃导致资损的情况。这其中的原因有三点:一是业务系统本身并不复杂;二是我一直遵循某大厂代码规约,在开发过程中尽可能按规约编写代码;三是经过多年的开发经验积累,我成为了一名熟练工,掌握了一些实用的技巧。
73 0
|
18天前
|
编解码 算法 计算机视觉
YOLOv8数据增强预处理方式详解:包括数据增强的作用,数据增强方式与方法
YOLOv8数据增强预处理方式详解:包括数据增强的作用,数据增强方式与方法
|
2月前
|
存储 编译器 C语言
【C++基础】 --- C++在C的基础上对一些语法的增强
【C++基础】 --- C++在C的基础上对一些语法的增强
18 3
|
11月前
|
Java 编译器 应用服务中间件
代码开发优化细节
带有final修饰符的类是不可派生的。在Java核心API中,有许多应用final的例子,例如java.lang.String,整个类都是final的。为类指定final修饰符可以让类不可以被继承,为方法指定final修饰符可以让方法不可以被重写。如果指定了一个类为final,则该类所有的方法都是final的。Java编译器会寻找机会内联所有的final方法,内联对于提升Java运行效率作用重大,具体参见Java运行期优化。此举能够使性能平均提高50% 。
196 2
代码开发优化细节
|
10月前
|
前端开发 JavaScript 程序员
使用 ViroReact 开发增强实现应用的一个具体例子
使用 ViroReact 开发增强实现应用的一个具体例子
|
12月前
|
C#
一个 C#例子,代码简化的过程
一个 C#例子,代码简化的过程
54 0
jira学习案例15-用泛型增强useDebounce类型灵活性
jira学习案例15-用泛型增强useDebounce类型灵活性
48 0
jira学习案例15-用泛型增强useDebounce类型灵活性
|
安全 Java 开发者
案例之简化模式测试|学习笔记
快速学习案例之简化模式测试
57 0
案例之简化模式测试|学习笔记
|
JavaScript 前端开发 API
使用 ViroReact 开发增强实现应用的一个具体例子(一)
本文开始详细介绍使用 ViroReact 进行编码开发的技术细节。
111 0
使用 ViroReact 开发增强实现应用的一个具体例子(一)
|
设计模式 算法 Java
代码简化利器-行为参数化
在软件工程中,一个众所周知的问题就是,不管做什么,用户的需求肯定会变。比方说,有个应用程序是帮助农民了解自己的库存的。这位农民可能想有一个查找库存中所有绿色苹果的功能。但到了第二天,他可能会告诉你:“其实我还想找出所有重量超过150克的苹果。”又过了两天,农民又跑回来补充道:“要是我可以找出所有既是绿色,重量也超过150克的苹果,那就太棒了。”要如何应对这样不断变化的需求?理想的状态下,应该把工作量降到最少。此外,类似的新功能实现起来还应该很简单,而且易于长期维护。
105 0
代码简化利器-行为参数化