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

12 1 2 1 4

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

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

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

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay