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 T…


This content originally appeared on DEV Community and was authored by Naman vyas

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


This content originally appeared on DEV Community and was authored by Naman vyas


Print Share Comment Cite Upload Translate Updates
APA

Naman vyas | Sciencx (2023-04-26T17:22:22+00:00) Control a 3D Model with Your Phone: A React, Three.js, and Socket.io Project 🚀. Retrieved from https://www.scien.cx/2023/04/26/control-a-3d-model-with-your-phone-a-react-three-js-and-socket-io-project-%f0%9f%9a%80/

MLA
" » Control a 3D Model with Your Phone: A React, Three.js, and Socket.io Project 🚀." Naman vyas | Sciencx - Wednesday April 26, 2023, https://www.scien.cx/2023/04/26/control-a-3d-model-with-your-phone-a-react-three-js-and-socket-io-project-%f0%9f%9a%80/
HARVARD
Naman vyas | Sciencx Wednesday April 26, 2023 » Control a 3D Model with Your Phone: A React, Three.js, and Socket.io Project 🚀., viewed ,<https://www.scien.cx/2023/04/26/control-a-3d-model-with-your-phone-a-react-three-js-and-socket-io-project-%f0%9f%9a%80/>
VANCOUVER
Naman vyas | Sciencx - » Control a 3D Model with Your Phone: A React, Three.js, and Socket.io Project 🚀. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/04/26/control-a-3d-model-with-your-phone-a-react-three-js-and-socket-io-project-%f0%9f%9a%80/
CHICAGO
" » Control a 3D Model with Your Phone: A React, Three.js, and Socket.io Project 🚀." Naman vyas | Sciencx - Accessed . https://www.scien.cx/2023/04/26/control-a-3d-model-with-your-phone-a-react-three-js-and-socket-io-project-%f0%9f%9a%80/
IEEE
" » Control a 3D Model with Your Phone: A React, Three.js, and Socket.io Project 🚀." Naman vyas | Sciencx [Online]. Available: https://www.scien.cx/2023/04/26/control-a-3d-model-with-your-phone-a-react-three-js-and-socket-io-project-%f0%9f%9a%80/. [Accessed: ]
rf:citation
» Control a 3D Model with Your Phone: A React, Three.js, and Socket.io Project 🚀 | Naman vyas | Sciencx | https://www.scien.cx/2023/04/26/control-a-3d-model-with-your-phone-a-react-three-js-and-socket-io-project-%f0%9f%9a%80/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts