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 — это веб-фреймворк для создания 3D, AR и VR-проектов прямо в браузере с помощью декларативного HTML. Он построен на основе three.js и WebXR.
Нужно ли писать JavaScript или можно создавать сцены только на HTML?Полноценные VR/AR-сцены можно создать простыми HTML-тегами, например a-scene и a-box. Если нужен больший контроль, A-Frame также даёт полный доступ к JavaScript API для DOM, three.js и WebXR.
Как добавить A-Frame в проект?Подключите готовый файл aframe.min.js через тег script или установите A-Frame из npm, затем напишите сцену, используя пользовательские HTML-элементы A-Frame.
Нужен ли VR-шлем, чтобы попробовать?Нет, A-Frame работает в обычных браузерах на компьютере и смартфоне без шлема и контроллеров. Браузер с поддержкой WebXR нужен только для включения настоящего режима VR/AR.
Есть ли подводные камни при локальном тестировании VR-функций?Чтобы тестировать в шлеме, нужно запускать локальный сервер разработки через HTTPS. Браузеры пометят самоподписанный сертификат как опасный, и чтобы продолжить, нужно нажать на кнопку обхода предупреждения.
Что такое встроенный визуальный инспектор?В A-Frame есть визуальный 3D-инспектор, который открывается сочетанием ctrl+alt+i. Он предлагает похожий на Unity интерфейс для настройки сущностей и компонентов прямо внутри работающей сцены.
Можно ли расширять сцены компонентами от сообщества?Да, архитектура «сущность-компонент» в A-Frame позволяет подключать созданные сообществом компоненты, например физические движки, системы частиц, океаны или телепортацию, прямо из HTML.
С какими шлемами это работает?С любым шлемом, доступным через браузер с поддержкой WebXR, включая Oculus/Meta Quest, HTC Vive и Google Daydream. A-Frame опирается на стандартный API WebXR, а не на проприетарный 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