GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → supermedium → Moonrider

supermedium / Moonrider

Licence: mit
🌕🏄🏿 Surf the musical road among the stars. Side project built by two people in a few months to demonstrate WebXR.

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

htmlwebbrowserwebglthreejswebvraframewebxr

Projects that are alternatives of or similar to Moonrider

Webxr Handtracking
👐 WebXR hand tracking examples
Stars: ✭ 116 (-60.27%)
Mutual labels:  aframe, webgl, threejs, webxr
Aframe Effects
A VR Ready Post processing framework for Three.js and/or A-Frame
Stars: ✭ 176 (-39.73%)
Mutual labels:  aframe, webgl, threejs, webvr
Exokit
Native VR/AR/XR engine for JavaScript 🦖
Stars: ✭ 809 (+177.05%)
Mutual labels:  webgl, browser, webvr, webxr
Aframe Vimeo Component
Stream Vimeo videos into WebVR.
Stars: ✭ 62 (-78.77%)
Mutual labels:  aframe, webgl, threejs, webvr
Thehallaframe
WebVR demo that displays art
Stars: ✭ 120 (-58.9%)
Mutual labels:  aframe, webgl, threejs, webvr
Ideaspace
😎 Create interactive 3D and VR web experiences for desktop, mobile & VR devices
Stars: ✭ 344 (+17.81%)
Mutual labels:  aframe, threejs, webvr, webxr
3dio Js
JavaScript toolkit for interior apps
Stars: ✭ 255 (-12.67%)
Mutual labels:  aframe, webgl, threejs, webvr
Webxr Webpack Boilerplate
Starter Kit for building rich, immersive WebXR projects (featuring A-Frame) PWA with Webpack and SASS
Stars: ✭ 48 (-83.56%)
Mutual labels:  aframe, webvr, webxr
3dstreet
🚲🚶🚌 Web-based 3D visualization of streets using A-Frame
Stars: ✭ 74 (-74.66%)
Mutual labels:  aframe, threejs, webxr
hologram
Hologram Framework | All-in-one WebVR creation.
Stars: ✭ 84 (-71.23%)
Mutual labels:  threejs, webvr, aframe
Aframe Extras
Add-ons and helpers for A-Frame VR.
Stars: ✭ 722 (+147.26%)
Mutual labels:  aframe, threejs, webvr
A Mmd
A-Frame MMD component
Stars: ✭ 74 (-74.66%)
Mutual labels:  aframe, threejs, webvr
Awesome Aframe
[DISCONTINUED] Collection of awesome resources for the A-Frame WebVR framework.
Stars: ✭ 1,310 (+348.63%)
Mutual labels:  aframe, threejs, webvr
Aframe Camera Transform Controls Component
Camera transform controls component for A-Frame
Stars: ✭ 47 (-83.9%)
Mutual labels:  aframe, threejs, webvr
Networked Aframe
A web framework for building multi-user virtual reality experiences.
Stars: ✭ 803 (+175%)
Mutual labels:  aframe, webvr, webxr
lvr
👓 Augmented Reality for everyone - Out of the world experiences
Stars: ✭ 92 (-68.49%)
Mutual labels:  threejs, webvr, aframe
a-blast
💥 Save the World From the Cutest Creatures in the Universe!
Stars: ✭ 116 (-60.27%)
Mutual labels:  threejs, webvr, aframe
aframe-react
React library for A-frame
Stars: ✭ 58 (-80.14%)
Mutual labels:  webvr, aframe, webxr
Aframe Inspector
🔍 Visual inspector tool for A-Frame. Hit *<ctrl> + <alt> + i* on any A-Frame scene.
Stars: ✭ 469 (+60.62%)
Mutual labels:  aframe, threejs, webvr
A Painter
🎨 Paint in VR in your browser.
Stars: ✭ 539 (+84.59%)
Mutual labels:  aframe, threejs, webvr
View All Similar Projects ➔

Moon Rider

moonrider

Surf the musical road among the moon, stars, and northern lights.

A side project built by two people in a few months to show off VR running inside a webpage. Built with HTML, JavaScript, and A-Frame. Not meant to be an official game nor commerical product. Moon Rider is meant to be an open source resource for the web developer community to learn from, and to push forward the open WebXR initiative.

gif

Read more about it with elliottate at bsaber.com

Song maps are sourced from beatsaver.com with expressed support from the Beat Saver community admins. Supports all browsers and headsets (incl. Quest). If there are any issues, file an issue here on GitHub or leave a message in the Supermedium Discord.

Try the site out now in your browser!

Featuring various modes:

  • Ride Mode - Just sit back and enjoy the ride.
  • Punch Mode - Crush the stars.
  • Viewer Mode - Watch the beatmap within your browser.
  • Classic Mode - Surf and slice along the musical road.

Big thanks to @elliottate for helping out with this!

Development

Have Node (< v12, recommended v11) and npm installed.

npm install
npm run start

Then head to localhost:3000 in your browser.

Remixing and Forking

Make this game your own! Some easy ways to mess around:

  • To modify or add more color palettes, change src/constants/colors.js.
  • To change images, replace images in src/assets/img/ folder. For example, replace the moon at `src/assets/img/moon.png'.
  • To change models, replace models in src/assets/models/ folder. For example, replace the arrow blocks at src/assets/models/arrowblue.obj or arrowred.obj.
  • To change sounds, replace sounds in src/assets/sounds. For example, replace the hit sounds at src/assets/sounds/.
  • Change various values such as speed in src/state/index.js or BEAT_PRELOAD_TIME in src/components/beat-generator.js to mess with how fast you travel along the curve, or how much reaction time until the notes arrive to the player.

Other ways such as adding more modes are more involved, but with knowledge of A-Frame and JavaScript, is doable!

Test URL Parameters

URL Parameter Description
?debugcontroller={classic, punch, ride} Show controllers and move them with shift/ctrl + {h, j, k, l}
?debugbeatpositioning={classic, punch} Show all notes in possible positionings.
?debugstate={loading, victory} Show loading or victory screen.
?skipintro=true Skip introduction screen.

Deploying to GitHub

Showing off some crazy customizations? Enable GitHub Pages deployment to deploy gh-pages branch, and then:

npm run deploy

The website will be available on https://yourusername.github.io/moonrider/.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].