用于构建虚拟现实体验的 Web 框架。
在主页、A Week of A-Frame和WebVR Directory上可以找到更多示例。
👓虚拟现实变得简单：A-Frame 只需放入<a-scene>.
❤️声明性 HTML：HTML 易于阅读和复制粘贴。由于 A-Frame 可以通过 HTML 使用，因此每个人都可以使用 A-Frame：Web 开发人员、VR 和 AR 爱好者、教育工作者、艺术家、创客、孩子。
🔌实体组件架构：A-Frame 是一个基于 Three.js 的强大框架，为 Three.js 提供声明性、可组合、可重用的实体组件结构。虽然 A-Frame 可以通过 HTML 使用，但开发人员可以无限制地访问 JavaScript、DOM API、 Three.js、WebXR 和 WebGL。
⚡性能：A-Frame 是一个基于 Three.js 的瘦框架。虽然A-Frame使用了DOM，但A-Frame并不触及浏览器布局引擎。性能是重中之重，需要在高度交互的 WebXR 体验上进行实战测试。
🌐跨平台：为任何与支持 WebXR 的浏览器兼容的耳机构建 VR 和 AR 应用程序。没有耳机或控制器？没问题！A-Frame 仍然适用于标准台式机和智能手机。
🔍 Visual Inspector：A-Frame 提供了内置的视觉 3D 检查器，其工作流程类似于浏览器的开发工具，界面类似于 Unity。打开任何 A-Frame 场景并点击<ctrl> + <alt> + i。
🏃功能：使用 A-Frame 的内置组件（例如几何图形、材质、灯光、动画、模型、光线投射器、阴影、位置音频、跟踪控制器）立即开始运行。利用粒子系统、物理、多用户、海洋、山脉、语音识别或隐形传态等社区组件，走得更远！
只需几行 HTML 即可在浏览器中构建 VR 和 AR 场景！要立即开始播放和发布，请重新混合入门示例：
<html> <head> <script src="https://aframe.io/releases/1.5.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>
借助 A-Frame 的实体组件架构，我们可以从生态系统（例如海洋、物理）中放入社区组件，并将它们直接从 HTML 插入到我们的对象中：
<html> <head> <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script> <script src="https://unpkg.com/[email protected]/dist/aframe-particle-system-component.min.js"></script> <script src="https://unpkg.com/aframe-extras.ocean@%5E3.5.x/dist/aframe-extras.ocean.min.js"></script> <script src="https://unpkg.com/[email protected]/dist/gradientsky.min.js"></script> </head> <body> <a-scene> <a-entity id="rain" particle-system="preset: rain; color: #24CAFF; particleCount: 5000"></a-entity><span class="pl-kos"><</span><span class="pl-ent">a-entity</span> <span class="pl-c1">id</span>="<span class="pl-s">sphere</span>" <span class="pl-c1">geometry</span>="<span class="pl-s">primitive: sphere</span>" <span class="pl-c1">material</span>="<span class="pl-s">color: #EFEFEF; shader: flat</span>" <span class="pl-c1">position</span>="<span class="pl-s">0 0.15 -5</span>" <span class="pl-c1">light</span>="<span class="pl-s">type: point; intensity: 5</span>" <span class="pl-c1">animation</span>="<span class="pl-s">property: position; easing: easeInOutQuad; dir: alternate; dur: 1000; to: 0 -0.10 -5; loop: true</span>"<span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">a-entity</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">a-entity</span> <span class="pl-c1">id</span>="<span class="pl-s">ocean</span>" <span class="pl-c1">ocean</span>="<span class="pl-s">density: 20; width: 50; depth: 50; speed: 4</span>" <span class="pl-c1">material</span>="<span class="pl-s">color: #9CE3F9; opacity: 0.75; metalness: 0; roughness: 1</span>" <span class="pl-c1">rotation</span>="<span class="pl-s">-90 0 0</span>"<span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">a-entity</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">a-entity</span> <span class="pl-c1">id</span>="<span class="pl-s">sky</span>" <span class="pl-c1">geometry</span>="<span class="pl-s">primitive: sphere; radius: 5000</span>" <span class="pl-c1">material</span>="<span class="pl-s">shader: gradient; topColor: 235 235 245; bottomColor: 185 185 210</span>" <span class="pl-c1">scale</span>="<span class="pl-s">-1 1 1</span>"<span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">a-entity</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">a-entity</span> <span class="pl-c1">id</span>="<span class="pl-s">light</span>" <span class="pl-c1">light</span>="<span class="pl-s">type: ambient; color: #888</span>"<span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">a-entity</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">a-scene</span><span class="pl-kos">></span></body> </html>
要使用 A-Frame 的最新稳定版本，请包括
aframe.min.js：<head> <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script> </head>要查看稳定版本和主版本，请参阅
dist/文件夹。npm install --save aframe # Or yarn add aframerequire('aframe') // e.g., with Browserify or Webpack.git clone https://github.com/aframevr/aframe.git # Clone the repository. cd aframe && npm install # Install dependencies. npm start # Start the local development server.并在浏览器中打开http://localhost:9000。
npm run dist如需问题和支持，请在 StackOverflow 上提问。
并与维护人员取得联系！
参与其中！查看贡献指南以了解如何开始。
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent