deadsimple immersive navigation: a single-player-verse component

Overview

AFRAME-verse, deadsimple immersive navigation

A single-player-verse component for AFRAME:

TRY THE ONLINE DEMO

  • ❤️ easily teleport between aframe apps & aframe-verse clusters
  • ❤️ does not exit immersive-mode when navigating to different aframe experiences
  • ❤️ standalone & serverless: no servers (NAF/signaling) needed
  • ❤️ HTML-first: even runs from wordpress, no ninja javascript-skills needed
  • ❤️ #networkless #decentralized #noblockchain #permissionless-first #federatedpullrequests

Similar to a WEBring, you can easily create DOMrings and VERSErings with this component, that can be Zuckerburgered by yourself (or friends).

Usage


<script src="aframe-verse-component.js"></script>

<a-scene>
  <a-entity aframe-verse="register: /aframe-verse.json">

    <!-- everything nested under `aframe-verse`, will be replaced upon navigation  -->

    <a-box href="/"></a-box>            <!-- home = the cluster-client (index.html) -->
    <a-box href="./app2.html"></a-box>  
    <a-box href="https://somefriend.com/some_aframe_app.html"></a-box>
    <a-box href="https://somefriend.com/supercustom_webxr_app.html"></a-box>

  <a-entity>

  <!-- put 'global' entities here (UI, cursor or wearables e.g.)   -->
  <!-- to persist across navigation                                -->
  <!-- ps. multiple aframe-verse components are supported!         -->

</a-scene>

aframe-verse.json

{
  "schema":"aframe-verse/0.1",
  "destinations":[ 
    {"url":"./index.html"},                                      
    {"url":"https://somefriend.com/some_aframe_app.html"},       // allow in-app immersive navigation
    {
     "url":"https://somefriend.com/supercustom_webxr_app.html",  // a trusted app but which uses 
     "newtab": true                                              // a threejs e.g. (opens in new tab)
    }
  ], 
  "verses":["https://otherbefriendedverse.com/register.json"]
}

How it works


A visitor in an aframe-verse just teleports to other destinations and clusters ("beam me up scotty!").
aframe-verse.json is just a telephone-book of destinations.

When a visitor surfs to a cluster-client (index.html), it loads all components, which other linked experiences use.

How does this works in large?

The concept above is an answer to the fact that each tile-based 'metaverse' will always turn into some kind of hypercentralized client-project. Instead, a visitor in the aframe-verse just teleports to other destinations and clusters.
When the visitor surfs to a cluster-client (index.html), it basically loads all components, which other linked experiences use.
This is a security-limitation and a performance-feature, because this:

  • makes traveling between experiences (within a cluster) very fluid and fast.
  • it creates a decentralized incentive between developer(s) to:
    • collaborate on a seamless & secure end-visitor cluster-client (index.html)
    • consistent UX because of:
      • shared components
      • shared global objects: wearables, UI, AR/VR controller-support e.g.

As an exception to the rule, the developer(s) (YOU) of a cluster-client (index.html) can load remote (trusted) components/scripts, which is demonstrated by aframe-verse-component-scripts.

Worstcase, a destination can be loaded in a new tab (newtab:true which exits immersive navigation ), which then basically becomes the new cluster.

Federated HTML-first verse-clusters


aframe-verse describes a verse using the lowest common denominator between Aframe authors (=a webdirectory)

This could be a github-repo, or linuxserver where:

  • the maintainer(s) maintain a pool of trusted aframe apps (& components)
  • the maintainer(s) allow DOM-sharing (a DOM-ring) between eachothers aframe-apps
  • the maintainer(s) agree on shared garbage collection

Ideally, the maintainers need to approve new (website-specific) scripts/components, and include them in index.html when a new app arrives thru merge requests.

But..but..what about privacy & security?

This is all up to the maintainers of a verse, just think of it as running a shared website & linksharing.
For more info read this

Project scope


Out of the box, this component is good enough for seamlessly navigating between simple read-only aframe experiences (galleries, portfolios, vr movies, viewing scenes e.g.).
A monoverse is the opposite of a 'metaverse'-concept (in which multiplayer-communication is fundamental). Therefore, the following is out of scope, but can still be used to progressively enhance an aframe-verse:

  • multiplayer: see the (way more complex) NAF approach which requires you to run your own server.
  • hardened security/privacy: introduce activitypub-layer, p2p webrtc like yjs

How to add experiences?


