Fun with Socket.io – Labyrinth 3D

Google’s Chrome experiments never fail to impress. Everytime Google Chrome’s team release a web experiment it always reminds me how the web will never disappear and how much potential it has. One of my favorite Chrome Experiment was the Arcade Fire site. At the time I never heard of the band, but the site rekindled my love of my career choice. The one site that started my love for the digital web was the Donnie Darko’s website developed by Hi-Res from the UK.

In 2013, Chrome released an experiment that included the use of a desktop browser and a mobile browser as a controller. It was one the first web experiments that used both browsers synchronously for a game. They may have used something similar to Socket.io if the two browsers talked to each other. Over the years I had the itch to try and make something similar. So I decided to do a project with the use of a mobile and desktop browser in a VR environment.

I knew I had to use Socket.io to have my Node server do requests and responses between the two browsers. I used Aframe VR to set up the 3D environment along with React as my front end library. In React I used states to update the Labyrinth’s x y z coordinates. Webkit provides a method to access a mobile device accelerometer coordinates. I used those coordinates as parameters in a function that sends it to the Node server and then dispatches it to the listener on the Labyrinth side. It works great, and I never get bored playing with it.


Instructions:

1. Go to http://labyrinth3d.herokuapp.com/#/floor on a desktop browser.

2. Go to http://labyrinth3d.herokuapp.com/#/controller on a mobile browser.

3. Move your mobile device side to side to control the Labyrinth.