A-Frame:在浏览器中构建 VR/AR 应用程序

阅读数:10349 2019 年 8 月 16 日 08:00

A-Frame:在浏览器中构建 VR/AR 应用程序

2019 年伦敦 Fullstack 大会上,自由软件工程师 Doug Sillars 通过演示如何构建一个虚拟艺术画廊讨论了使用 JavaScript 实现虚拟和增强现实的现状。

无论是虚拟现实(让用户沉浸在完全 3D 生成的世界中)还是增强现实(在现实世界和数字对象之间提供深度集成),它们都是相对较新的技术,目前正在通过 WebXR API 集成到 Web 中。WebXR 中的 X 是指未来可能出现的任何类型的沉浸式技术。

WebXR API 仍在开发当中,只提供有限的浏览器支持和文档。 WebXR GitHub 代码库包含了 WebXR 核心概念介绍,方便入门 WebXR。

即使没有 WebXR API,仍然可以与 AR/VR 设备交互,并创建简单的跨平台应用程序。像 A-Frame 这样的库为应用程序开发提供了一个简化的接口,网上可以找到很多有趣的例子和实现。

A-Frame 库基于 three.js ,three.js 是一个流行的 JavaScript 3D 渲染库。A-Frame 提供了一个简单的类似 HTML 的语法,易于掌握,开发人员可以用最少的 JavaScript 知识创建 VR 和 AR 应用程序。

在使用 A-Frame 时,开发人员可以使用类似 HTML 的标记来描述场景,然后 A-Frame 将这些标记转换为 WebGL 视图。为了将 3D 对象放置在真实空间(AR)中,开发人员目前需要使用特殊物理标签,这些标签可以在 A-Frame 网站上生成。有了这些标签,A-Frame 就会知道应该在哪里以及放置哪些 3D 对象。

要创建一个简单的 VR 场景只需要一些标签:

复制代码
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25"></a-sphere>
</a-scene>

另一个值得一提的库是 React-360 ,它允许开发人员使用与 React 类似的语法创建 AR/VR 用户界面。

最初,AR/VR 应用程序需要使用昂贵的专用设备,这限制了它的应用范围。如今,开发者可以使用智能手机来实现类似的体验。虽然在智能手机上使用 AR/VR 应用程序是可能的,但仍然需要使用一些特殊的眼镜,让用户有更强烈的浸入式体验。谷歌首先推出这样的眼镜,叫 Cardboard ,不过现在有许多可供选择的解决方案。

Doug Sillars 的完整演讲视频“在浏览器中构建艺术画廊”可以在 FullStack 网站上找到(需要免费注册)。

A-Frame 是基于 MIT 许可发布的,它的源代码可以通过 A-Frame Github 代码库获得。

原文链接

Building AR/VR Applications in the Browser

收藏

评论

微博

用户头像
发表评论

注册/登录 InfoQ 发表评论