Virtual reality (VR) seems complicated, but with a few JavaScript libraries and tools, and the power of WebGL, you can make very nice VR scenes that can be viewed and shared in a headset like an Oculus Go or HTC Vive, in a desktop web browser, or on your smartphone. Let me show you how:
In this new YouTube series, How to make a virtual reality project in your browser with three.js and WebVR, I’ll take you through building an interactive birthday card in seven short tutorials, complete with code and examples to get you started. The whole series clocks in under 60 minutes. We begin by getting a basic cube on the screen, add some nice 3D models, set up lights and navigation, then finally add music.
All you need are basic JavaScript skills and an internet connection.
Here’s the whole series. Come join me:
1: Learn how to build virtual reality scenes on the web with WebVR and JavaScript
2: Set up your WebVR workflow and code to build a virtual reality birthday card
3: Using a WebVR editor (Spoke) to create a fun 3D birthday card
4: How to create realistic lighting in a virtual reality scene
5: How to move around in virtual reality using teleportation to navigate your scene
6: Adding text and text effects to your WebVR scene with a few lines of code
7: How to add finishing touches like sound and sky to your WebVR scene
To learn how to make more cool stuff with web technologies, subscribe to Mozilla Hacks on YouTube. And if you want to get more involved in learning to create mixed reality experiences for the web, you can follow @MozillaReality on twitter for news, articles, and updates.
About Josh Marinacci
I am an author, researcher, and recovering engineer. Formerly on the Swing Team at Sun, the webOS team at Palm, and Nokia Research. I spread the word of good user experiences. I live in sunny Eugene Oregon with my wife and genius Lego builder child.
10 comments