Easily code a virtual reality web experience with A-Frame (WebVR)

With Mozilla's free framework A-Frame, anyone who can write HTML can create a virtual reality app, and anyone who knows JavaScript can animate the scene. In this video, Benji walks through an example, starting from scratch.
A-Frame:
aframe.io/
Code:
github.com/okaybenji/a-frame-...
Demo:
okaybenji.github.io/a-frame-d...
Thanks to Goldfire Studios for setting aside time for employees to work on their own projects.
goldfirestudios.com
You can follow Benji on Twitter @okaybenji
/ okaybenji
-
Learn to code for free and get a developer job: www.freecodecamp.com
Read hundreds of articles on programming: medium.freecodecamp.com

[@brandonw.2066]

Just started looking into VR using js and this video is amazing.

[@KhalidTubing]

Cool and Interesting, Glad to meet ya Benji! Khalid from Fes, Morocco.

[@niphotwala188]

Ok, This was awesome!

[@maloriec351]

This is so cool! Thanks for sharing!

[@jacobanderson10]

Thanks for the clear video

[@crowdmaker]

Killer video! I learned an incredible amount. I have one question for you - is there any particular reason you're using arrow notation to define functions like "shiftHue"? Is this now a JavaScript "design pattern"?

[@okaybenji]

I don't think it's a design pattern, just personal preference. To me, it's cleaner and easier to read and results in fewer lines of code. But you do you!

[@highcollector]

Nowadays we use those fat arrows for functions, it's part of the new Javascript spec

[@ricorobinson]

This is awesome, I was waiting for an easy, intuïtive way to add VR to the web. Know any way to make it interactive? With gaze or something?

[@ricorobinson]

Benji Kay Perfect. Thanks!

[@ellypotamianos]

I'm literate with computers, but I have not studied HTML. As an artist, I find this spectacular to animate designs on your own. Bringing a Surrealistic composition to life would be a dream of mine. I will look into your A-Frame when I have some time. My search that brings me to your video at this time is to find a way to post an HTML virtual exhibit to an HTML widget. It begins with "object" but requires "." Without changing the HTML code, I know that there is an HTML code sentence that one can implement prior to such an "object" HTML code, but I don't know it. It seems not too many people in IT at the website I'm trying to post know either. It would help tremendously if you knew.

[@dondevivirtecnologiasparae8465]

Great work. Do you know how to use a IP camera (wifi camera) with webVR javascript and HTML5 (A-Frame, Three.js) .?. I'm looking for code examples to use an external camera for smartphone.

[@aqibos]

Big props for using native JS instead of including the jQuery library! Lol.

[@BenjiJS]

Haha XD thanks

[@antoniofuller2331]

LMAO

[@arberstudio]

Can you import WebVR projects to be viewed in a native VR app? I can't find any info on this

[@ankittiwari8079]

Hey,buddy thanks for the tutorial but the ball and plane is not appearing on my computer screen.

[@emmanuelogba434]

Familiar with Aframe but didn't know you could make a sphere change color automatically, pretty cool.

[@BenjiJS]

Yeah, there are all sorts of things you can do, you're really just limited by your imagination. Animating by adjusting prop values is just one approach. You could also, for instance, change positions based on user input to create interaction. I'd recommend checking out the other examples on A-Frame's site if you're interested!

[@emmanuelogba434]

BenjiJS I will, it's been a while since I visited their site

[@FahadAli-ot5kn]

Sir awasome project thanks for shareing

[@inpace1]

Thanks a lot ! :)

[@geelemo]

Is there any full course that goes in-depth into 3d animation with or without VR

[@null_all_void]

Thanks!

[@chadpalmer8643]

Im a beginner, that texture did broaded horizons.

[@Khangeldy]

Cool thing !

[@finetree1004]

thank you teacher

[@gamer-tf2pe]

Thanks a lot

[@adrishanish9626]

I am facing problem in playing it in mobile chrome browser, it says unable requests to browser to enjoy immersive mode

[@studylicious9246]

Sir, I have made a VR headset and it's hand controller. But I am so so so much confused that how can I make a game for it. Sir, can you please make a video over it? Whatever your answer may be, but please do reply sir

[@srujanmhase2832]

This is gold👌👍

[@BenjiJS]

Thanks, super glad you enjoyed it!!

[@shanruan2524]

Pure gold

[@user-wo6gm2ut5v]

how to put this vr scene into google cardboard?

[@hussainsalih9736]

Good

[@mohamedfizerali2488]

i using Windows, i used notepad for html, when i run in mozilla or chrome it shows nothing. in address tab it shiw the directory name,filename.html. it shows only blank, pls help fixing this issues

[@BenjiJS]

Sure, I can try to help. Could you upload your code somewhere I can take a look? (Github/Gist)?

[@mohamedfizerali2488]

i just coded script and a-scene. it is enough for single sphere view haa . am i right mate.

[@BenjiJS]

¯\_(ツ)_/¯ I'd have to see the code! You could also try copying the code from the Github repo in the description and see if it works for you.

[@trankhanhhuynh2613]

I'd like to interject for a moment. Notepad is terrible. Use VS Code/Atom/Vim/Sublime Text instead, it is similar to Notepad but better. _I am using Atom_.

[@trankhanhhuynh2613]

Can you give us your code?

[@ChristopherWarrior]

I have an idea for a new VR project. Can I email you the idea? I need help building it and was hoping you could point me in the right direction.

[@calebprenger3928]

What does math.sin do?

[@BenjiJS]

It's a sine wave function. It's commonly used as an easing function in coded animations. Can be used for instance to make things bob up and down. en.wikipedia.org/wiki/Sine_wave developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sin

[@mendezfredy]

a-frame link is wrong.

[@freecodecamp]

Fixed.

[@louielouie9502]

Blue ball of wonder

[@antoniofuller2331]

Three.js is already easy enough, A-frane just makes autopilot LMAO

[@galihridhoutomo]

Sir, not work

[@lukes.3227]

Second Comment

[@sarangs8441]

First Comment

[@okaybenji]

Sarang S y tho

[@nathanhelmburger]

Thanks!

[@nathanhelmburger]

I love doing little programmatic art projects in javascript with simple animated geometric figures, and I thought: "how awesome would it be if I could make a VR version of this? I wonder if that's easy to adapt from the regular javascript? I wonder if there's someone who made a tutorial video to show this?" Bam. Exactly what I was hoping for. Time to make some simple animated art, and risk making myself seasick with too many twirling spheres and cubes...