My goal is to learn WebVR and experiment with interfaces and experiences with 3Dof VR experiments. The base application is using three-quickvr boilerplate built upon Three.js. It's a really good starting point for doing Vr experiences. While this setup will work with Cardboard and all 3Dof/6Dof VR devices, interactions will require a VR controller. My default development devices is an Oculus Go 3Dof VR headset and should work with most devices.
The main render is a simplex noise function over a grid of objects, and using dat.guiVR you can control and change settings in real-time.
- MeshDeform - simplex wave across a plan mesh, works pretty well with no shadows.
- Shadows - casing and recieving shadows - though this drags down Oculus Go displays.
- MazeVR - binary maze and some testing for using the thumpad to move around the world environment.
- Drift - particle system that changes around you as you sail though the field.
- Tunnel - fly though a dark tunnel, no user interaction.
The apps entry point is the index file which points to one of the other JS files containing Render
classes. Example and default is index.js
points to => Cartridge/index.js
where all the Magic should happen..
Other experiments are saved in src/archive
and you can easily point the index file.
// import Render from './Cartridge/'; <-- comment this out
import Render from './archive/MazeVR/';
/* other stuff */
window.onload = () => {
const demo = new Render();
return demo;
};
Controller help and utilities THREE.VRController which makes a lot of the work easy for showing visual feedback to a VR controller. Easy to wire up with callbacks, this was such a big help!
Visual interface using dat.guiVR, the VR version of the original 2D customizable configuration panel.
Requires Node v8.9.4 or greater
$ yarn install
$ yarn dev & open http://localhost:2030