DEV Community

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

Posted on

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:
demo

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

Top comments (3)

Collapse
 
whatsavadim profile image
WhatsAVadim

can you post the github repo?

Collapse
 
allie profile image
Allie

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

Collapse
 
tglt profile image
TGLT

please shared alotof