https://github.com/hicham2012/portal_scenexr

A simple experiment using Three.js along with webXR.
https://github.com/hicham2012/portal_scenexr

javascript threejs webxr

Last synced: 19 days ago
JSON representation

A simple experiment using Three.js along with webXR.

• Host: GitHub
• URL: https://github.com/hicham2012/portal_scenexr
• Owner: Hicham2012
• Created: 2023-08-22T18:45:16.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-12-03T20:19:06.000Z (about 1 year ago)
• Last Synced: 2024-11-02T00:42:17.235Z (2 months ago)
• Topics: javascript, threejs, webxr
• Language: JavaScript
• Homepage: https://portal-scene-xr.vercel.app
• Size: 30.8 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Contents

 1. [Preview](#preview)

 2. [Running the website](#running-the-website)

 3. [Technologies and Features](#technologies-and-features)

 4. [Credits](#credits)

 5. [Tips and Tricks](#tips-and-tricks)

 6. [Contact](#contact)

# Preview

![IMG_8803](https://github.com/Hicham2012/Portal_SceneXR/assets/99765449/36c57b8f-1002-4824-bc17-64b1dee26b33)

View the working video [here](https://www.linkedin.com/posts/hicham-zaadla_finished-my-first-experiment-on-webxr-as-activity-7099901493876514817-Ga69?utm_source=share&utm_medium=member_desktop)

# Running the website

Since big browsers are still in the work of adopting XR support, we will need to use other browsers that are supporting it.


1. For our case, we will use WebXR Viewer by Modzilla.

2. Make sure to download it on PlayStore or AppStore.

3. Open the browser and visit the website at `https://portal-scene-xr.vercel.app/`.

![IMG_8804](https://github.com/Hicham2012/Portal_SceneXR/assets/99765449/fdcd6e47-3029-46dd-bfd6-90ae5ae51b08)

# Technologies and Features

For this experiment, I focused on achieving the necessary results by using:

 - HTML

 - CSS

 - Javascript

 - [Three.js](https://threejs.org/) (for 3D objects and animation along with raycasting)

 - GSAP (for animation)

 - [WebXR](https://github.com/immersive-web) (for implementing AR and VR experience)

 - [Eruda](https://eruda.liriliri.io/) (for mobile debugging)

 - [Resonance Audio](https://resonance-audio.github.io/resonance-audio/)

# Credits

This experiment wouldn't be possible without the resources [Three.js Course](https://threejs-journey.com/) and [WebXR Academy](webxracademy.com) has been providing.

The background music is from Final Fantasy and the sound effect when tapping on the portal is from Pixabay.

# Tips and Tricks

Wear headphones for an amazing experience. 

# Contact

Feel free to reach out to me on my [LinkedIn](https://www.linkedin.com/in/hicham-zaadla/) to explore new ideas.