DEV Community

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

Posted on

Control a 3D Model with Your Phone: A React, Three.js, and 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 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 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!

Oldest comments (3)

whatsavadim profile image

can you post the github repo?

allie profile image
Allie Howe

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

tglt profile image

please shared alotof