写点什么

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

  • 2019 年 8 月 16 日
  • 本文字数:940 字

    阅读完需:约 3 分钟

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:0011813
用户头像

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

关注

评论

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

揭秘华为云GaussDB(for Influx):最佳实践之数据建模

华为云开发者社区

MySQL 数据建模 数据模型 华为云 GaussDB(for Influx)

ajax和axios区别及优缺点

小谷哥

培训学习选择java好还是前端好

@零度

JAVA开发 web前端

OpenHarmony 技术日直播回顾丨共建新技术,开拓新领域

OpenHarmony开发者社区

OpenHarmony 技术日

javaScript深拷贝和浅拷贝简单梳理

程序猿布欧

JavaScript 前端 深拷贝 浅拷贝 深拷贝与浅拷贝

企评家,助力创业板企业成长性评价

企评家

企业评价 企业大数据 创业板 评价维度 成长性

一文详解Java日志框架JUL

华为云开发者社区

Java 日志 框架 日志框架 JUL

Swoole中的协程使用相关说明,快来围观

CRMEB

Go单体服务开发最佳实践

万俊峰Kevin

微服务 单体架构 web开发 go-zero Go 语言

大数据培训学习程序员有必要吗

@零度

大数据开发

这是一个有关自律的复杂故事

翁弗来德

数据分析 监控 自律 跑步 可观测

【阿里云大咖说】填问卷送好礼正式上线,快来参与吧!

大咖说

大咖说 问卷 礼品

知识管理:新时代企业竞争力核心

小炮

企业知识管理 企业知识管理工具

活动预告 | 洞见科技纪凯受邀出席「隐私计算应用与发展论坛」

洞见科技

在MAUI中使用Masa Blazor

MASA技术团队

C# .net 微软 组件 组件库

EasyCV开源|开箱即用的视觉自监督+Transformer算法库

阿里云大数据AI技术

算法 计算机视觉 开源技术

什么是敏捷开发,敏捷开发落地指南之迭代排期

阿里云云效

云计算 阿里云 敏捷开发 研发 研发敏捷

想参加培训学习web前端不知道靠不靠谱

@零度

web前端开发

BIGO 的数据管理与应用实践

Nebula Graph

数据库 图数据库 数据管理

MySQL高可用配置

小谷哥

眼见不一定为实:调用链HBase倾斜修复

捉虫大师

HBase 数据倾斜 4月月更

Autowired注解与Resource注解的区别

小谷哥

“一个扫描枪一张表”,韵达选择 TDengine 应对每日亿级数据量

TDengine

数据库 tdengine

为安全而生!浪潮云参编的《数据安全法》实施参考(第一版)重磅发布

浪潮云

云安全

【易安联】安全都是有边界的,零信任也不例外

Geek_2d6073

双许可、先决条件、附加条款……开源许可证的疑难杂问

一君

英特尔分享进军独显市场的背后思考

科技新消息

swap链游系统开发(原理)NFT链游项目系统定制开发案例

Weix_StPv888

源码解析Synchronous Queue 这种特立独行的队列

华为云开发者社区

MQ 堆栈 队列 Synchronous Queue 公平队列

JavaScript的事件循环机制浅析

程序猿布欧

JavaScript 前端 前端面试 防抖节流

《数字经济全景白皮书》Z世代用户洞察篇(3)重磅发布!

易观分析

用户分析 Z世代

A-Frame:在浏览器中构建 VR/AR 应用程序_AI_Guy Nesher_InfoQ精选文章