About
OrBI is a virtual reality user interface developed with A-FRAME, a virtual reality framework built on top of the THREE.JS 3D library, which means that it can run on Oculus Quest, Rift, WMR, SteamVR, desktop, and mobile, though the latter is the focus of this project.
OrBI was designed to be used without controllers and with few or no physical buttons, as is common when individuals are introduced to virtual reality via smartphones and inexpensive HMDs such as Google Cardboard.
Projects
OrBI was originally designed for virtual reality apps in AVRGroup's VRTools project; links to some of those apps are provided below to demonstrate OrBI's features.
How to use
A simple application is provided below to show how OrBI works. You can learn more how to use clicking here.
<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://avrgroup.github.io/vrtools/projects/libs/orbi.js"></script>
<script>
AFRAME.registerComponent('app', {
init: function () {
const orbi = this.el.components['orbi'];
this.box = document.querySelector('#box').object3D;
this.isToRotate = false;
orbi.addButton('myButton', '#myTexture', () => {
this.isToRotate = !this.isToRotate;
});
},
tick: function (time, delta) {
if (this.isToRotate) {
this.box.rotation.y += 0.001 * delta;
}
},
});
</script>
</head>
<body>
<a-scene background="color: #ECECEC">
<a-assets>
<img id="myTexture" src="https://avrgroup.github.io/vrtools/projects/src/assets/icons/rotation.png">
</a-assets>
<a-box id="box" position="0 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-plane position="0 0 -4" rotation="-90 0 0" width="7" height="7" color="#7BC8A4"></a-plane>
<a-entity id="rig" position="0 0 0">
<a-entity id="camera" camera position="0 1.6 0" look-controls="pointerLockEnabled: true">
</a-entity>
</a-entity>
<a-entity orbi="dimension: 1 1; orbits: 1 1.25; theta: 35; border: 1 #ABABAB; transparency: true;" app>
</a-entity>
</a-scene>
</body>
</html>