JavaScript怎么实现特斯拉汽车

本篇内容主要讲解“JavaScript怎么实现特斯拉汽车”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript怎么实现特斯拉汽车”吧!

ViroReact的官网有一个步骤非常详细的向导:

JavaScript怎么实现特斯拉汽车

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

这个Hello World级别的源代码在ViroReact官网上能下载,所以本文还是重点介绍Leo做的demo的实现原理。

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

JavaScript怎么实现特斯拉汽车

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

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

JavaScript怎么实现特斯拉汽车

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

JavaScript怎么实现特斯拉汽车

因为本文不是React-Native的讲解文章,所以不深入阐述React-Native应用在Android平台的启动原理,感兴趣的朋友可以自行搜索。React-Native生态圈非常活跃,类似的原理分析文章数不胜数。

JavaScript怎么实现特斯拉汽车

React-Native + ViroReact开发的增强现实应用,其典型实现套路Jerry归纳起来就三步:Match – Replace – Augment

(1) Match – 匹配

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

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

JavaScript怎么实现特斯拉汽车

用编程术语来说,这个标签定义的就是一个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项目里的相对路径:

JavaScript怎么实现特斯拉汽车

该图片如下所示。这是为什么Leo在演示这个应用时,第一步总是先在电脑上打开这张图片,然后再用手机摄像头去扫描的原因。

JavaScript怎么实现特斯拉汽车

(2) Replace – 替换

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

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

JavaScript怎么实现特斯拉汽车

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

JavaScript怎么实现特斯拉汽车

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

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

JavaScript怎么实现特斯拉汽车

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

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

JavaScript怎么实现特斯拉汽车

(3) Augment 增强

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

JavaScript怎么实现特斯拉汽车

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

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

JavaScript怎么实现特斯拉汽车

到此,相信大家对“JavaScript怎么实现特斯拉汽车”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

原创文章,作者:kepupublish,如若转载,请注明出处:https://blog.ytso.com/208046.html

(0)
上一篇 2021年12月6日
下一篇 2021年12月6日

相关推荐

发表回复

登录后才能评论