Control a 3D Model with Your Phone: A React, Three.js, and Socket.io Project 🚀

As a fan of 3D models and technology, I wanted to create a website that allows you to control a 3D model using your phone's movements on a local network. Here's how I did it

First, I found a 3D model of a phone online and downloaded it. Then, I used Three.js to display the model on the screen, React.js for the frontend, and Express Node for the backend. I utilized Socket.io to transmit data on the local network.

here is the result:

To sync the 3D model movement with the phone, I used the phone's gyro sensor data and transmitted it to the phone using Socket.io. However, I ran into a problem where I wasn't able to run the application on a local IP due to Chrome's security rules not allowing sensor data on an unsecured site. After some research, I forwarded my PC port to my Android device to access my page as localhost.

If you're interested in more projects like this, be sure to follow me on Twitter where I share my latest tech explorations!

https://twitter.com/gitrevert/status/1651234806783528960

Comments

[WhatsAVadim]

can you post the github repo?

[Allie]

Really interesting! Was wondering what the purpose of using React for the front-end of a tech demo like this would be?

[TGLT]

please shared alotof