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

本地开发

生成构建

问题

保持联系

贡献

许可证

编辑推荐精选

音述AI

QoderWork

lynote.ai

AniShort

seedancetwo2.0

nano-banana纳米香蕉中文站

扣子-AI办公

堆友

码上飞

Vora

探索AI的无限可能

推荐工具精选

TRAE编程

扣子-AI办公

码上飞

商汤小浣熊

讯飞绘文

讯飞绘镜

iTerms

AI云服务特惠

火山引擎

阿里云

腾讯云

华为云

百度智能云

AWS

关注微信公众号