https://github.com/shpowley/threejs-journey-marble-race-remix

Marble Race (threejs-journey.com), remixed for mobile and AR/VR (android + quest headset). R3F + react-three/xr (webxr)
https://github.com/shpowley/threejs-journey-marble-race-remix

android mixed-reality mobile r3f react-three-rapier webxr

Last synced: about 2 months ago
JSON representation

Marble Race (threejs-journey.com), remixed for mobile and AR/VR (android + quest headset). R3F + react-three/xr (webxr)

• Host: GitHub
• URL: https://github.com/shpowley/threejs-journey-marble-race-remix
• Owner: shpowley
• Created: 2024-10-31T17:06:40.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-12-03T04:45:02.000Z (2 months ago)
• Last Synced: 2024-12-03T05:29:25.790Z (2 months ago)
• Topics: android, mixed-reality, mobile, r3f, react-three-rapier, webxr
• Language: JavaScript
• Homepage: https://marble-race-remix.vercel.app/
• Size: 109 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
"Marble Race" (https://threejs-journey.com) re-imagined for mobile | mobile-AR | headset-VR | headset-AR.

Tested on Android mobile + Chrome AND Quest 3 headset + Quest browser only. Other devices / browsers may or may not work. Any feedback regarding other headset/browser combos, code suggestions, etc. is much appreciated.

This project serves as a mobile and webxr experiment that builds on the final lesson in multiple phases via github "tags".

0-base-game

- desktop experience with keyboard controls

- threejs-journey final lesson (mostly unchanged)

1-mobile

- android mobile + chrome browser with DOM touch + virtual joystick controls

- PORTRAIT or LANDSCAPE modes

2-mobile-ar

- android mobile + chrome browser with DOM touch + virtual joystick controls

- PORTRAIT or LANDSCAPE modes

- AR minified toy obstacle course

3-headset-vr

- quest 3 headset + quest browser + controllers

- 3rd-person chase cam "locked" POV

4-headset-ar

- quest 3 headset + quest browser + controllers

- AR minified toy obstacle course

5-ar-hit-test

- adds webxr "hit-testing" to placement of the toy obstacle course of a flat surface

- NOTE: hit-test placement feature is broken on react-three/xr + android at the moment, but still playable

- additional features: headset-vr camera-lock modes toggle

6-hands-only-controls

- hands-only controls (immersive-vr only)

  - touch interaction for button presses (exit, restart, camera adjust)

  - left-hand zone + pinch-to-activate "spacial" virtual joystick with "follow mode"

  - right-hand zone + pinch-to-jump

- manapotion.js virtual joystick with "follow mode" for mobile and mobile-ar