当前位置：首页 > news >正文

【1】A-Frame整体介绍

news 来源：原创 2024/9/20 11:49:34

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>