aframe

<h1 align="center">A-Frame</h1> <p align="center"><a href="https://aframe.io" target="_blank"><img width="480" alt="A-Frame" src="https://yellow-cdn.veclightyear.com/835a84d5/b2e7f40c-63d5-4883-b196-ba8be65b10e3.jpg"></a></p> <p align="center"><b>用于构建虚拟现实体验的网页框架。</b></p> <p align="center"> <a href="https://codecov.io/gh/aframevr/aframe"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/e2522ade-bc0c-4a70-94bd-022902904ce0.svg" alt="覆盖率状态"> </a> <a href="https://npmjs.org/package/aframe"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/742106da-4299-42df-a1e3-e4e33e425112.svg?style=flat-square" alt="下载量"> </a> <a href="https://npmjs.org/package/aframe"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/5af0bb02-2c03-4a39-88e5-8c75df240993.svg?style=flat-square" alt="版本"> </a> <a href="https://npmjs.com/package/aframe"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/b5c6fad0-0d49-4bfd-b471-726220cef5a1.svg?style=flat-square" alt="许可证"></a> </a> </p> <div align="center"> <a href="https://aframe.io">网站</a> — <a href="https://aframe.io/docs/">文档</a> — <a href="https://aframe.io/school/">学校</a> — <a href="https://aframevr.slack.com/join/shared_invite/zt-f6rne3ly-ekVaBU~Xu~fsZHXr56jacQ">Slack</a> — <a href="https://aframe.io/blog/">博客</a> — <a href="https://aframe.io/subscribe/">新闻订阅</a> </div>

示例

在主页、A Week of A-Frame和WebVR Directory上可以找到更多示例。

特性

:eyeglasses: 简化虚拟现实开发：A-Frame处理了跨平台（包括移动设备、桌面和所有头戴设备，兼容支持WebXR的浏览器）运行所需的3D和WebXR样板代码，只需添加<a-scene>即可。

:heart: 声明式HTML：HTML易于阅读和复制粘贴。由于A-Frame可以通过HTML使用，因此对所有人都是可访问的：Web开发者、VR和AR爱好者、教育工作者、艺术家、创客和儿童。

:electric_plug: 实体-组件架构：A-Frame是基于three.js的强大框架，为three.js提供了声明式、可组合、可重用的实体-组件结构。虽然A-Frame可以通过HTML使用，但开发者可以无限制地访问JavaScript、DOM API、three.js、WebXR和WebGL。

:zap: 性能：A-Frame是three.js之上的一个轻量级框架。尽管A-Frame使用DOM，但A-Frame不会触及浏览器布局引擎。性能是首要考虑因素，在高度交互的WebXR体验中经过了实战测试。

:globe_with_meridians: 跨平台：为任何支持WebXR的浏览器兼容的头戴设备构建VR和AR应用。没有头戴设备或控制器？没问题！A-Frame仍然可以在标准桌面和智能手机上运行。

:mag: 可视化检查器：A-Frame提供了内置的3D可视化检查器，其工作流程类似于浏览器的开发者工具，界面类似于Unity。打开任何A-Frame场景并按下<ctrl> + <alt> + i。

:runner: 功能丰富：A-Frame的内置组件包括几何体、材质、灯光、动画、模型、射线投射器、阴影、位置音频、追踪控制器等，让你快速上手。通过社区组件，你可以获得更多功能，如粒子系统、物理引擎、多用户、海洋、山脉、语音识别或传送！

使用方法

示例

只需几行HTML代码就可以在浏览器中构建VR和AR场景！立即开始体验和发布，请在以下平台上重新混合入门示例：

<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>

通过A-Frame的实体-组件架构，我们可以直接从HTML中将社区组件（如海洋、物理）从生态系统中引入并插入到我们的对象中：

<html>
  <head>
    <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-particle-system-component@1.0.x/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/aframe-gradient-sky@1.5.0/dist/gradientsky.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-entity id="rain" particle-system="preset: rain; color: #24CAFF; particleCount: 5000"></a-entity>

      <a-entity id="sphere" geometry="primitive: sphere"
                material="color: #EFEFEF; shader: flat"
                position="0 0.15 -5"
                light="type: point; intensity: 5"
                animation="property: position; easing: easeInOutQuad; dir: alternate; dur: 1000; to: 0 -0.10 -5; loop: true"></a-entity>

      <a-entity id="ocean" ocean="density: 20; width: 50; depth: 50; speed: 4"
                material="color: #9CE3F9; opacity: 0.75; metalness: 0; roughness: 1"
                rotation="-90 0 0"></a-entity>

      <a-entity id="sky" geometry="primitive: sphere; radius: 5000"
                material="shader: gradient; topColor: 235 235 245; bottomColor: 185 185 210"
                scale="-1 1 1"></a-entity>

      <a-entity id="light" light="type: ambient; color: #888"></a-entity>
    </a-scene>
  </body>
</html>

构建

要使用A-Frame的最新稳定版本，请引入aframe.min.js：

<head>
  <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
</head>

要查看稳定版和主分支构建，请参阅dist/文件夹。

npm

npm install --save aframe
# 或 yarn add aframe

require('aframe')  // 例如，使用Browserify或Webpack。

本地开发

git clone https://github.com/aframevr/aframe.git  # 克隆仓库。
cd aframe && npm install  # 安装依赖。
npm start  # 启动本地开发服务器。

然后在浏览器中打开**http://localhost:9000**。

生成构建

npm run dist

问题

如有问题和需要支持，请在StackOverflow上提问。

保持联系

并与维护者取得联系！

贡献

参与进来！查看贡献指南了解如何开始。

你还可以通过购买独特设计的精美A-Frame T恤来支持开发。

许可证

该程序是自由软件，根据MIT许可证分发。

示例

特性

使用方法

示例

构建

npm

本地开发

生成构建

问题

保持联系

贡献

许可证

编辑推荐精选

博思AIPPT

潮际好麦

iTerms

SimilarWeb流量提升

Sora2视频免费生成

Transly

讯飞绘文

TRAE编程

商汤小浣熊

imini AI

探索AI的无限可能

推荐工具精选

TRAE编程

扣子-AI办公

讯飞文书

商汤小浣熊

讯飞绘文

讯飞绘镜

iTerms

AI云服务特惠

火山引擎

阿里云

腾讯云

华为云

百度智能云

AWS

关注微信公众号