Lot’s of improvements
All articles

A-Frame UI Experiments on a CMS #2

Pat Bloom By Pat Bloom on Apr 22, 2017

As I recently moved my ‘static’ A-Frame files and code to MODX, a CMF (Content Management Framework) which allows you to easily create templates, code-snippets and query data-sources. I call it ‘a system where you can create a CMS yourself’ – that fits your own purpose – in this case an A-Frame project.

When I wrote my previous post I was still kinda exploring the possibilities with this way of ‘generating’ scenes, skies and objects but that’s been a proven concept and gives me the possiblity to quickly make changes and optimisations thought the whole project. Objects (A-Entity’s and Sky Images)  and their JS scripts are dynamically being generated, which pretty cool as it makes the workflow efficient.

Back to what’s it about – I’m recently busy with experimenting what would be a good way to navigate (on a Cardboard Type Headset) through different areas, which are actually ‘scenes in scenes’ (from which the visibility is being turned on and of when navigating). I have plans to load them dynamically with JSON but this are still future plans – on the other hand good improvements for the loading time.

As VR is a very visual experience and I try to push that to the max and one of my latests additions to the project are thumbs when rollover the buttons in the navigation. Besides the ‘regular’ feedback like colour, shape (and rotation) I found out that thumbs – in this case generated from the panorama images work very good and intuitive – and the viewer will easily remember what has been viewed or what a particular scene will look like.

Some other additions – since the previous post – is that I added ‘hotspots’ (as A-Box objects), in particular areas so the viewer can gaze-click to new areas. The ‘links’ can be chosen in the backend by the CMS, as areas are (in CMS terms) ‘resources’ and can therefore being indexed and are available in a select-menu.

Latest version (works on Desktop Chrome / Safari / Firefox / Opera and on Cardboard Chrome / Safari).

Check here


Copy / Paste URL for Cardboard Device:

Let's connect