Hey web developers! Looking for a fun way to build VR experiences on the Oculus Quest and Go? This tutorial will provide a brief guide to drafting an AFrame.IO VR experience that includes GLTF model loading and teleportation controls. As web developers, we have the unique opportunity to link data, models, and services to WebXR experiences. We really love seeing AFrame.IO work well on the Oculus platform. These are exciting times and trends!
To get started, please make sure to install Mozilla FireFox Mixed Reality on your Oculus Quest/Go headset. In the following video, you can see the code sample we’ll explore. I downloaded a temple model from TinkerCAD in GLB format. Using Blender, I converted the file to GLTF. Using the following script hosted on glitch.me, I was able to load the GLTF model.
AFrame.IO Script for Oculus WebXR
Fork the script at https://vrtemplate1.glitch.me/
<!DOCTYPE html <html>
<!-- Thank you to TakashiYoshinaga!
https://github.com/TakashiYoshinaga/Oculus-Quest-Interaction-Sample
-->
<html>
<head>
<meta charset="utf-8" />
<title>Oculus Demo</title>
<meta name="description" content="Oculus Quest Demo" />
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script
src="https://rawgit.com/fernandojsg/aframe-teleport-controls/master/dist/aframe-teleport-controls.min.js"></script>
<script src="//cdn.rawgit.com/donmccurdy/aframe-physics-system/v3.3.0/dist/aframe-physics-system.min.js"></script>
</head>
<script>
AFRAME.registerComponent("input-listen", {
init: function () {
//X-button Pressed
this.el.addEventListener("xbuttondown", function (e) {
this.emit("teleportstart");
});
//X-button Released
this.el.addEventListener("xbuttonup", function (e) {
this.emit("teleportend");
});
}
});
</script>
<body>
<a-scene physics="debug: false; gravity: 0; restitution: 0.9; " background="color: #AAAAAA">
<a-assets>
<a-asset-item id="model"
src="https://cdn.glitch.com/dd93b995-70fe-4c65-a6dd-78d725974a08%2Fchinese-yard.gltf?v=1594497997177">
</a-asset-item>
</a-assets>
<a-entity id="glbtest" gltf-model="#model" position="0 0 0" scale="0.5 0.5 0.5">
</a-entity>
<a-entity id="cameraRig">
<a-entity id="head" camera wasd-controls look-controls position="0 1.6 0">
</a-entity>
<a-entity id="ctlL"
teleport-controls="cameraRig: #cameraRig; teleportOrigin: #head; startEvents: teleportstart; endEvents: teleportend"
raycaster="objects: .collidable; far:1.2;" laser-controls="hand: left" input-listen>
<a-text value="X: Teleport" position="0 0.05 0" rotation="-90 0 0" scale="0.1 0.1 0.1" align="center"
color="#FFFFFF"></a-text>
</a-entity>
<a-entity id="ctlR" raycaster="objects: .collidable; far:1.2;" laser-controls="hand: right" input-listen>
<a-text value="This is your hand!" position="0 0.05 0" rotation="-90 0 0" scale="0.1 0.1 0.1"
align="center" color="#FFFFFF"></a-text>
</a-entity>
</a-entity>
</a-scene>
</body>
</html>
Key Libraries
In the top section of the document, we can import several script files that will power the VR experience. To learn more about these script files, please visit the following links:
– https://github.com/fernandojsg/aframe-teleport-controls
– https://github.com/donmccurdy/aframe-physics-system
– https://aframe.io/
– https://aframe.io/docs/1.0.0/components/gltf-model.html
Teleportation
In this post, I want to mostly review how to implement teleportation features into the AFrame.IO scene. The following JavaScript implements the teleportation movement behavior. Most people get motion sickness if you simply translate and slide a user around a VR experience. As an industry, the “fishing line” teleportation UX helps the user jump around a 3D environment.
AFRAME.registerComponent("input-listen", {
init: function() {
//X-button Pressed
this.el.addEventListener("xbuttondown", function(e) {
this.emit("teleportstart");
});
//X-button Released
this.el.addEventListener("xbuttonup", function(e) {
this.emit("teleportend");
});
}
});
GLTF Loading
In the following HTML code, we pre-load a GLTF model called “model” and associate it with a AFrame.IO model entity. Please notice that we positioned that model at location (0,0,0) with 50% scaling factor.
<a-assets>
<a-asset-item
id="model"
src="..."
>
</a-asset-item>
</a-assets>
<a-entity
id="glbtest"
gltf-model="#model"
position="0 0 0"
scale="0.5 0.5 0.5"
>
</a-entity>
Let’s setup our camera and related parameters. This will also add “look” controls and navigation using WASD.
<a-entity id="cameraRig">
<a-entity
id="head"
camera
wasd-controls
look-controls
position="0 1.6 0"
>
</a-entity>
In the last section of markup, we configure the left and right hand controller. For this tutorial, we’ll simply show the code for the left hand.
Configure hands
<a-entity
id="ctlL"
teleport-controls="cameraRig: #cameraRig; teleportOrigin: #head; startEvents: teleportstart; endEvents: teleportend"
raycaster="objects: .collidable; far:1.2;"
laser-controls="hand: left"
input-listen
>
<a-text
value="X: Teleport"
position="0 0.05 0"
rotation="-90 0 0"
scale="0.1 0.1 0.1"
align="center"
color="#FFFFFF"
></a-text>
</a-entity>
Thanks to Takashi Yoshinaga for drafting this code sample. Please make sure to check out his full code sample that includes object gripping, teleportation, and ball throwing.
https://github.com/TakashiYoshinaga/Oculus-Quest-Interaction-Sample
Thanks to Mozilla, AFrame.IO and FireFox Mixed Reality for making XR technology open to the community of web developers and makers. As FireFox Reality continues, we look forward to seeing AFrame.IO work well with technologies like HoloLens 2. I know that I’m already excited by the ThreeJS support.
Let us know if you make anything cool!!
Top Stories on InspiredToEducate.NET
- Easy Data Visualization with Google Charts and JavaScript
- Learn to Build Your Own Conversational Bot using ChatScript
- AFrame: Building WebVR experiences with HTML and JavaScript
- Sonic-PI: Sound synth application for learning coding and music
- Using Android, JavaScript, and Arduino to control your robot.