Nougat Predominant Middleware

    co.vire.aframe

    0.6.0-pre-6836b71fcc2a974a1130bb3358e9e6f69d8f63c7 • Public • Published

    A-Frame

    A-Frame

    A web framework for building virtual reality experiences.

    Build Status Coverage Status Downloads Version License

    SiteDocsSchoolSlackBlogawesome-aframe

    Examples

    A-Painter A-Blast A-Saturday-Night Aincraft Musical Forest by @googlecreativelab 360 Image Gallery

    Find more examples on the homepage, A Week of A-Frame, and awesome-aframe.

    Features

    👓 Virtual Reality Made Simple: A-Frame handles the 3D and WebVR boilerplate required to get running across platforms including mobile, desktop, Vive, and Rift just by dropping in <a-scene>.

    ❤️ 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 enthusiasts, educators, artists, makers, kids.

    🌐 Cross-Platform: Build VR applications for Vive, Rift, Daydream, GearVR, and Cardboard. Don't have a headset or controllers? No problem! A-Frame still works on standard desktop and smartphones.

    🔌 Entity-Component Architecture: A-Frame is a powerful framework, 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, WebVR, and WebGL.

    ⚡️ Performance: A-Frame is optimized from the ground up for WebVR. While A-Frame uses HTML, Custom Elements don't touch the browser layout engine. All 3D object updates are all done in memory with little overhead under a single global requestAnimationFrame call.

    🔨 Tool Agnostic: A-Frame works with normal JavaScript DOM APIs and therefore with all libraries such as React, Vue.js, jQuery, or d3.js. Web developers don't have to jump ship to yet another framework, feeling right at home with A-Frame.

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

    📦 Registry: Reuse powerful components that other A-Frame developers have created and shared. The A-Frame Registry collects and curates components similar to the Unity Asset Store. Stand on the shoulders of giants and plug in components right from HTML.

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

    Usage

    Example

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

    Remix

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

    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:

    Remix

    <html>
      <head>
        <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script> 
        <script src="https://unpkg.com/aframe-animation-component@3.2.1/dist/aframe-animation-component.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.0.4/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>

    Builds

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

    <head>
      <script src="https://aframe.io/releases/0.5.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 --save aframe 
    require('aframe')  // e.g., with Browserify or Webpack.

    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:9000.

    Generating Builds

    npm run dist

    Questions

    For questions and support, ask on StackOverflow.

    Stay in Touch

    Contributing

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

    License

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

    Install

    npm i co.vire.aframe

    Homepage

    aframe.io/

    DownloadsWeekly Downloads

    3

    Version

    0.6.0-pre-6836b71fcc2a974a1130bb3358e9e6f69d8f63c7

    License

    MIT

    Last publish

    Collaborators

    • tobiasmanroth