Controlling 360 Environment Node.Js + Socket.io + Three.js / by Sebastian Morales

Our Sense Me Move Me final project is a multifaceted performance. For part of it we will be projecting a 360 environment on the walls, ceiling and floor of the room. Perhaps inspired by VR, maybe as a critic to it, or in an effort to make it more inclusive, we are going to use a single projector on wheels. As we turn or tilt it the projection will react to reveal the proper side of the virtual world. 

Using the sensors inside an iphone you can accurately identify the orientation of the phone. If only there was a way to send all these numbers live to my laptop... Interesting fact, a couple of years back laptops (mac book pros) used to have similar features to protect/lock the hard drive in case the computer found itself falling, as hard drives were replaced with SSDs, this feature faded away.

Connecting phone to laptop
Before I continue I wanted to thank Or Fleisher for his help me set up the server properly. 

Now that I look back at it, it all seems quite straight forward but at the time it seemed daunting.

 

 

 

The entire code is also available on github

Not sure about this but I'll likely use it as reference in the future. First started creating a npm package.json file, and importing all the packages needed. 

 

After setting up all the pages and the server, you can now seamlessly control the the view of a 360 world by tilting, and rotating your smartphone. 

Finally, since we were using a projector and wanted to give an effect of shining a flashlight into a world, we added a alpha image of a spotlight, this would hide the edges of the projector. 

The 360 image is actually a composite of two image quickly merged together to create a more dramatic and surreal environment. 

https://www.foro3d.com/f111/background-360-grados-en-cycles-115111.html

http://www.themodernnomad.com/sossusvlei/