Demo

About   |   Features   |   Technologies   |   Requirements   |   Starting   |   License   |   Author

An interactive, 3D augmented reality (AR) application featuring a floating, distorting portal that is a window to another world. Using your phone, you can enter AR mode and experience the 3D AR portal which shows you glimpses of another world superimposed on your live surroundings which are fed in by the phone's camera feed. It allows you to switch worlds when you tap on the portal via the phone. You will be able to experience the new world in 3D and real-time by panning your phone about and observing it in 360 degrees. While you are in the new world, the floating portal shows you your real surroundings via the camera.

View the live site on your mobile at: https://cynthia-3d-ar-portal.netlify.app/

1. Using your phone, go to the demo at: https://cynthia-3d-ar-portal.netlify.app/
2. See the `Enter AR` button at the bottom of the screen and click it
3. Allow phone permissions to use the camera
4. See the floating, distorting portal appear in front of you
5. Pan your phone and walk around and see that the portal remains as is
6. In your phone, tap the portal and see that you get transported to the new world
7. See the floating portal shows your camera view of your surroundings but that you are in the new world
8. Pan you phone about and see the 360 degree world that you are in
9. Tap the portal to return back to your original surroundings
10. Clik `Exit AR` to exit the experience

✔️ WebXR augemented reality technology;
✔️ 3D rendering using ThreeJS;
✔️ 360 degree surroundings of the portal world with real-time view and panning movement via phone in a skybox texture;

The following tools were used in this project:

• Node.js
• React Three Fiber
• React Web XR
• Skybox AI

Before starting 🏁, you need to have Git and Node installed.

# Clone this project
$ git clone https://github.com/cynthiachiu/3D-AR-Portal

# Access
$ cd 3D-AR-Portal

# Install dependencies
$ npm i

# Run the project
$ npm start

# The server will initialize in the <http://localhost:3000>. 
You can use the WebXR Device Emulator extension to view the application. 
Or, you can use ngrok to generate a link and try on your mobile with the secure ngrok link.

This project is under license from MIT. For more details, see the LICENSE file.

Made with ❤️ by cynthiachiu

Back to top