Just check index.html and app2.html, Basically:

  • put your aframe apps in apps/* (they should have an aframe-verse-attribute set somewhere)
  • add href-attributes to clickable items (see example)
  • use href="./afile.html" to teleport to relative files
  • whitelist href="https://..."-links by including them in aframe-verse.json (see browserconsole for errors)
  • use href="/" to guide the visitor back to the original cluster

How to add components?


Typically these are included in the cluster-client index.html.

What if other apps require certain components/scripts?

As an exception to the rule, you can load remote (trusted) components/scripts, which is demonstrated by aframe-verse-component-scripts.

Customizing (with code)


Rule of thumb: load (or extend loading) components in the cluster-client (index.html)

Extending navigation interactions


In the example, only touch/mouse-events are supported.
By defining hrefEvents, you can trigger navigation for other events too:

<... aframe-verse="register: /yourverse.json; hrefEvents: click, mouseenter, collide, foobar">
   <a-box href="./show.html"/>  
</...>

Profit! Now navigation is triggered to show.html whenever it is clicked, mousehovered or colliding with another object

calling $('[aframe-verse] [href]').emit('foobar', {}) would trigger navigation too

Customizing navigation further


You can control navigation-events by creating a custom component:

// use like: <a-entity aframe-verse="..." navigate></a-entity>

AFRAME.registerComponent('navigate', {
  init: function(){
    console.log("initing navigation")
    this.el.addEventListener('beforeNavigate', (e) => this.beforeNavigate(e) )
    this.el.addEventListener('navigate',       (e) => this.navigate(e) )
    this.el.addEventListener('loadHTML',       (e) => this.loadHTML(e) )
    this.el.addEventListener('registerJSON',   (e) => this.registerJSON(e) )
  }, 
  beforeNavigate(e){
    // let promise = e.detail.promise()   
    console.log("about to navigate to: "+e.detail.destination.url)
    // promise.resolve()
    // promise.reject("not going to happen")
  }, 
  navigate(e){
    // let promise = e.detail.promise()   
    console.log("navigating to: "+e.detail.destination.url)
    // promise.resolve()
    // promise.reject("not going to happen")
  }, 
  loadHTML(e){
    let newdom = e.detail.dom.querySelector("[aframe-verse]")
    // let promise = e.detail.promise()   
		console.log("loading html")
    // promise.resolve()
    // promise.reject("not going to happen")
  },
  registerJSON(e){
    let json = e.detail.json
    /* example: skip non-immersive navigation links */
    // json.destinations = json.destinations.filter( (d) => d.newtab ? null : d )
    /* example: launch external verses in a new tab (so its components get loaded too) */
    // json.destinations.map( (d) => d.url.match(/index\.html$/) ? d.newtab = true : null )
  }
})

This is the place to show a consent popup e.g. (most trusted experiences can do fine without that in the beginning).

Connecting, Nesting & Securing verse-clusters


For navigation, you can add external verses to the .verses-array in aframe-verse.json, that's all!
Optionally, you can secure the import-behaviour further using the registerJSON-event as shown above in 'Customizing navigation further'.

Fadetime & nesting verses


You can have multiple persisting verses at the same time. Usecases for this are: a menu system, mini-games, inventory or a teleporting-maze e.g.:

<a-entity aframe-verse="register: aframe-verse.json">
  ...
</a-entity>

<a-entity aframe-verse="register: menu.json; fade: 0">   <!-- NOTE: superfast fade in ms (0=off) -->
  ...
</a-entity>

NOTE: for heavy scenes you can set fade: 4000 (4seconds fade) e.g.

Publish, selfhost & connect your verse (for free)


3 ways of hosting:

GITHUB / GITLAB


  • click the fork-button on github or gitlab
  • rename the repository to aframe-verse-* (aframe-verse-myorganisation e.g.) for easy discoverability
  • github: go to settings-tab > enable github pages (use the main-branch)
  • profit! your verse can now be accessed thru
    • github: https://yourusername.github.io/aframe-verse-myorganisation/apps
    • gitlab: https://yourusername.gitlab.io/aframe-verse-myorganisation/apps

GLITCH


  • REMIX this glitch
  • rename the project to aframe-verse-* (aframe-verse-myorganisation e.g.) for easy discoverability
  • your verse can now be accessed thru https://aframe-verse-myorganisation.glitch.me/apps/

SELFHOSTING (redbean/wordpress/apache e.g.)


  • download zip and unpack it in your apache/worpress dir e.g.

Later: please connect your verse to this repo, by submitting a PR or mentioning your json-URL in an issue. That way, future verses (forks) will automatically include your verse too.

Scope / Contributing

All feedback,bugfixes are very welcome ❤️

