├── ARCHIVE.md └── README.md /ARCHIVE.md: -------------------------------------------------------------------------------- 1 | # awesome-aframe [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) 2 | 3 | A collection of awesome resources for the [A-Frame](https://aframe.io) WebVR 4 | framework. 5 | 6 | This list is synced now and then. For some of the more recent stuff, check out 7 | the recent [A Week of A-Frame](https://aframe.io/blog) roundups on the 8 | [A-Frame blog](https://aframe.io/blog). 9 | 10 | ## Table of Contents 11 | 12 | - [Official Resources](#official-resources) 13 | - [Community](#community) 14 | - [Learning](#learning) 15 | - [Components](#components) 16 | - [Integration](#integration) 17 | - [Scenes](#scenes) 18 | - [Tools](#tools) 19 | 20 | ### Official Resources 21 | 22 | Straight from the horse's mouth. 23 | 24 | - [Official Site](https://aframe.io/) 25 | - [Documentation and Guides](https://aframe.io/docs/) 26 | - [Blog](https://aframe.io/blog/) 27 | - [Examples](https://aframe.io/examples/) 28 | - [Inspector](https://github.com/aframevr/aframe-inspector) 29 | - [Registry](https://github.com/aframevr/aframe-registry) 30 | - [Presentation Kit](https://github.com/aframevr/aframe-presentation-kit) 31 | - [School](https://github.com/aframevr/aframe-school) 32 | - [Command Line Interface](https://github.com/aframevr/angle) 33 | - [Twitter](https://twitter.com/aframevr) 34 | 35 | Scenes built by the A-Frame team. 36 | 37 | - [A-Painter](https://aframe.io/a-painter/) 38 | - [A-Blast](https://aframe.io/a-blast/) 39 | 40 | ### Community 41 | 42 | [Community](https://aframe.io/community/) 43 | 44 | ### Learning 45 | 46 | Learn about A-Frame. 47 | 48 | #### Articles 49 | 50 | ##### Introduction 51 | 52 | - [aframe.io](https://aframe.io/docs/) 53 | - [Wikipedia — A-Frame]() 54 | - [Wikipedia — Entity-Component-System](https://en.wikipedia.org/wiki/Entity_component_system) 55 | 56 | ##### Tutorials 57 | 58 | - [Minecraft in WebVR with HTML Using A-Frame](https://css-tricks.com/minecraft-webvr-html-using-frame/) - Tutorial on creating a [Minecraft](https://minecraft.net/)-like scene in WebVR 59 | - [First Steps in VR](https://24ways.org/2016/first-steps-in-vr) - Building a maze game in VR 60 | - [Getting Started With A-Frame](http://www.tomango.co.uk/thinks/getting-started-aframe) - Building the Olympic rings using A-Frame 61 | - [Relative Positioning in A-Frame](https://medium.com/immersion-for-the-win/relative-positioning-in-a-frame-d839fc0e3249) - How to use `` as a wrapper to create local coordinate spaces 62 | - [Building a Simple Web VR UI with A-Frame](https://blog.neondaylight.com/build-a-simple-web-vr-ui-with-a-frame-a17a2d5b484) - Building a `set-sky` component that changes the background when an entity is clicked 63 | - [Hands-on With Virtual Reality Using A-Frame, React, and Redux](https://medium.com/immersion-for-the-win/hands-on-with-virtual-reality-using-a-frame-react-and-redux-bc66240834f7) 64 | - [A-Frame: The Easiest Way to Bring VR to the Web Today](https://www.sitepoint.com/a-frame-the-easiest-way-to-bring-vr-to-the-web-today/) 65 | 66 | ##### Case Studies 67 | 68 | - [Why iStaging Chose A-Frame](https://aframe.io/blog/istaging/) - Building a large-scale real estate tour application 69 | - [Building Ghost Train Builder](https://aframe.io/blog/ghost-train-builder/) - Building a Halloween ghost train builder application 70 | - [Building Cardboard Dungeon with A-Frame](https://hacks.mozilla.org/2016/03/building-cardboard-dungeon-with-a-frame) - A case study on building a simple dungeon game using A-Frame 71 | - [Head Tracked Transformations](https://medium.com/humane-virtuality/head-tracked-transformations-e7102d3c9789) - How to look behind an object in VR if you can't walk around it 72 | - [The Bow & Arrow is Virtual Reality's "Hello, World"](https://medium.com/@jamesbpollack/the-bow-arrow-is-virtual-realitys-hello-world-b0556faa3ef8) - Building a bow and arrow for tracked controllers 73 | 74 | #### Recordings 75 | 76 | Videos and podcasts. 77 | 78 | ##### Tutorials 79 | 80 | - [A-Frame Tutorials — Sonar Systems](https://www.youtube.com/watch?v=dv6_C4UqTfs&list=PLRtjMdoYXLf4inSULAHyCMqpIUj4cmBTr) - A-Frame video tutorial series on YouTube 81 | - [A-Frame Tutorials — Alexandra Etienne](https://www.youtube.com/watch?v=XFv55TajSAg&list=PLUtkqA7NXVH7ctoJYhsh4xqJn3iWMpP30) - A-Frame video tutorial series on YouTube 82 | - [Using d3.js with A-Frame](https://www.youtube.com/watch?v=Tb2b5nFmmsM) - Introduction to data visualizations in A-Frame with d3.js 83 | - [Building an A-Frame Vive App from Scratch](https://www.youtube.com/watch?v=UcEMhuha8DA) - In Neocities 84 | 85 | ##### Talks 86 | 87 | - [A-Frame — Kevin Ngo](https://www.youtube.com/watch?list=PLo3w8EB99pqIj_XNvNEMAaBtL_jyxSLmz&v=FWqgP3-9mOw) - 5-minute A-Frame talk at the [W3C Workshop on Web & Virtual Reality](https://www.w3.org/2016/06/vr-workshop/) [[Slides]](https://github.com/ngokevin/w3c-webvr-presentation) 88 | - [Getting Started with Virtual Reality on the Web — Ada Rose Edwards](https://www.youtube.com/watch?v=-GkvYD6dNI8) - Talk at [London Web Perf 2017](https://ldnwebperf.org/events/?mth=1&yr=2017) with a live multiuser demo 89 | - [How to Build Pokemon Go in 100% JS — Jess Telford](https://www.youtube.com/embed/kGXpgAb3Sbk?start=3970&end=5735) - Talk at [JSConf AU 2016](http://2016.jsconfau.com/) [[Slides]](https://jesstelford.github.io/js-go-presentation/#/0/0) 90 | - [A-Frame: VR for Developers — Diego Marcos & Kevin Ngo](https://www.youtube.com/watch?v=wRqoSdPZQBY) - Talk on A-Frame at the [SFHTML5 "WebVR Ecosystem and API Update" meetup](https://www.meetup.com/sfhtml5/events/230072340/) [[Slides]](https://github.com/ngokevin/aframe-sfhtml5-presentation) 91 | - [Building Virtual Reality on the Web — Kevin Ngo](https://www.youtube.com/watch?v=Ucsshrblkok) - Talk on A-Frame at NingJS 2016 [[Slides]](http://ngokevin.github.io/ningjs-presentation/#/) 92 | - [Enter the Matrix, Exploring Your Kubernetes Cluster in Virtual Reality](https://www.youtube.com/watch?v=RyKzTb0Q0O4) - Talk on building a room-scale [Kubernetes](https://kubernetes.io/) browser in the HTC Vive at [KubeCon 2016](http://events.linuxfoundation.org/events/kubecon) 93 | 94 | ##### Podcasts 95 | 96 | - [WebVR — Josh Carpenter and Kevin Ngo](http://shoptalkshow.com/episodes/254-webvr-josh-carpenter-kevin-ngo/) - Podcast with Shop Talk Show 97 | - [Enabling the Open Metaverse with WebVR, A-Frame, and Servo — Diego Marcos & Chris Van](http://voicesofvr.com/471-mozilla-on-enabling-the-open-metaverse-with-webvr-a-frame-and-servo/) - Podcast with Voices of VR 98 | 99 | ### Components 100 | 101 | Community components. To create and share a component, see 102 | [angle](https://github.com/aframevr/angle)'s `initcomponent` tool. For curated 103 | components, see the [A-Frame Registry](https://aframe.io/aframe-registry/). 104 | 105 | - [Along Path](https://github.com/protyze/aframe-alongpath-component) - Interpolating an entity's position along a path 106 | - [Always Fullscreen](https://github.com/protyze/aframe-always-fullscreen-component) - Provide ways to enable Fullscreen on iOS (Scroll to Minimal-UI) and Android/Desktop (Fullscreen API) 107 | - [Ammo Physics Component](https://github.com/jeromeetienne/threex.ammo) - Library integrating [three.js](https://threejs.org/) and [ammo.js](https://github.com/kripken/ammo.js) to enable physics in objects 108 | - [Animation](https://ngokevin.github.io/aframe-animation-component) - New and improved animation system using components. [[Code]](https://github.com/ngokevin/aframe-animation-component) 109 | - [Asset Lazy Load](https://github.com/youmustfight/aframe-asset-lazy-load) - Assign asset loading order and delays 110 | - [Asset On-Demand](https://github.com/protyze/aframe-asset-on-demand-component) - Load Assets dynamically when needed (and properly clean them up if not) 111 | - [Audio Visualizer](https://github.com/ngokevin/aframe-audio-visualizer-components) - Audio visualizations using WebAudio API 112 | - [Broadcast](https://github.com/ngokevin/aframe-broadcast-component) - Multiuser with WebSockets 113 | - [ChartBuilder](https://github.com/impronunciable/aframe-chartbuilder-component) - Use [ChartBuilder](http://quartz.github.io/Chartbuilder) charts 114 | - [Checkpoint Controls](https://github.com/donmccurdy/aframe-extras/blob/master/src/controls/checkpoint-controls.js) - Eased linear locomotion between designated hotspots 115 | - [Collider, Explode, Spawner](https://github.com/dmarcos/a-invaders/tree/master/js/components) - Collection of components for collision, geometry explosions, and entity spawning 116 | - [Crawling Cursor](https://github.com/jujunjun110/aframe-crawling-cursor) - Cursor projected onto surfaces 117 | - [Crease](https://github.com/andreasplesch/aframe-crease-component) - Creased shading 118 | - [Chromakey Material](https://github.com/nikolaiwarner/aframe-chromakey-material) - Chromakey material for green screen effects 119 | - [Cubemap](https://github.com/bryik/aframe-cubemap-component) - Create a skybox from a cubemap 120 | - [Daydream Controller](https://github.com/ryanbetts/aframe-daydream-controller-component) - Daydream controls 121 | - [Drag Look](https://github.com/mayognaise/aframe-drag-look-controls-component) - Look controls in the opposite direction with changing cursor style 122 | - [Draw](https://github.com/maxkrieger/aframe-draw-component) - HTML5 `` as a material texture, with support for extension components 123 | - [Effects System](https://github.com/wizgrav/aframe-effects) - A VR-ready post-processing framework for A-Frame 124 | - [Entity Generator](https://github.com/ngokevin/aframe-entity-generator-component) - Generate entities 125 | - [Event Set](https://github.com/ngokevin/aframe-event-set-component) - Set properties in response to events, replacement for declarative events 126 | - [Extras](https://github.com/donmccurdy/aframe-extras) - Don's collection of A-Frame components 127 | - [Extrude and Lathe](https://github.com/JosePedroDias/aframe-extrude-and-lathe) - Extrude and lathe geometries 128 | - [Faceset](https://github.com/andreasplesch/aframe-faceset-component) - Geometry from vertices and faces 129 | - [Fence](https://github.com/atomicguy/aframe-fence-component) - Set boundaries on entity position 130 | - [Firebase](https://github.com/ngokevin/aframe-firebase-component) - Multiuser with Firebase 131 | - [Fit Texture](https://github.com/nylki/aframe-fit-texture-component) - Automatically scale entities relative to their texture, so you don't need to set width/height manually 132 | - [Force-directed Graph](https://github.com/vasturiano/aframe-forcegraph-component) - Represent a graph data structure in a 3D force-directed iterative layout, using [d3-force-3d](https://github.com/vasturiano/d3-force-3d) for the physics simulation engine. 133 | - [FPS Look](https://github.com/cemkod/aframe-fps-look-component) - Facilitates controlling entity rotation directly with captured mouse 134 | - [Gamepad Controls](https://github.com/donmccurdy/aframe-gamepad-controls) - Gamepad controls using HTML5 Gamepad API 135 | - [GIF](https://github.com/gtk2k/gtk2k.github.io/tree/master/animation_gif) - Display GIF as a texture by using a Canvas 136 | - [Google Blocks](https://github.com/archilogic-com/aframe-gblock) - Display content from Google Blocks 137 | - [Gradient Sky](https://github.com/zcanter/aframe-gradient-sky) - Use two colors to create a gradient shader for colorful skies 138 | - [Grid Helper](https://github.com/dbradleyfl/aframe-gridhelper) - Create customizable grids 139 | - [Heatmap3d](https://github.com/morandd/aframe-heatmap3d) - Yet another heatmap/heightmap component 140 | - [Height Grid](https://github.com/andreasplesch/aframe-heightgrid-component) - Terrain 141 | - [Hexmap](https://github.com/morandd/aframe-hexgraph-hexmap) - A hex grid/map for data viz (inspired by deck.gl's hexmap layer) 142 | - [href](https://github.com/gasolin/aframe-href-component) - Link to other pages using cursor component 143 | - [HTML Texture](https://github.com/scenevr/htmltexture-component) - Using HTML as a texture, powered by html2canvas 144 | - [Interpolation](https://github.com/scenevr/interpolation-component) - Interpolate positional and rotational updates for entities, useful for fetching from server for multiplayer 145 | - [k-frame](https://github.com/ngokevin/k-frame) - Kevin's collection of A-Frame components 146 | - [Keyboard](https://github.com/richardanaya/aframe-keyboard) - Full VR keyboard for use with WebVR controllers 147 | - [L-System](https://github.com/nylki/aframe-lsystem-component) - Render [Lindenmayer](https://en.wikipedia.org/wiki/L-system) systems 148 | - [Layout](https://github.com/ngokevin/aframe-layout-component) - 3D layout of child entities 149 | - [Leap Hands](https://github.com/openleap/aframe-leap-hands) - [Leap Motion](https://www.leapmotion.com/) controller support 150 | - [Lens Flare](https://github.com/mokargas/aframe-lensflare-component) - Lens flare 151 | - [Look-At and Billboard](https://github.com/blairmacintyre/aframe-look-at-billboard-component) - Component to tell an entity to face another entity, or to face the camera 152 | - [Mario Star Texture](https://github.com/casonclagg/aframe-mario-star-component) - Texture that cycles colors like stars in Mario using canvas 153 | - [Mesh Line](https://github.com/andreasplesch/aframe-meshline-component) - Draw thick lines 154 | - [Minecraft Avatar Components](https://jeromeetienne.github.io/threex.minecraft/a-frame/build/aframe-minecraft.js) - Allows the creation, control, and custom skins on Minecraft-like characters 155 | - [Motion Capture](https://github.com/dmarcos/aframe-motion-capture-components/) - Record and replay headset and controller pose and events 156 | - [Mouse Cursor Component](https://github.com/mayognaise/aframe-mouse-cursor-component) - Add interaction to the hardware mouse, by raycasting from `XY` position on canvas 157 | - [Multitouch-look-controls](https://github.com/morandd/aframe-multitouch-look-controls) - Touch-driven freelook camera; drop-in replacement for look-controls 158 | - [No-click Look Controls](https://github.com/alexrkass/aframe-no-click-look-controls) - Intuitive desktop view controls without requiring mouse click + drag 159 | - [Ocean](https://github.com/donmccurdy/aframe-extras/blob/master/src/primitives/a-ocean.js) - Flat-shaded ocean primitive and component, with animated waves 160 | - [Orbit Controls](https://github.com/subsumo/aframe-orbit-controls) - Orbit camera around an entity 161 | - [Orbit Controls Component](https://github.com/tizzle/aframe-orbit-controls-component) - Allow desktop users to rotate the camera around an object 162 | - [Particle System](https://github.com/IdeaSpaceVR/aframe-particle-system-component) - Particle systems (e.g., rain, dust, snow, fire) 163 | - [Passthrough](https://github.com/flysonic10/aframe-passthrough) - Show a video feed from the device's camera 164 | - [Persist Component](https://github.com/Utopiah/aframe-persist-component) - Use localStorage to make data persist over experiences 165 | - [Physics + Vive Controls](https://github.com/donmccurdy/aframe-extras/tree/master/src/misc) - `grab` and `sphere-collider` components for combining the HTC Vive's controllers with the [`aframe-physics-system`](https://github.com/donmccurdy/aframe-physics-system) component 166 | - [Physics](https://github.com/donmccurdy/aframe-physics-system) - Rigid-body physics using [Cannon.js](http://www.cannonjs.org/) 167 | - [Pipe](https://github.com/jellix79/aframe-pipe-component) - A pipe with inner and outer radii 168 | - [Plot](https://github.com/mikebolt/aframe-plot-component) - Render 3D plots using mathematical functions or data. 169 | - [PLY Loader](https://github.com/donmccurdy/aframe-extras/tree/master/src/loaders) - Model loader for `.PLY` models, wrapping [`THREE.PLYLoader`](https://threejs.org/examples/webgl_loader_ply.html) 170 | - [Polygon](https://github.com/andreasplesch/aframe-polygon-primitive) - `n`-sided polygons 171 | - [Proxy Controls](https://proxy-controls.donmccurdy.com/) - Connect input devices from your desktop to your mobile phone with [WebRTC data channels](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Using_data_channels) 172 | - [Randomizer](https://github.com/ngokevin/aframe-randomizer-components) - Set random values 173 | - [Scatterplot](https://github.com/zcanter/aframe-scatterplot) - Scatterplot data visualization 174 | - [Selectable](https://github.com/scenevr/selectable-component) by [@scenevr](https://twitter.com/scenevr) - Click on an entity to select it (handy for editors) 175 | - [Shake-to-Show](https://github.com/rdub80/aframe-shake2show-component) - Using shake.js to toggle UI 176 | - [Slice9](https://github.com/fernandojsg/aframe-slice9-component) - 9-Slice for creating sharp panels and tooltips for UI 177 | - [Sprite](https://github.com/tizzle/aframe-sprite-component) - Creates bitmap images that always face the camera 178 | - [Star](https://github.com/andreasplesch/aframe-star-component) - 2D stars 179 | - [Stereo](https://github.com/oscarmarinmiro/aframe-stereo-component) - Enable rendering different entities for each eye, using three.js layers so you can render 3D stereoscopic videos (full and half-dome) 180 | - [Stereo Cube](https://github.com/wallabyway/aframe-stereocube) - Use stereoscopic cube-map textures (i.e., left and right eye textures) 181 | - [SVG File](https://github.com/7dir/aframe-svgfile-component) - Load basic SVG files as 3d geometry 182 | - [Teleport Controls](https://github.com/fernandojsg/aframe-teleport-controls) - Teleportation with tracked controllers 183 | - [Template](https://github.com/ngokevin/kframe/tree/master/components/template) - Integration with Handlebars, Jade, mustache, Nunjucks JS template engines 184 | - [Terrain Model](https://github.com/bryik/aframe-terrain-model-component) - Generating terrains using TerrainLoader 185 | - [Text Wrap](https://github.com/maxkrieger/aframe-textwrap-component) - Wrapping text dynamically rendered onto the `draw` component 186 | - [Text Geometry](https://github.com/ngokevin/kframe/tree/master/components/text-geometry) - Polygonal text 187 | - [THREE Loader](https://github.com/donmccurdy/aframe-extras/tree/master/src/loaders) - Model loader for `.json` models, wrapping THREE.JSONLoader and THREE.ObjectLoader 188 | - [Trigger Box](https://github.com/Utopiah/aframe-triggerbox-component) - A component that emits an event when it enters or leaves a predefined area 189 | - [Tube](https://github.com/donmccurdy/aframe-extras/blob/master/src/primitives/a-tube.js) - Cylindrical primitive that shapes itself to a given path 190 | - [UI Components](https://github.com/gmarty/aframe-ui-components) - A collection of components related to UI 191 | - [UI Modal](https://github.com/IdeaSpaceVR/aframe-ui-modal-component) - Show dialog box or a menu in front of the camera 192 | - [UI Widgets](https://github.com/caseyyee/aframe-ui-widgets) - Another set of UI components, including buttons, switchs, sliders, and knobs 193 | - [Universal Controls](https://github.com/donmccurdy/aframe-extras/tree/master/src/controls) - Refactored A-Frame controls that supports gamepad, HMD, keyboard, mouse + pointerlock, touch-to-move, with [physics](https://github.com/donmccurdy/aframe-physics-system) compatibility 194 | - [Video Controls](https://github.com/oscarmarinmiro/aframe-video-controls) - Video controls (play/pause/jump) for A-Frame video assets 195 | - [Vive Cursor](https://github.com/bryik/aframe-vive-cursor-component) - A cursor for the HTC Vive's controllers 196 | - [WebVR Controller](https://github.com/richardanaya/aframe-webvr-controller) - HTC Vive controllers 197 | - [WebVR-UI](https://googlevr.github.io/webvr-ui/examples/aframe.html) - "Enter VR" Button by Google VR [[Code]](https://github.com/googlevr/webvr-ui/blob/master/examples/aframe.html) 198 | 199 | ### Materials 200 | 201 | - [Draw](https://github.com/mayognaise/aframe-draw-shader) - Render from canvas 202 | - [HTML](https://github.com/mayognaise/aframe-html-shader) - Render from HTML 203 | - [Video](https://github.com/mayognaise/aframe-video-shader) - iOS-compatible video material 204 | - [GIF](https://github.com/mayognaise/aframe-gif-shader) - Render animated GIFs 205 | 206 | ### Integration 207 | 208 | Integration with existing tools, frameworks, and libraries. 209 | 210 | - [aframe-react](https://github.com/ngokevin/aframe-react) - Thin and performant React layer on top of A-Frame 211 | - [D3.js](http://blockbuilder.org/search#text=aframe) - A-Frame data visualizations with D3.js 212 | - [Vue.js + TweenMax demo](http://codepen.io/cheapsteak/pen/dGXZjx?editors=101) - Example of A-Frame with Vue.js for reactive components 213 | - [aframe-templating-examples](https://github.com/ngokevin/aframe-templating-examples) - A-Frame with templating engines such as Handlebars, mustache, Nunjucks 214 | - [SpineFrame](https://github.com/JoshGalvin/SpineFrame) - Component for 2D sprite animation with [Spine](http://esotericsoftware.com/) 215 | - [Meteor](https://github.com/vladbalan/meteor-aframe) - A-Frame with [Meteor](https://www.meteor.com/), a JavaScript app framework 216 | - [Altspace](https://github.com/AltspaceVR/aframe-altspace-component) - Integration with AltspaceVR 217 | - [Drupal](https://www.drupal.org/project/aframe) - Drupal module for integration with A-Frame 218 | - [Mixin Style Sheets](https://github.com/ngokevin/aframe-mss) - CSS-like stylesheets for A-Frame for declaring mixins [[Code]](https://github.com/ngokevin/aframe-mss) 219 | - [aframe-d3-3d-graph-example](http://cjroth.com/aframe-d3-3d-graph-example/) - An example of a 3D weighted graph using D3 and Aframe. 220 | - [aframe-d3-3d-bars-example](http://cjroth.com/aframe-d3-3d-bars-example/) - An example of a 3D bar chart using D3 and Aframe. 221 | - [aframe-phantomjs-continuous-streaming](https://github.com/cjroth/aframe-phantomjs-continuous-streaming) - Browse the web in VR by live streaming a web page into A-Frame using PhantomJS and ffmpeg 222 | - [aframe-keyboard](https://github.com/cjroth/aframe-keyboard) - A virtual-reality keyboard and text editor in A-Frame 223 | - [Virtual World Framework](https://github.com/NikolaySuslov/livecodingspace) - A-Frame with [Virtual World Framework](https://github.com/virtual-world-framework/vwf), a JavaScript app framework for building collaborative, immersive applications with live coding support 224 | - [aframe-next-static](https://github.com/michaltakac/aframe-next-static) - This boilerplate leverages extremely simple deployment flow from Zeit's Now, now available for WebVR with A-Frame and React 225 | 226 | ### Scenes 227 | 228 | - [a-invaders](http://swimminglessonsformodernlife.com/a-invaders) - Space invaders game. [[Code]](https://github.com/dmarcos/a-invaders) 229 | - [DrawVR](http://drawvr.com/) - DrawVR's portal leading to many A-Frame experiences including stores, games, rides, theaters, and scenes 230 | - [Cardboard Dungeon](https://chrismwaite.github.io/cardboard-dungeon) - A first-person dungeon crawler designed for mobile. [[Code]](https://github.com/chrismwaite/cardboard-dungeon) 231 | - [Don McCurdy's Sandbox](https://sandbox.donmccurdy.com/vr/) - Don McCurdy's A-Frame scenes including [MagicaVoxel](https://ephtracy.github.io/) models, physics playgrounds, and controls [[Code]](https://github.com/donmccurdy/aframe-extras) 232 | - [Kevin Ngo's Scenes](https://ngokevin.github.io/kframe/) - Kevin Ngo's A-Frame scenes including MagicaVoxel models, audio visualizations, and a Minecraft demo [[Code]](https://github.com/ngokevin/kframe) 233 | - [Aztec Pong](http://meta-meta.github.io/aztec-pong) - Play Pong floating atop an Aztec monument. [[Code]](https://github.com/meta-meta/aztec-pong) 234 | - [Hello, Pizza!](http://carpedmt.github.io) - If a pizza spins in a forest and no one is around to eat it, does it make a sound? [[Code]](https://github.com/carpedmt/carpedmt.github.io) 235 | - [Alien Abduction](http://vedm.xyz/abductionvr) - Alien Abduction demo 236 | - [Mars: An Interactive Journey](http://wapo.st/marsvr) - Explore Mars in virtual reality. Published by the Washington Post and created by a group at University of Texas at Austin. Read [their thoughts on A-Frame and WebVR](https://developer.washingtonpost.com/pb/blog/post/2016/03/11/vr-for-all) 237 | - [360 Syria](http://360syria.com/) - View the devastation of barrel bombs in Aleppo, Syria; created in partnership with [AllJunior](http://junior.io) and [Amnesty International UK](https://www.amnesty.org.uk) 238 | - [Tron World - Carpet Ride](http://www.alexoviedo999.com/vr-carpet-ride/tron-world/) 239 | - [SkyIslands VR](https://www.skyislandsvr.com/) - Strange virtual landscapes 240 | - [Island](https://sandbox.donmccurdy.com/vr/island) - Voxel-based island in the ocean 241 | - [Tiny Hands for Trump](http://tinyhandsfortrump.net) - Donald Trump parody 242 | - [Sketch VR](https://uniform-futures.github.io/sketch-vr) - Doodle on paper, take a picture, and view it in VR. [[Code]](https://github.com/uniform-futures/sketch-vr) 243 | - [EVA](http://www.jmvisualcreativity.es/vr_eva) - Prototype mecha in lava 244 | - [Space Shark Room](https://liooil.neocities.org/VR_webStuff/room+07/room07.html) - Hinduist shark cage in space 245 | - [Metal Gear REX](http://www.jmvisualcreativity.es/vr_metal) - Return to Shadow Moses… SNAKE! 246 | - [Vapor Wave](https://liooil.neocities.org/VR_webStuff/vaporWave.html) - Trippy purgatory room 247 | - [Jump Island](http://www.jmvisualcreativity.es/vr_jump/) - Can you make it to the top? 248 | - [Roof Escape](http://www.jmvisualcreativity.es/vr_roof) - Parkour! 249 | - [TumbVR](http://tbaloo.com/tumbvr/theonlymagicleftisart) - VR gallery for Tumblr 250 | - [VR Wiki Museum](http://vrwikimuseum.com/wiki/Stegoceras) - Full Wikipedia in VR 251 | - [Where is Piers Morgan Disliked the Most?](http://almossawi.com/aframe-d3-visualization/demo) - Data visualization with [D3](https://d3js.org/) 252 | - [Missed Connections](http://armthethinker.github.io/webVR-experiments/5--missed-connections.html) - Visualization of Craigslist "Missed Connections" section 253 | - [Aeon](http://aeon.horoman.com/) - Aeon is a 3D environment with VR support, where the user runs an island that tells about the prequel to the main story of Aeon 254 | - [SlideAmaze](http://slideamaze.com/) - Turns your slideshow presentation [into a 3D maze](http://fouryears.eu/2016/07/27/slide-a-maze/) 255 | - [Outside Lands VR](https://ngokevin.github.io/aframe-magicavoxel-projects/outsidelands) - VR preview of the San Francisco Outside Lands music festival 256 | - [Multiplayer Tic-tac-toe](http://jsbin.com/janevom/edit?html,output) - Prototype of networked Vives playing Tic-tac-toe. [[Video](https://www.youtube.com/watch?v=vGjIWwozOU4) 257 | - [30 Days of WebVR](https://codepen.io/collection/AKkywv) - One order of A-Frame and WebVR per day, all on CodePen 258 | - [Dominoes](https://bryik.github.io/aframe-dominoes) - Demonstration for the HTC Vive with physics using dominoes. [[Code]](https://github.com/bryik/aframe-dominoes/blob/master/index.html), [[Video]](https://www.youtube.com/watch?v=gU-P-56kAnI) 259 | - [Ball Throw](https://bryik.github.io/aframe-ball-throw) - Throw balls at blocks using Vive controllers and [Don McCurdy's](https://twitter.com/donrmccurdy) [physics](https://github.com/donmccurdy/aframe-physics-system). [[Code]](https://github.com/bryik/aframe-ball-throw) 260 | - [Lyrics VR](https://gurumukhi.github.io/vr-ram/demos/lyricsVR/index.html) - Watch lyrics fly past you in time with the music. [[Code]](https://github.com/gurumukhi/vr-ram/tree/gh-pages/demos/lyricsVR) 261 | - [Rubik's Cube](https://tushararora.github.io/rubiks-cube/) - Spinning Rubik's Cube featuring a multicolored-cube component. [[Code]](https://github.com/tushararora/tushararora.github.io/tree/master/rubiks-cube) 262 | - [Shopify - City Shoes](https://shopifyvr.myshopify.com/) - Shop in VR! Pick up some trainers and see if they match your swagger 263 | - [Vrogger](https://carbonfive.github.io/vrogger) - Frogger in VR. Hop and get across the road! 264 | - [Design Portfolio](http://eddiebarkman.com/VR-Design-Portfolio/) - About pages in 3D space with neat transitions 265 | - [Stand at the Edge of Geologic Time](https://apps.npr.org/rockymountain-vr/) - A virtual-reality tour from [NPR](http://www.npr.org/) of Rocky Mountain National Park. [[Code]](https://github.com/nprapps/rockymountain) 266 | - [Earth Rover](https://www.hackster.io/RONDAGDAG/control-your-earth-rover-in-virtual-reality-15a9fe) - Controlling a physical robot from outer space using the [Intel Edison](https://software.intel.com/iot/hardware/edison) and Leap Motion 267 | - [Imagined Reality](https://bryik.github.io/aframe-metaverse-contest/examples/imagined-reality.html) - Stereoscopic cubemaps, taken from winners of [OTOY’s Render the Metaverse](https://home.otoy.com/vr-competition/) contest 268 | - [Star Crossed](http://vrweb.io/p/starCrossed) - Piano and stars 269 | - [Procedural Forest](https://nylki.github.io/aframe-lsystem-component/forrest/) - A procedural forest with procedural trees using the [L-System Component](https://github.com/nylki/aframe-lsystem-component) 270 | - [iStaging LiveTour](http://vrviewer.istaging.co/#!/684173) - 360° real estate tours with a neat mini-map 271 | - [Choose Your Own VR](https://github.com/dannielle/tinier-house) - Which cup will you choose? 272 | - [Cat Garden](http://dirosa.me/cat-garden/) - Float through a space of cats and balloons 273 | - [Virtual Symphony](https://flexingdream.github.io/aframe_demo) - Experience music in a new way on this symphonic trip through Martin Garrix and Third Party - Lions in the Wild 274 | - [Brexit in Berlin](https://popathon.github.io/Gexit/hq.html) - Listen to Europeans talk and react to Brexit 275 | - [Virtual Symphony II](https://musicpua.firebaseapp.com/) - Fly through particles, eagles, and horses while listening to *Chainsmokers - Inside Out (Remix)* 276 | - [VRVisitors](https://georational.github.io/VRVisitors/VRVisitors.html) - Multi-user gallery of photogrammetric museum artifacts 277 | - [Head-Tracked Transformations](https://armthethinker.github.io/webVR-experiments/6--head-tracked-transformations.html) - VR UX prototype of transforming objects’ orientations with your head to enhance VR experiences that don’t have positional tracking. Read the instructions listed at [#6](https://armthethinker.github.io/webVR-experiments/). [[Code]](https://github.com/armthethinker/webVR-experiments) 278 | - [Weather Room](https://weatherroom.herokuapp.com/) - What’s the forecast for WebVR? Sunny with no chance of rain. [[Code]](https://github.com/sebscholl/weatherroom) 279 | - [CinemVR Design Prototype](http://valentin.design/vr) - Design prototype of a VR cinema 280 | - [JM Visual Creativity](http://vr.jmvisualcreativity.es) - Web designer and motion-graphics artist Jose Manuel Serna’s portfolio 281 | - [WebVR Forest](https://danstrong.com/webvr) - At A-Frame National Park 282 | - [Breathing Scape](http://www.jon-ibe.be/aframe) - A tree-adorned hill that slowly breathes 283 | - [A-Runner](https://joshgalvin.github.io/arunner) - Infinite runner game with cubes 284 | - [Zenspot](https://s3-us-west-2.amazonaws.com/zenpath/pz/main.html) - Relaxing nature experiences with soothing music 285 | - [Force Push](https://sandbox.donmccurdy.com/vr/force-push/) - Become a block bender 286 | - [Low Nausea FPS Locomotion](http://farbs.org/lownauseavrfps) - Locomotion prototype for using 6DoF controllers (e.g., HTC Vive's) to grab and swing through scenes 287 | - [WebVR Soccer Stadium Complex](https://s3.amazonaws.com/cassell-webvr/webvr-soccer-stadium-multiplex/index.html) - Watch several video feeds at once in a soccer stadium. [[Code]](https://github.com/cassell/webvr-soccer-stadium-multiplex) 288 | - [Trident](https://codepen.io/bryik/pen/XKWgvK) - Code experiment with cursor events in d3.js 289 | - [VR Inception School](https://output.jsbin.com/pisaje) - Learn a bit about WebVR in WebVR 290 | - [GuriVR](https://gurivr.com/) - Create sharable VR scenes using natural language and zero code. [[Code]](https://github.com/opennewslabs/guri-vr) 291 | - [VR Space Builder](http://vr.greenbushlabs.com/) - Simple VR builder for kids using a form to import models and images 292 | - [WebVR API Simulation Extension](https://chrome.google.com/webstore/detail/webvr-api-emulation/gbdnpaebafagioggnhkacnaaahpiefil) - Run WebVR 1.0 content without a supported headset or even a compatible browser/platform. Great for development 293 | - [WebVR Solar System](http://vrspace.jmvisualcreativity.es) - Solar System using A-Frame 294 | - [Track](https://samsunginter.net/a-frame-demos/racer) - Zooming on the track with the ocean water reflecting the sunset sky. [[Code]](https://github.com/SamsungInternet/a-frame-demos/blob/gh-pages/racer/index.html) 295 | - [AaMAZE Music Festival](http://vr.aamaze.dk/) - Fully responsive official VR website for the AaMAZE music festival in Denmark 296 | - [Heart](https://s3.amazonaws.com/vr-asset-repo/heart_demo_slack.html) - An educating and interactive tour of the heart. But a life is at stake 297 | - [Miradas 360](https://miradas360.github.io/miradas360-01) - 360° experiences created by media-production teams. [[Code]](https://github.com/Miradas360/miradas360-01) 298 | - [Interactive 360° Videos](https://s3.amazonaws.com/hapyak_demos/interactive360video/edit.html) - Upload and edit 360°-interactive videos by overlaying DOM elements 299 | - [Unity Exporter to A-Frame](https://github.com/if1live/unity-scene-web-exporter) - Export Unity scenes to three.js or A-Frame with lightmapping 300 | - [WordPress Template](https://www.construktiv.de/imagine/?p=557) - WordPress template that displays the four most recent posts in VR 301 | - [Web Speech API Test](https://codepen.io/bryik/pen/mErOOR?editors=0010) - A demo of the Speech Recognition API to change object colors 302 | - [Apollo 11 Scan](http://math.nist.gov/~SRessler/aframe/ebd/projects/apollo/) - View the inside of the Apollo 11 Command Module, thanks to the [National Air and Space Museum](https://airandspace.si.edu/) 303 | - [Covo](https://s3-us-west-1.amazonaws.com/geopogo/covo/aframe_0_1_0/index.html) - Architectural visualization with baked global illumination 304 | - [TrippyVR.Tech](http://trippyvr.tech) - A showcase of various trippy VR experiences 305 | - [Asteroids](https://headshotvr.herokuapp.com/) - FPS of Asteroids made with A-Frame and React 306 | - [ScreenVR](https://jonathanzwhite.github.io/screenvr) - Use your desktop in the Web in VR 307 | - [Let It Snow](https://surebak.github.io) - Snowflake maker 308 | - [City Builder](https://kfarr.github.io/aframe-city-builder) - Room-scale city builder. [[Code]](https://github.com/kfarr/aframe-city-builder) 309 | - [Low-Poly Forest Scene](http://forestvr.onepopcorn.com/) - Scene with snow and low-poly forest 310 | - [Tarski's Truth Machine](https://apps.tlt.stonybrook.edu/tarski/) - Tarski's Truth Machine for the HTC Vive 311 | - [Tattoo Simulator](http://www.tattoosim.com/) - **NSFW (Nudity)** Place tattoos on a human model 312 | - [Aincraft](https://ngokevin.github.io/kframe/scenes/aincraft/) - Room-scale Minecraft demo with tracked controllers 313 | - [Band Explorer VR](https://bandexplorervr.com/) - Spotify browser 314 | - [The Hall](https://cecropia.github.io/thehallaframe/) - Museum that works across all VR devices 315 | - [CityViewR](https://runhar.github.io/CityViewR/) - Open data for smart cities 316 | - [MathworldVR](https://vr.sld.gs/mathworldvr/) - Room-scale 3D graphing calculator 317 | - [Dashboard VR](http://valcourgames.com/index.php/applications/dashboard-vr) - Displays real-time local information to the user such as weather, stocks, and news headlines 318 | - [2017](http://2017.ronikdesign.com/) - Holiday snow globe in New York City 319 | - [Temples of Cambodia](http://interactive.aljazeera.com/aje/2017/cambodia-temples/) - Tour of the most popular temples of Cambodia, from [Al Jazeera](http://www.aljazeera.com/) 320 | - [React Imago3D](https://github.com/kenta88/react-imago3d) - Make WebVR easily creating your own scene with built-in 3d object and use your browser or vr headset to see what you built in real time. 321 | - [Have fun with nature](https://polideaplayground.github.io/WebVRExperience/) - Play with different environmental effects using your desktop browser or mobile VR headsets, like Daydream, Gear VR or Cardboard. [[Code]](https://github.com/PolideaPlayground/WebVRExperience) 322 | 323 | ### Tools 324 | 325 | Tools built with or for A-Frame. 326 | 327 | - [WebVR Studio](http://webvrstudio.com/) 328 | - [Fader Editor](https://getfader.com/) 329 | - [IdeaSpace VR](https://www.ideaspacevr.org/) 330 | - [Hologram](https://hologram.cool/) 331 | 332 | Contributions and suggestions are very welcome. Check out the guidelines and [make a pull request](https://github.com/aframevr/awesome-aframe/edit/master/README.md). 333 | 334 | ## License 335 | 336 | [![CC0](https://i.creativecommons.org/p/zero/1.0/88x31.png)](https://creativecommons.org/publicdomain/zero/1.0) 337 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # awesome-aframe 2 | 3 | ## Discontinued 4 | 5 | To promote higher quality avenues of finding fresh A-Frame-related content and 6 | reduce duplicate efforts, *the awesome-aframe list is no longer maintained*. 7 | Instead, check out: 8 | 9 | - [**A Week of A-Frame** Weekly Series](https://aframe.io/blog/) 10 | - [Official Site](https://aframe.io/) 11 | - [Community](https://aframe.io/community/) 12 | - [Components](https://www.npmjs.com/search?q=keywords:aframe&page=1&ranking=optimal) 13 | - [Twitter](https://twitter.com/aframevr/) 14 | --------------------------------------------------------------------------------