1.A-Frame是什么?
A-Frame 是一个用于构建虚拟现实 (VR) 体验的 Web 框架。 A-Frame 基于 HTML 之上,因此上手简单。但 A-Frame 不仅仅是 3D 场景图或标记语言;它还是一种标记语言。其核心是一个强大的实体组件框架,为 Three.js 提供了声明性、可扩展和可组合的结构。
2.A-Frame的特性?
- VR 变得简单:只需放入
<script>
标签和<a-scene>
。 A-Frame 将处理 3D 样板、VR 设置和默认控件。无需安装,无需构建步骤。 - 声明性 HTML:HTML 易于阅读、理解以及复制和粘贴。 A-Frame 基于 HTML,每个人都可以使用:Web 开发人员、VR 爱好者、艺术家、设计师、教育工作者、创客、孩子。
- 实体组件架构:A-Frame 是一个强大的 Three.js 框架,提供了声明性、可组合、可重用的实体组件结构。 HTML 只是冰山一角;开发人员可以无限制地访问 JavaScript、DOM API、 Three.js、WebVR 和 WebGL。
- 跨平台 VR:为 Vive、Rift、Meta Quest、Windows Mixed Reality 和 Cardboard 构建 VR 应用程序,并支持所有相应的控制器。没有耳机或控制器?没问题! A-Frame 仍然适用于标准台式机和智能手机。
- 性能:A-Frame 针对 WebVR 进行了彻底优化。虽然 A-Frame 使用 DOM,但它的元素不涉及浏览器布局引擎。 3D 对象更新全部在内存中完成,几乎没有垃圾和开销。最具互动性和大规模的 WebVR 应用程序已在 A-Frame 中完成,以 90fps 流畅运行。
- 视觉检查器:A-Frame 提供了一个方便的内置视觉 3D 检查器。打开任何 A 框架场景,点击
<ctrl> + <alt> + i
或<ctrl> + <option> + i
,然后飞来飞去看看引擎盖下面 - 组件:使用 A-Frame 的核心组件(例如几何图形、材质、灯光、动画、模型、光线投射器、阴影、位置音频、文本和大多数主要耳机的控件)开始运行。进一步了解数百个社区组件,包括环境、状态、粒子系统、物理、多用户、海洋、隐形传态、超级双手和增强现实。
- 经过验证且可扩展:A-Frame 已被 Google、迪士尼、三星、丰田、福特、雪佛兰、国际特赦组织、CERN、NPR、半岛电视台、华盛顿邮报、NASA 等公司使用。谷歌、微软、Oculus、三星等公司都为A-Frame做出了贡献。
3.支持哪些VR平台与设备?
(1)支持的平台
A-Frame 通过浏览器支持几乎所有平台。 A-Frame 支持的通用平台包括:
-
桌面 VR头显
-
移动设备上的 VR头显
-
独立头显上的 VR
-
PC(即鼠标和键盘)
-
平板、手机
已证明可与 A-Frame 配合使用的其他一些平台包括:
-
AR 头显上的增强现实 (AR)(例如 Magic Leap、HoloLens)
-
移动设备上的增强现实 (AR)(即ARKit、ARCore)
(2)支持的头显
A-Frame 通过浏览器支持大多数头显。 A-Frame 支持的一些 VR 头显包括:
-
HTC Vive
-
Oculus Rift
-
Oculus Quest
-
Oculus Quest 2
-
Oculus Quest 3
-
Oculus Go
-
Valve Index
-
Vive Focus
对于一般硬件建议(不是要求):
-
Oculus Rift 硬件推荐
-
HTC Vive 硬件推荐
-
对于智能手机,iOS 版为 iPhone 6,Android 版至少为 Galaxy S6
(3)支持的浏览器
A-Frame 支持任何实现 WebXR 规范的浏览器的 VR,以及大多数浏览器的平面 3D。大型浏览器供应商正在慢慢转向 WebXR 规范,尽管它对 A-Frame 开发人员来说没有太多前端变化,主要涉及 API 的重命名。
-
Supermedium(可在 Oculus 和 Steam 上使用)
-
Firefox
-
Oculus Browser
-
Samsung Internet
-
Microsoft Edge
-
Chrome (WebXR under origin trials)
-
Exokit (experimental early support)
A-Frame 通过 WebVR polyfill 支持大多数不支持 WebXR 的现代移动浏览器。请注意,这些浏览器没有官方的 WebXR 支持,我们使用的是 polyfill;重要的是要降低这些浏览器将提供高质量体验并且没有怪癖的期望:
-
Safari for iOS
-
Chrome for Android
-
Firefox for iOS
-
Samsung Internet
-
UC Browser
对于平面或普通 3D 支持,A-Frame 支持所有现代浏览器,特别是那些支持 WebGL 的浏览器,包括:
-
Firefox
-
Chrome
-
Safari
-
Edge
-
Internet Explorer 11
4.如何安装使用?
(1)启动本地服务器
python -m http.server
或
npm i -g five-server@latest && five-server --port=8000
(2)编写代码
直接引用:
<head>
<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
</head>
或
npm install aframe
nodejs代码中引用:
require('aframe');
(3)完整例子
<html>
<head>
<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
</head>
<body>
<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" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>