Introducing No Code Metaverses!

You can now create and customize your own 3D virtual worlds and embed them directly into your 2D websites with 1 line of HTML using metaverses.io.

As I mentioned in my previous post, Remember Cyberspaces, the metaverse is simply the Internet’s transition from 2D websites to 3D web spaces — cyberspaces. Now you can invite your friends, customers, or colleagues to your existing website and let them experience both options (browsing in 2D or immersing in 3D communications and explorations).?

This works with Twitter Bootstrap and all other HTML templating systems that support the HTML iframe tag. As you can see in the screenshot below, the website’s existing navigation can even overlay your new 3D world and the page is still scrollable to reveal all of your existing 2D content.?

Here’s a quick video demo of the metaverses.io website embed in action.

Here’s a live demo! Note: this demo will work on mobile (phones and tablets), desktops (any OS), and even VR headsets like Oculus and Vive (as well as AR headsets like Hololens and MagicLeap) because the demo is built using 100% web protocols including: WebXR and WebRTC. Checkout my post, The Metaverse v1.0 is Already Here, for more tech details.

You can literally create and customize your own metaverse with a few clicks on Metaverses.io. You start by naming your new verse and configuring a metaverse.json file with your 3D models and web embeds. Your new metaverse.json file can be hosted anywhere including: GitHub Gists.

Once your 3D metaverse space is created, you can invite your friends, customers, and colleagues to join you in the verse and/or add it to your existing website with the following iframe tag:

<iframe src=”https://www.metaverses.io/ArrangeDiameterRan" width=”100%” height=”100%” allow=”camera ‘src’;microphone ‘src’” border=”0"></iframe>

Note: the iframe src is your new verse URL. Also note that the allow camera and mic parameter is required to allow your browser to ask for camera and mic permissions in the verse on load.

Note: SketchFab is full of great 3D spaces and 3D content to put inside the spaces. Best of all, most of their models are free to download!

Here’s an example of code for the full “jumbotron” or “bootstrap cover” section with the iframe tag above added to your site’s header section.

<!-- Masthead -->
<header class="masthead">
  <iframe src="https://www.metaverses.io/ArrangeDiameterRan" width="100%" height="100%" allow="camera 'src';microphone 'src'" border="0"></iframe>
  <div class="scroll-down">
  	<a class="btn js-scroll-trigger" href="#about">
  	   <i class="fa fa-angle-down fa-fw"></i>
  	</a>
  </div>
</header>         

Here’s more information on setting up your new metaverse and even adding web content such as videos, streaming audio, divs, etc into your new verse via the metaverse.json file.

Imagine BestBuy including this technology on their website and giving customers the option of 2D web commerce or allowing them to browse their store virtually with GeekSquad in the metaverse!

Reach out to us on Twitter or Facebook or LinkedIn or drop us an email if you would like a demo of Metaverses.io or discuss your team needs in more detail with us.