aframe README

The project's README from github.com/aframevr/aframe. As one markdown file: README.md.

A-Frame

A-Frame

A web framework for building browser based 3D, AR and VR experiences.

Coverage Status Downloads Version License

Site — Docs — Examples — School — Community

Examples

Supercraft A-Painter Supermedium A-Blast A-Saturday-Night Musical Forest by @googlecreativelab

Find more examples on the homepage, A Week of A-Frame, and WebVR Directory.

Features

:eyeglasses: Virtual Reality Made Simple: A-Frame handles the 3D and WebXR boilerplate required to get running across platforms including mobile, desktop, and all headsets (compatible with a WebXR capable browser) just by dropping in <a-scene>.

:heart: Declarative HTML: HTML is easy to read and copy-and-paste. Since A-Frame can be used from HTML, A-Frame is accessible to everyone: web developers, VR and AR enthusiasts, educators, artists, makers, kids.

:electric_plug: Entity-Component Architecture: A-Frame is a powerful framework on top of three.js, providing a declarative, composable, reusable entity-component structure for three.js. While A-Frame can be used from HTML, developers have unlimited access to JavaScript, DOM APIs, three.js, WebXR, and WebGL.

:zap: Performance: A-Frame is a thin framework on top of three.js. Although A-Frame uses the DOM, A-Frame does not touch the browser layout engine. Performance is a top priority, being battle-tested on highly interactive WebXR experiences.

:globe_with_meridians: Cross-Platform: Build VR and AR applications for any headset compatible with a WebXR capable browser. Don't have a headset or controllers? No problem! A-Frame still works on standard desktop and smartphones.

:mag: Visual Inspector: A-Frame provides a built-in visual 3D inspector with a workflow similar to a browser's developer tools and interface similar to Unity. Open up any A-Frame scene and hit <ctrl> + <alt> + i.

:runner: Features: Hit the ground running with A-Frame's built-in components such as geometries, materials, lights, animations, models, raycasters, shadows, positional audio, tracked controllers. Get even further with community components such as particle systems, physics, multiuser, oceans, mountains, speech recognition, or teleportation!

Usage

Example

Build VR and AR scenes in the browser with just a few lines of HTML! To start playing and publishing now, remix the starter example on:

Remix

<html>
  <head>
    <script src="https://aframe.io/releases/1.8.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>

With A-Frame's entity-component architecture, we can drop in community components from the ecosystem (e.g., ocean, physics) and plug them into our objects straight from HTML:

See example

<html>
  <head>
    <script src="https://aframe.io/releases/1.8.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/c-frame/[email protected]/dist/aframe-particle-system-component.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/c-frame/[email protected]/dist/aframe-extras.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fern-solutions/aframe-sky-background/dist/sky-background.umd.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: 15.7"
                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-sky-background top-color="#EBEBF5" bottom-color="#B9B9D2"></a-sky-background>

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

Builds

To use the latest stable build of A-Frame, include aframe.min.js:

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

To check out the stable and master builds, see the dist/ folder.

npm

npm install --save aframe
# Or yarn add aframe

import AFRAME from 'aframe';  // e.g., with Webpack or Vite.

Local Development

git clone https://github.com/aframevr/aframe.git  # Clone the repository.
cd aframe && npm install  # Install dependencies.
npm start  # Start the local development server.

And open in your browser http://localhost:8080.

If you want to test the examples in VR, you need to run it with https:

npm run start:https

Look at the "On Your Network (IPv4)" line in the console, and copy and paste the url to https://hmd.link service. Then open the browser in your headset and type hmd.link in the address bar then click on the copied url that will show up if you're connected to the same network as your machine. You will see a message about the page being dangerous because we're using a self-signed certificate, you can ignore that warning and continue to the page.

Generating Builds

npm run dist

Questions

For questions and support, ask on StackOverflow.

Stay in Touch

And get in touch with the maintainers!

Contributing

Get involved! Check out the Contributing Guide for how to get started.

You can also support development by buying a gorgeous A-Frame t-shirt with exclusive designs

License

This program is free software and is distributed under an MIT License.

aframe (aframevr/aframe)

Searching Database…

17.7K ·GitHub
Aframe
这是什么？A-Frame 是一个 Web 框架，可以直接在浏览器中使用声明式 HTML 构建 3D、AR 和 VR 体验，底层基于 three.js 和 WebXR。
我需要写 JavaScript 吗，还是只用 HTML 就能搭建场景？只用普通的 HTML 标签，比如 a-scene 和 a-box，就能做出完整的 VR/AR 场景；如果需要更多控制，A-Frame 底层也提供完整的 JavaScript 接口，可以访问 DOM、three.js 和 WebXR API。
怎样把 A-Frame 添加到项目中？通过 script 标签引入预构建的 aframe.min.js，或从 npm 安装，然后使用 A-Frame 自定义的 HTML 元素编写场景。
试用的时候需要 VR 头显吗？不需要，A-Frame 在普通的桌面和智能手机浏览器上也能运行，无需头显或手柄；只有要进入真正的 VR/AR 模式时，才需要支持 WebXR 的浏览器。
在本地测试 VR 功能时有哪些需要注意的地方？要在头显中测试，必须通过 HTTPS 运行本地开发服务器；浏览器会把自签名证书标记为不安全，你需要点击警告才能继续访问。
内置的可视化检查器是什么？A-Frame 自带一个可视化 3D 检查器，按 ctrl+alt+i 打开，提供类似 Unity 的界面，可以直接在运行中的场景里调整实体和组件。
我可以用社区组件扩展场景吗？可以，A-Frame 的实体-组件架构允许你直接在 HTML 中加入社区开发的组件，例如物理引擎、粒子系统、海洋效果或传送功能。
它支持哪些头显？任何能通过支持 WebXR 的浏览器连接的头显都可以，包括 Oculus/Meta Quest、HTC Vive 和 Google Daydream，因为 A-Frame 依赖的是标准 WebXR API，而不是专有 SDK。
为什么要用 A-Frame 而不是直接用 three.js？A-Frame 增加了一层声明式、可组合的实体-组件层，并自动处理 WebXR 和 3D 的样板代码，同时仍保留完整的 three.js 访问能力，便于高级定制。
What are similar projects?engine, Babylon.js, three.js, benilla, GDevelop, entt, Hermes3D, AR.js
Which topics is it in?vr, ecs, augmented-reality, virtual-reality, game-engine, gamedev, threejs, webgl, game-development, 3d, audio, animation
Creator
aframevr
Size
921.5 MB
Stars
17.7K
Updated
CommitJul 13Releasev1.8.0Jun 24
Age
11y
Commits · 90 Days