diff --git a/README.md b/README.md index b369480..15dc6de 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@

- +

Welcome to **WebXR First Steps**! This **2-hour** tutorial is designed to help you take your first steps into developing immersive WebXR experiences using [Three.js](https://threejs.org/). Whether you’re a web developer looking to expand your skillset or a hobbyist interested in creating virtual reality (VR) applications, this tutorial will guide you through the fundamentals of building interactive 3D worlds for the web. @@ -8,7 +8,10 @@ Welcome to **WebXR First Steps**! This **2-hour** tutorial is designed to help y By the end of this tutorial, you’ll have created a fully functional WebXR game where players can use VR controllers to shoot targets, track their score, and enjoy an immersive experience complete with sound, vibration, and smooth animations. Here's what the final experience looks like: -![Target Practice Gameplay](./tutorial/assets/targetpractice.gif) +
+ +
Target Practice Gameplay
+
## Setting Up Your Local Development Environment @@ -87,7 +90,10 @@ If you're already using the [Immersive Web Emulator browser extension](https://c Here’s a showcase of the emulation setup in action: -![IWER & IWER/DevUI Showcase](./tutorial/assets/iwerdevui.gif) +
+ +
IWER & IWER/DevUI Showcase
+
## Getting Started @@ -102,10 +108,41 @@ This tutorial is structured into chapters to help you progressively build your W We hope you enjoy working through the tutorial. Happy coding, and have fun building your WebXR game! +## Build and Deploy + +Once you've completed the development of your WebXR game, you can build and deploy it for others to experience. Here's how you can do that: + +### Deploying the App with GitHub Pages + +This repository includes a ready-to-use GitHub Actions workflow located at `.github/workflows/deploy.yml`, which automates both the build and deployment to GitHub Pages. Once enabled, every time you push changes to the `main` branch, a new build will automatically be deployed. + +#### Steps to Enable GitHub Pages Deployment: + +1. **Fork this repository** to your own GitHub account. +2. Navigate to your forked repository’s **Settings**. +3. Scroll down to the **Pages** section. +4. Under **Build and Deployment**, change the **Source** to **GitHub Actions**. + +Once this is set, GitHub Actions will handle the build and deployment process automatically. Any time you push changes to the `main` branch, the app will be built and deployed to GitHub Pages without any additional manual steps. + +You can monitor the status of the deployment job or manually re-run it via the **Actions** tab in your GitHub repository. + +### Deploying to Your Own Hosting Solution + +If you prefer to host the app yourself, you’ll need to manually build the app and then deploy the generated files to your hosting provider. + +To generate the build, run the following command: + +```bash +npm run build +``` + +This will create a `dist` folder containing the static files for the app. You can then upload these files to your hosting platform of choice. + ## Contributing Please read [CONTRIBUTING.md](./CONTRIBUTING.md) for details on how to contribute to the project. ## License -This project is licensed under the MIT License - see the [LICENSE.md](./LICENSE.md) file for details. +This project is licensed under the MIT License - see the [LICENSE.md](./LICENSE) file for details.