Other things (features/privacy/security/consent-stuff e.g.) should be published as separate components (see the navigate custom-component example in the aframe-verse README.md in the Customizing (with code) > Customizing navigation further section.

Please publish any useful components under reponame aframe-verse-component-mycomponent for discoverability.

As a startingpoint for extending, you can simply fork the scripts-component as well

You might also like...

Responsive navigation plugin without library dependencies and with fast touch screen support.

Responsive Nav Responsive navigation plugin without library dependencies and with fast touch screen support. Responsive Nav is a tiny JavaScript plugi

Nov 14, 2022

It's a tiny freeware library on TypeScript to sinhronize page scrolling and navigation meny-bar.

Scroll progress (dual-side-scroll) v1.2.3 Assignment This tiny plugin is designed to show the progress of the page scrolling interactively. There are

May 17, 2022

Bootstrap 4 stylesheet that implements vertically-oriented navigation tabs.

Bootstrap 4 stylesheet that implements vertically-oriented navigation tabs.

Responsive Vertical Navigation Tabs for Boostrap 4 New! 💥 If you use Bootstrap 5, a new package is available for that: bootstrap-5-vertical-tabs A st

Aug 4, 2022

jSide Menu is a well designed, simple and clean side navigation menu with dropdowns.

jSide Menu is a well designed, simple and clean side navigation menu with dropdowns.

jQuery jSide Menu jSide Menu is a well designed, simple and clean side navigation menu with dropdowns. Browse: Live Demo & Using Guide Main Features F

Feb 14, 2022

Simple click-triggered navigation submenus. Accessible and progressively enhanced.

Clicky Menus! A project by Mark Root-Wiley, MRW Web Design Clicky Menus lets you create a progressively-enhanced, accessible one-level dropdown menu t

Nov 20, 2022

A plugin for creating hierarchical navigation in Astro projects. Supports breadcrumbs too!

astro-navigation A plugin for creating hierarchical navigation in Astro projects. Supports breadcrumbs too! Full docs coming soon! Basic usage This pa

Nov 20, 2022

jQuery plugin to show a tabs bar for navigation. The tabs can be defined once, and shared across multiple HTML pages.

jQuery plugin to show a tabs bar for navigation. The tabs can be defined once, and shared across multiple HTML pages.

jquery.simpletabs v1.2.3 The jquery.simpletabs plugin shows a tabs bar for navigation. The tabs can be defined once, and shared across multiple HTML p

Feb 23, 2022

This simple project, show how work with async Fetch, function component and class component

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Feb 17, 2022

dynamic-component-app is an angular application for dynamic component template creation

MyApp This project was generated with Angular CLI version 14.1.0. Development server Run ng serve for a dev server. Navigate to http://localhost:4200/

Aug 26, 2022
Comments
  • consent in aframe-verse.json privacy security e.g.

    consent in aframe-verse.json privacy security e.g.

    a verse-JSON description should give hints to the host-verse, for example:

    aframe-verse.json

    features:{
      "NAF": true,   // when set to true, non-multiplayer verses can block this verse
    }
      
    
    opened by coderofsalvation 1
Owner
Coder of Salvation / Leon van Kammen
senior junior technologist / polyglot
Coder of Salvation / Leon van Kammen
Navigation-Menu-Javascript - A simple Navbar navigation using vanilla javascript, to change links to the active link when clicked.

Navigation-Menu-Javascript A simple Navbar navigation using vanilla javascript, to change links to the active link when clicked. Desktop view Mobile v

Ellis 2 Feb 16, 2021
A easy-to-use framework for building immersive decentralized applications

A easy-to-use framework for building immersive decentralized applications

Sonr 642 Nov 17, 2022
Immersive (VR) controls for Three.js

Three.js Immersive Controls Immersive (VR) functionality Movement and rotation with VR controllers (move with left thumbstick, rotate with right thumb

Anthony DePasquale 20 Nov 12, 2022
Open source software from Lifecast Inc for immersive volumetric VR videos and photos.

Lifecast Inc. Open Source Lifecast makes software for immersive volumetric VR videos and photos. Lifecast's 6DOF format for 3D photos and videos can b

Forrest Briggs 13 Nov 24, 2022
Essential Audio Player JS is a simple, clean and minimal JavaScript / HTML5 / CSS web audio player.

Essential Audio Player JS is a simple, clean and minimal JavaScript / HTML5 / CSS web audio player. No unnecessary controls, just a button and a track

null 33 Nov 29, 2022
🟢 Music player app with a modern homepage, fully-fledged music player, search, lyrics, song exploration features, search, popular music around you, worldwide top charts, and much more.

Music-player-app see the project here. 1. Key Features 2. Technologies I've used Key Features: ?? Fully responsive clean UI. ?? Entirely mobile respo

suraj ✨ 3 Oct 14, 2022
Scrolling navigation component for web apps

Slinky.js Create beautiful scrolling driven navigation lists with stacking headers that remain visible at all times. Scroll around on the plugin homep

Sorin Iclanzan 201 Nov 16, 2022
View component and controller of YouTube Player API, for fresh framework.

fresh-youtube View component and controller of YouTube Player API, for fresh framework. Try it now! git clone [email protected]:otiai10/fresh-youtube.git

Hiromu OCHIAI 10 Nov 2, 2022
An open-source boat display cockpit for navigation, speed, heading, and tide tables running on Raspberry Pi and accessible as a webapp through any smartphone.

An open-source boat display cockpit for navigation, speed, heading, and tide tables running on Raspberry Pi and accessible as a webapp through any smartphone

Andy 43 Oct 8, 2022
🍭 search-buddy ultra lightweight javascript plugin that can help you create instant search and/or facilitate navigation between pages.

?? search-buddy search-buddy is an open‑source ultra lightweight javascript plugin (* <1kb). It can help you create instant search and/or facilitate n

Michael 4 Jun 16, 2022