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

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

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

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay