Virtual reality has become a thing again! All of the usual suspects are involved: HTC, Microsoft, Samsung, and Facebook, among others, are all peddling their respective devices. These predictable players shouldn’t be having all the fun, though!
I’ve been making websites for quite a while, but only in the last couple of years have I explored the use of front-end technologies for more than just websites. Having spent some time using tools such as canvas and three.js, my mind has been opened to the wonderful potential this side of the web can offer us as developers (and artists!).
But I don’t have those fancy goggles
There’s no denying that not having the kit seems like a barrier to entry. However, you don’t need any sort of extra hardware for most of this tutorial so you can still have fun moving your phone around exploring the 3D world you’ll create.
To play with the VR portion of this tutorial, you’ll want some sort of VR Viewer. The cheapest way to do this is to buy a headset that turns your mobile phone into a VR headset, you simply slot it your phone in and away you go. These headsets range from a £3 to £50 so have a look around to see what best suits you and your budget. “Google Cardboard” is the term you’ll hear about these types of devices.
What we’ll be making
Here’s a demo. All the source code for the steps we’ll be taking is available on GitHub too.
If you’re viewing on a mobile or tablet, you can look around by moving the device. If you’re on a laptop, you have to click and drag. If you have a VR Viewer for your phone, there’s an option to go into actual VR mode by clicking on the “start VR” button.
We’ll tackle it in three parts:
- Make the three.js scene (+ demo)
- Add in VR Controls (device motion) (+ demo)
- Apply the VR Effect (stereoscopic picture) (+ demo)
Making the scene
Those who have some experience with three.js may want to skip this part and head straight for the VR stuff.
Three.js has become the web dev’s favorite library for creating 3D scenes. Don’t let that extra dimension scare you; it’s not so difficult to get going! Before we even think about VR, we’re going to make a simple 3D world that has a bunch of cubes, slowly spinning.
If you’re new to three.js I recommend taking a look at the “creating a scene” tutorial included in the documentation. It goes into a little more detail than I will, and you’ll have a spinning cube up and running in no time. Otherwise feel free to jump straight in here, we’ll still be going quite slow.
Firstly we need to set up a document with the three.js library included. You can install with Bower, npm, or keep it simple and get the file from a CDN.
Please note that the three.js API changes from time to time. This tutorial has been created with r82 and while it’s always good to use the newest version of any library, for our purposes it may make sense to use the same version used in the examples.
< !DOCTYPE html>
Now we need to set up the scene, the camera, and the renderer. The scene acts as a container for all objects to go inside. The camera is one of those objects and gives us a point of view from inside the scene. The renderer takes the view from the camera and paints it onto a canvas element.
// Create the scene and camera var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 ); // Create the renderer var renderer = new THREE.WebGLRenderer(); // Set the size of the renderer to take up the entire window renderer.setSize( window.innerWidth, window.innerHeight ); // Append the renderer canvas element to the body document.body.appendChild( renderer.domElement );
We’ll also need to tell the renderer to render the scene:
// Render the scene renderer.render( scene, camera );
For now on, you should make sure this rendering happens last in your code. Later we’ll be firing it every frame inside of an
At this point, your scene should be rendering with a canvas element on the page, but all you’ll see is black.
Let’s add a cube to the scene
It comprises of a geometry and a material, held together in a mesh:
// Create cube var material = new THREE.MeshNormalMaterial(); var geometry = new THREE.BoxGeometry( 50, 50, 50 ); var mesh = new THREE.Mesh( geometry, material ); // Add cube to scene scene.add(mesh);
Now you should see a cube being rendered, yay!
Let’s make lots of cubes by wrapping the code in a
var cubes =