Three.js Journey WebXR

This project is an adaptation of selected lessons from Bruno Simon's Three.js Journey course, modified to support VR and AR using WebXR. The goal is to make these lessons immersive and accessible across multiple platforms, including:

• Desktop (standard Three.js experience)
• Meta Quest 3 (Mixed-Reality AR & Immersive-VR, unverified on other headsets)
• Android Mobile-AR (via WebXR AR mode)
• iOS Mobile-AR (via EyeJack and EyeJack App Clips)

Live Demos

Each lesson adaptation is available as a live demo:

Lesson	Description	Live Demo
32-coffee-smoke	Animated smoke effect in a coffee cup	Demo
38-earth-shaders	Realistic Earth shaders	Demo
40-particles-morphing-shader	Morphing particles effect	Demo
41-gpgpu-flow-field-particles-shaders	GPGPU flow field particles	Demo
61-portal-scene-with-r3f	Portal scene using R3F	Demo

Development Notes

The majority of these lessons were originally built in vanilla Three.js and had to be converted to React Three Fiber (R3F) to better integrate with modern WebXR workflows. This conversion process was a challenge in itself. The exception is 61-portal-scene-with-r3f, which was already implemented in R3F by Bruno Simon.

A key goal of this project was to tackle some of Bruno's more challenging shader-based lessons, as they are visually stunning. Experiencing these effects in Mixed-Reality (AR) and Immersive-VR takes them to an entirely new level, enhancing their sense of depth and interaction.

Installation & Development

Each sub-project is independent, containing its own package.json, vite.config.js, and dependencies. To run a specific lesson:

1. Clone the repository:

   git clone https://github.com/shpowley/threejs-journey-webxr.git
   cd threejs-journey-webxr
   

2. Navigate to the desired sub-project:

   cd 40-particles-morphing-shader  # Example: Replace with the desired lesson
   

3. Install dependencies:

   npm install
   

4. Start the development server:

   npm run dev
   

5. Open your browser and navigate to http://localhost:3000 (or the port specified in the console output).

Licensing

This project is free and open-source. It is licensed under the MIT License, meaning you are free to use, modify, and distribute it, provided you include the original license.

Credits

• Bruno Simon - Three.js Journey (original lessons)
• React Three Fiber + WebXR - react-three/xr (many thanks to Bela Bohlender)
• Poimandres - open-source developer collective
• Three.js - JavaScript 3D Library
• Hosting - Vercel

Additional WebXR Project

Alongside this project, I also developed a WebXR port of Bruno Simon's final Three.js Journey lesson:

• Marble Race Remix - A webXR adaptation of Bruno’s "marble race" lesson, featuring extensive experimentation in mixed-reality and immersive-VR.
  • GitHub: threejs-journey-marble-race-remix
  • Live: Marble Race Remix (experience automatically adapts to your device)

Feedback & Contributions

Contributions and feedback are welcome! Feel free to open an issue or submit a pull request.

• GitHub: shpowley/threejs-journey-webxr

---

Enjoy exploring WebXR with Three.js! 🚀