写点什么

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

2019 年 8 月 16 日

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


2019 年 8 月 16 日 08:0011531
用户头像

发布了 731 篇内容, 共 365.5 次阅读, 收获喜欢 1851 次。

关注

评论

发布
暂无评论
发现更多内容

架构师训练营-第五周-作业

狂奔嘀兔纸

极客大学架构师训练营

架构师训练营 第五周 作业

一雄

极客大学架构师训练营 作业 第五周

第五周-学习总结

molly

极客大学架构师训练营

一致性哈希算法JAVA版简单验证

L001

一致性hash算法的实现

互金从业者X

架构师0期05周作业

喵呜的小哥哥

「架构师训练营」作业:第 5 周 一致性 hash 算法

Amy

极客大学架构师训练营 作业 一致性hash 一致性Hash算法 第五周

事件驱动架构(W5总结)

麻辣

架构训练营第五周作业

子豪sirius

架构师训练营-作业3

A Matt

第05周 技术选型-01 命题作业

Jaye

架构师0期05周总结

喵呜的小哥哥

架构师训练营-第三周-总结

A Matt

极客大学架构师训练营

week05 作业

Geek_196d0f

架构师训练营第5周作业

养乐多

架构师训练营-week5-学习总结

晓-Michelle

极客大学架构师训练营

第五周作业

qqq

极客大学架构师训练营

架构师训练营第五周作业

张锐

第五周总结

qqq

Week5

Golang实现一致性哈希(consistent hash)

张磊

架构师训练营 W5 学习总结

Kun

极客大学架构师训练营

架构师训练营第五周感悟

张锐

架构师训练营 - 作业 - 第五周

心在飞

极客大学架构师训练营

架构师训练营第五周心得

努力努力再努力m

极客大学架构师训练营

第五周总结--一致性hash

互金从业者X

一致性哈希算法与实现

俊俊哥

缓存 算法 一致性哈希

《架构师训练营》第五周总结

week5作业

架构师训练营-第五周-课程总结

狂奔嘀兔纸

极客大学架构师训练营

Week05总结

张磊

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