SurfaceR - Mobile gyroscope synced with an 3D HTML Object


The main idea is to communicate in real time with SignalR with ASP.NET Core. In realtime mobile orientation data is exchanged with the connected clients. There is also a remote embedded into the website. For now this only runs on the Android Mozilla Firefox.

Action Page

The 3D model is made with HTML5 and CSS3. The X,Y and Z orientation is changed with the realtime data with orientation of the phone or the remote given.

Its an open source project so feel free to contribute.

Source Code at GitHub

How does it work?

Step-1 You open the website and click on "See In Action" It opens up an image which changes it's orientation. Step -2 There is two way to change the orientation of the image. You open up the same website in an another device and click on the "Controls". As you change th e orientation using the Axes controllers or the Gyroscope controllers the image will change its orientation. You download the SurfaceR Android or iOS app and then turn on the button & boom!. The images changes its orientation with the help of the current orientation of the smartphone.

Behind the Scenes

The orientation data of the smartphone is synced with the rotation property of the image. As the device orientation change is detected it senda the infor about it's X,Y and Z axes and the images rotates itself according to it as it is listing for the data from the SignalR hub in the server.

In the same way the slider X,Y,Z values and also sent to the SignalR hub to which the surfaceR client or the image is listening. As you move the slider it send the infor to the hub and the image orientation is changed.


Popular posts from this blog

Use SCSS with ASP.NET Core 5.x or 3.X

Building a Login Flow with .NET MAUI

PySpark Schema Generator - A simple tool to generate PySpark schema from JSON data