- MozVR Home
- Aframe Home
- WebVR Home
- Firefox Nightlies
- MozVR codepens
- Aframe docs Reference for all things aframe!
- Firefox Nightly installed
- An active Github account
- A free account at Codepen.io
- Head to the Aframe link and check out some of the examples
- When you have a feel for the examples, click "Getting Started"
- Read through the Introduction, and then return to Getting Started and read through
- Let's click the Codepen link and sign up for a Codepen account with our GitHub credentials
- Once you have an account, Open up CodePen Hello World example from the Aframe Getting Started page, Log In to your Codepen account, and take a look at the interface:
- Codepen is a Self-contained development editor in your browser
- It contains fully functional panels for HTML, CSS AND JS
- It allows for direct visualization of your development while editing
- It sports a console to view errors, and both development and detail views and allows for forking of projects
- Go ahead and play around with the interface a bit!
- Once you have familiarized yourself with Codepen, click the "Fork" button to create a new instance of that "Hello World" program to create one that belongs to >>you<< in Codepen. Change the name to "Hello YOUR_NAME Aframe"
- You have now effectively cloned this example as your own, and can change it! (Furthermore, when you are done developing, you'll click "Save" and your work will be saved for your project. Nifty!)
- This is a pretty common workflow and you will be both forking some pens and creating new ones as you become more familiar with VR development.
- Now that we have a feel for Codepen and basic Aframe, let's read up on cursors
- Now open the following example : Cursor with Visual Feedback
- You'll see that by focusing and clicking on each box, we get a pre-determined event defined by the code.
- Take a look and discuss what's happeneing here and how you might change it.
Go ahead and fork this example and we can change some of the behaviors to get a feel for how this works. When we are finished, save your codepen!
This example's code will allow us to use an image with specific dimensions (Equirectangular) to be viewed as a 360 panorama in aframe.
-
First, we'll need an image! For our example there are several ways to access an image.
-
Take a quick look at the images in the "equirectanular" link above. They are all formatted to work correctly for our example. One quick way to make an image available to reference in our code is to upload one to Github and make it public. There are fancier ways to accomplish this, but this way is simple, and works for an initial foray into 360 images. If you know how to do this, go ahead and download and and add it to a Github a repo to make it available.
-
You can also refer to one of the following pre-publicized test images we've already uploaded at Github: Empire State Building, Thailand, or Space Walk
-
You could also use Dropbox! To do this, Use the following public image at Dropbox as your source instead: [Central Park]https://dl.dropboxusercontent.com/u/5881673/central-park-umpire-rock.jpg
-
When you have your chosen image set up, we will need a new codepen to take advantage of it. Open up Codepen, create a new pen, and name it.
-
Add the following code to your HTML window :
<!-- define the scene -->
<a-scene>
<!-- add asset id (a name you make up) and source( and address for an existing accessible image) -->
<a-assets>
<img id="empire" src="https://raw.githubusercontent.com/AlliVaughn/test_pic_repo/master/empire_state.jpg">
</a-assets>
<!-- refer to that id above by calling the id with an octothorpe (#) -->
<a-sky src="#empire"></a-sky>
</a-scene>- Next, in Codepen, open "settings" and add the following code to the "Stuff for " section and save/close:
<script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>This script loads the aframe.js library that will allow us to view the parorama picture in a VR environment.
- Reload, and take a look at your photo!
How does this work? Putting the source in the assets div preloads the image from the source, where it's ready to be displayed when the HTML code in a-sky refers to it. Taking this further, one could easily load a few images and use some Javascript to make either a rotating gallery or use the cursor + function to choose an image to view!
The [PLY](https://en.wikipedia.org/wiki/PLY_(file_format) is an open standard for representing 3D objects. It's similar to Collada and OBJ. PLY objects can be used in A-frame with a little help from a 3rd-party component. 3D objects are often quite large, and so usually need to be served from a powerful server
Reference: 3D PLY Example
Create a fresh Codepen, title it, and add the following code to its HTML window:
<!-- define the scene -->
<a-scene>
<!-- add the source( address for an existing accessible 3d PLY formatted file) and define the scale and rotation -->
<a-entity scale="0.5 0.5 0.5" rotation="-90 0 0" ply-model="src: url(https://dl.dropboxusercontent.com/u/5881673/UALVP-UALVP-2_M11590-18284.stl.ply);"></a-entity>
</a-scene>- As in the last example, open "settings" and add the following code to the "Stuff for " section and save/close:
<script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
<script src="https://rawgit.com/donmccurdy/aframe-extras/v2.1.1/dist/aframe-extras.loaders.min.js"></script>
- This loads both the aframe library and a custom component that can handle bringing in PLY files into A-frame scenes.
Save the Codepen. You should be presented with a fossil skull, exported from the "Morphosource" library.
Last edited: Nov 27, 2016 by Allison Vaughn