How to make VR with the web, a new video series

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.

More articles by Josh Marinacci…


10 comments

  1. Hernani

    I have a lot of interest in learning, and I think I found an excelene teacher.

    January 24th, 2019 at 14:20

    Reply

  2. Richard

    Great tutorial on webvr! I can’t wait to try this out. It looks like a lot of fun with a minimal learning curve.

    January 24th, 2019 at 17:36

    Reply

  3. Amadou Wane

    I love vr

    January 24th, 2019 at 20:31

    Reply

  4. Alex Haan

    Thank you for your clear explanations in the tutorial videos.

    It works fine in Chrome on desktop. Though I’m having some issue in Firefox because that keeps wanting to launch SteamVR. But there’s a bug open for that.

    In Chrome on desktop the camera neatly follows around the mouse thanks to including pointer.js. That module seems to imply that swiping on a touchscreen should also move around the camera. But I opened the scene in Chrome and Firefox on Android and I can’t pan around the camera with touch.

    Does touch-pan require more code after all?

    January 25th, 2019 at 05:18

    Reply

    1. Josh Marinacci

      It does require more support for touch-pan. The touch events will move the cursor/pointer object, but not the camera. My boilerplate doesn’t really support touch yet. It’s something I’m working on.

      January 26th, 2019 at 07:11

      Reply

  5. Anand prabhakar

    Thank you for the tutorial sir..
    i can now learn something new..

    January 28th, 2019 at 08:46

    Reply

  6. Mman

    Hi,
    Great resources!
    I am trying to follow along with you, however, I am just wondering what web server are you using to serve the static web pages locally.

    Thanks

    February 6th, 2019 at 06:44

    Reply

    1. Josh Marinacci

      I am using the web server built into my Mac, but any webserver will work. You could also use Glitch.com

      February 7th, 2019 at 13:14

      Reply

  7. Gustavo

    Hello, Can you put the instrument on the battery and interact with the battery playing with a drumstick?

    February 7th, 2019 at 08:21

    Reply

    1. Josh Marinacci

      I don’t understand your question.

      February 7th, 2019 at 13:13

      Reply

Post Your Comment