ml-aframe

    0.9.2-rc01 • Public • Published

    /!\ Experimental A-Frame /!\

    /!\ Experimental version of AFrame 0.9.2 adding support for the WebXR API used by MagicLeap helio in 0.96.0. Use at your own risk. Use while figuring out a way to fix the main AFrame lib. /!\

    Working examples: https://mvilledieu.github.io/aframe/examples/

    A-Frame

    A web framework for building virtual reality experiences.

    Build Status

    Coverage Status Downloads Version

    License

    Site

    Docs

    School

    Slack

    Blog

    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

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

    🔌 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, WebVR, and

    WebGL.

    ⚡️ 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 WebVR experiences.

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

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

    🏃 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 scenes in the browser with just a few lines of HTML! To start playing

    and publishing now, remix the starter example on

    :

    Remix Fork

     
    <html>
     
    <head>
     
    <script  src="https://aframe.io/releases/0.9.2/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](https://aframe.io/docs/0.9.2/introduction/entity-component-system.html), we can drop in community

    components from the ecosystem (e.g., ocean, physics) and plug them into our

    objects straight from HTML:

    Remix Fork

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

    And get in touch with the maintainers!

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

    DownloadsWeekly Downloads

    1

    Version

    0.9.2-rc01

    License

    MIT

    Unpacked Size

    21.6 MB

    Total Files

    246

    Last publish

    Collaborators

    • morgan.villedieu