React Native 增强现实(AR)

29

我正在为客户调查几款涉及增强现实的iOS / Android移动应用程序:

  1. 预览一件家具在你家里看起来的样子的能力
  2. 数字试衣间 - 预览穿上衣服后的效果

我们主要使用React Native构建移动应用程序(其中一个项目将在现有的React Native应用程序中构建该功能)。

是否有人分享过在React Native和AR方面的经验?分享任何可帮助入门的框架/组件链接?或者只是带领一些讨论从哪里开始?


3
你有发现什么吗? - Tony Vincent
3个回答

28

看起来React AR还没有实现。但是已经有一些应用程序在React之上实现了某些库。

一个例子在这里

一些AR的JS库包括JSArucoJSARToolKit。JSAruco基于OpenCV,而JSARToolkit是通过中间端口NyARToolkit(Java)和FLARToolkit(Actionscript)传输ARToolkit的端口。一些示例

React VR即将推出。Facebook宣布了React VR的Alpha版本,它是建立在React Native之上的,推特在这里

  1. 框架的GitHub页面
  2. React VR的示例项目和文档在这里

编辑

Ar.js是一个新的开源js工具包(基于three.js+jsartoolkit5),看起来非常有前途。

更新

苹果在iOS 11中推出了ARKit,适用于iPhone和iPad,这里是相应的React Native绑定。在这里可以找到经过筛选的令人惊叹的ARKit项目和资源列表。5分钟示例应用程序资源

1
不幸的是,ar.js需要WebRTC,但iOS或MacOS上的Safari不支持它。 :( - Shane
1
React VR并不是建立在React Native之上的。它是从RN中分叉出来的,并使用相同的构建系统,但除此之外,它们是独立的。可以将其视为:从RN中获取React核心+工具集,并在其上添加基于three.js的渲染(因此实际上是WebVR)。 - Petr Bela

9
另一个选择(毫不掩饰地推销)是我们公司的平台Viro AR:https://viromedia.com/viroar/
它是一个React-Native库,将iOS的ARKit(即将推出Android的ARCore)与我们自己专有的本地渲染器配对,并在易于使用的React-Native API中封装,让您可以立即开始构建AR体验!
我们甚至通过构建一个AR应用程序Figment AR来使用我们自己的产品,现在可在Apple App Store上下载:https://itunes.apple.com/app/id1270018902
我们使用React Native为2D UI(按钮、列表视图、预览屏幕),使用Viro进行相机显示、3D渲染和世界跟踪。
赶紧来看看吧!
文档: http://docs.viromedia.com/ 示例代码: https://github.com/viromedia/viro 问题/支持: https://github.com/viromedia/viro/issues & https://viromedia.com/contact-1/

嗨@A.Wali,目前还没有,但这是我们正在评估的事情。如果您需要帮助或有任何问题,请通过上面的Issues/Support链接与我们联系! - ACVM
嗨@ACVM:您的库需要我的设备兼容ARCore才能正常工作吗?因为当我下载Viromedia应用程序时,AR功能会给我抛出错误,指出我没有最新的ARCore。所以是否只能针对支持ARCore的特定设备或所有Android设备进行目标定位? - Abhinav
我现在也在使用这个平台进行AR开发,并且我为此背书,Slack也提供了良好的支持。 - robertjuh
1
@robertjuh:它在所有安卓设备上都能工作,还是只有ARCore支持的设备? - Abhinav
1
嗨@Abhinav,我们目前仅支持ARCore和ARKit支持的设备。您可以在此处找到支持的ARCore设备列表:https://developers.google.com/ar/discover/#supported_devices - ACVM
Viro Media很棒,但测试应用程序与我拥有的设备不兼容。是否有其他解决方案可以使用Viro Media开发和测试应用程序? - mage-to

5
我正在为苹果新发布的AR库ARKit构建一个React Native库。这应该是个好的开始,因为ARKit已经很好地打包了CV算法,所以您可以集中精力实现自己想要的功能。
欢迎查看我的GitHub存储库(react-native-arkit)。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接