Building Social VR apps in AltspaceVR with A-Frame

 A lot ideas for virtual reality applications includes a social aspect where a group of people are brought together in a virtual space to collaborate in some way.

One of the many social VR platform is AltspaceVR. It has plenty of competition, but I like Altspace because it works on all major platforms and its 3rd party development infrastructure is based on Javascript and browser rendering. 

If you can render 3d in the browser using WebGL and ThreeJS, it’s easy to get this content into Altspace. Most rooms in Altspace have a dedicated “hologram” area where you can bring up any compatible web page and get it rendered as a “3d hologram” in the client.

The Altspace team has created an A-Frame component that makes it easy to render A-Frame scenes inside an Altspace room

Add the “altspace” attribute to the “<a-scene>” element in the HTML code, so it becomes “<a-scene altspace>”. This is enough to make the example render in Altspace, so click the “Change view” button in Codepen and copy the “Debug Mode” link.

Head to the Altspace account site and sign in. Click the “My Events” link, select “Start a Quick Event”, select a room (I prefer “SDK Testing Medium App”), click “Create Event” and then “Visit Now”. This should make you join your own newly created room in the Altspace client.

<a-scene altspace="usePixelScale: false; verticalAlign: bottom;" vr-mode-ui="enabled: false;">

  <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>

  <a-cube position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-cube>

  <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>

  <a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>

  <a-sky color="#ECECEC"></a-sky>

</a-scene>

It is recommended to go with Webpack, React and Redux as your stack. I’m working on an Altspace application using this stack,

Authors sample can be seen here. https://github.com/RSpace/agile-space

References:

https://medium.com/immersion-for-the-win/building-social-vr-apps-in-altspacevr-with-a-frame-81cb1bbc3ec4