All Projects → Utopiah → Aframe Persist Component

Utopiah / Aframe Persist Component

Persisting Aframe attribute data using localStorage

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Aframe Persist Component

Mathworldvr
Math world in WebVR, powered by A-frame.
Stars: ✭ 73 (+630%)
Mutual labels:  aframe, virtual-reality, webvr
Ideaspace
😎 Create interactive 3D and VR web experiences for desktop, mobile & VR devices
Stars: ✭ 344 (+3340%)
Mutual labels:  aframe, virtual-reality, webvr
Superframe
📦 A super collection of A-Frame components.
Stars: ✭ 1,061 (+10510%)
Mutual labels:  aframe, virtual-reality, webvr
aframe-registry
[DISCONTINUED] Curated collection of community A-Frame components.
Stars: ✭ 76 (+660%)
Mutual labels:  webvr, aframe, virtual-reality
Aframe Inspector
🔍 Visual inspector tool for A-Frame. Hit *<ctrl> + <alt> + i* on any A-Frame scene.
Stars: ✭ 469 (+4590%)
Mutual labels:  aframe, virtual-reality, webvr
Awesome Aframe
[DISCONTINUED] Collection of awesome resources for the A-Frame WebVR framework.
Stars: ✭ 1,310 (+13000%)
Mutual labels:  aframe, virtual-reality, webvr
Aframe React
:atom: Build virtual reality experiences with A-Frame and React.
Stars: ✭ 1,199 (+11890%)
Mutual labels:  aframe, virtual-reality, webvr
Networked Aframe
A web framework for building multi-user virtual reality experiences.
Stars: ✭ 803 (+7930%)
Mutual labels:  aframe, virtual-reality, webvr
A Painter
🎨 Paint in VR in your browser.
Stars: ✭ 539 (+5290%)
Mutual labels:  aframe, virtual-reality, webvr
Aframe
🅰️ web framework for building virtual reality experiences.
Stars: ✭ 13,428 (+134180%)
Mutual labels:  aframe, virtual-reality, webvr
a-blast
💥 Save the World From the Cutest Creatures in the Universe!
Stars: ✭ 116 (+1060%)
Mutual labels:  webvr, aframe, virtual-reality
lvr
👓 Augmented Reality for everyone - Out of the world experiences
Stars: ✭ 92 (+820%)
Mutual labels:  webvr, aframe, virtual-reality
aframe-cubemap-component
A component for creating a skybox with a cubemap in A-Frame.
Stars: ✭ 61 (+510%)
Mutual labels:  webvr, aframe
hologram
Hologram Framework | All-in-one WebVR creation.
Stars: ✭ 84 (+740%)
Mutual labels:  webvr, aframe
MixedRealityResources
Mixed Reality related resources
Stars: ✭ 190 (+1800%)
Mutual labels:  webvr, virtual-reality
camp
Building generative VR worlds on the Web
Stars: ✭ 16 (+60%)
Mutual labels:  webvr, virtual-reality
webvr
Archival repository for the legacy WebVR Specification.
Stars: ✭ 13 (+30%)
Mutual labels:  webvr, virtual-reality
WebVRExamples
yonet.github.io/webvrexamples/examples/cubes.html
Stars: ✭ 19 (+90%)
Mutual labels:  webvr, virtual-reality
aframe-xylayout
Flexbox like 2D layout + UI components for A-Frame.
Stars: ✭ 23 (+130%)
Mutual labels:  webvr, aframe
pacman
Pacman WebVR using Aframe
Stars: ✭ 20 (+100%)
Mutual labels:  webvr, aframe

aframe-persist-component

Use localStorage to make data persist over experiences.

Tro try the example http://vatelier.net/MyDemo/aframe-persist-component/ move the camera around then refresh. You can also move the cube around using the inspector.

preview

Properties

Property Description Default Value
attribute specify which attributes of an entity should be saved position
debug console.log() when attributes are loaded, saved and with what values true

Installation

Browser

Install and use by directly including the component:

  <script src="https://rawgit.com/Utopiah/aframe-persist-component/master/aframe-persist-component.js"></script>

Basic usage

  <a-scene>
    <a-camera id="mycamera" persist></a-camera>
  </a-scene>

Example

<head>
  <title>local state save</title>
  <script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script>
  <script src="https://rawgit.com/Utopiah/aframe-persist-component/master/aframe-persist-component.js"></script>
</head>
<body>
  <a-scene>
    <a-camera id="testingid" persist="debug:true;"
      persist__rot="debug:true; attribute:rotation;"></a-camera>
    <a-box id="testingid2"
      persist__pos="debug:true; attribute:position;"
      persist__rot="debug:true; attribute:rotation;"></a-box>
    <!-- commented out to remove shader errors...
    <a-box scale="20 20 20" color="grey" scale="1" material="side:double"></a-box>
-->
    
  </a-scene>
</body>

Limitations

  • There is no traversal, each attribute to be saved has to be explicitely defined as such.
  • Each entity requires to have its unique ID, if not a warning message will de displayed then nothing will be saved.
  • Simple attributes like visible work but composed attributes (e.g. color or material) do not work.
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].