PORTFOLIO

Welcome To Virtual Reality

Alexander Lester - Website Design & Website Development - July 20, 2018

See the Pen WebVR by Alexander Lester (@awllwa) on CodePen.

Welcome to our very first blog post!! My name is Alexander Lester, I am the Lead Developer and Co-CEO of Delta Vel and I will be walking you through the following tutorial. In this post, we will be going over how to use Google's VRView Javascript SDK to embed any Virtual Reality image or video into a website.

 

Let's get started.

 

So before we get into any code, we're going to need a 360-degree image or the URL pointing to a 360-degree image.

 

"now c'mon Alex, who the hell has a 360-degree image just laying around!" ~ Fake Critic Steve

Yeah yeah Fake Critic Steve, weird name by the way, but I've got your back don't worry. 

 

Please feel free to either download this image we took for Mary Ann's Fine Jewelry or just copy the provided image URL.

 

Alright, now we can get into the ever-so-wonderful code!

 

First, let's add a div with "vrview" as its id and class name, like so:

<div id="vrview" class="vrview"></div>

 

Next, we're going to want to include Google's VRView SDK. To do this, we're going to place the following line right above our closing </body> tag:

<script src="https://storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>

 

Believe it or not, we're already almost done; don't you just love Google? I mean, aside from them probably creating a god-like AI that may or may not use us all as living batteries in the near-future, they're pretty cool!

 

Anyway, here are your last two steps.

 

Now that we have our "vrview" div and the VRView SDK, we just have to add an event listener...

window.addEventListener('load', onVrViewLoad);

 

and then, right underneath the event listener, we're going to *finally* put in the function that initializes our VRView.

function onVrViewLoad() {
  var vrView = new VRView.Player('#vrview', {
    image: 'https://goo.gl/aJe23G',
    is_stereo: false, 
    height: "100%", 
    width: "100%"
  });
}

 

If you have your own 360-degree image, you can put in either the path to the image (e.g. /path/to/image) or the URL leading to the image, for the 'image' key.

 

If you've done everything right, it should look something like the preview at the top of this page.