Potato Logo Half Baked City Potato Logo

Getting Started With WebXR Part 1 – Creating a Scene

For those who have never built a website, my advice is to familiarize yourself with web development before beginning this tutorial

This tutorial series will focus on:

  1. Creating a scene
  2. Allowing users to immerse themselves within the scene via VR Headset
  3. Allowing users to look around the scene on Desktop / Laptop
  4. Allowing users to look around the scene on mobile

By the end of this tutorial series, we'll end up with a WebXR page accessible by XR Browsers, Desktop / Laptop Browsers, and Mobile Browsers

Step 1

The first thing we'll do is download the module build of three.js from here. This tutorial is up to date with r115

three.js has a bunch of community supported components written as both scripts and modules, but are soon ending support for the scripts in favor of just maintaining the modules. Best to get used to using ES6 Modules now if you want to use those components, which we will in these tutorials

Setup a directory for it like so: /scripts/three/build/three.module.js

Next, we'll create an html document called index.html that includes a script tag pointing to a module we'll soon write called setup.js

ES6 Fact: Only modules can import other modules

Notice the div which we'll put to use later. Now we'll create /scripts/core/setup.js as our entry module, and /scripts/core/Main.js which can do all the heavy lifting. Here's what setup.js should look like

In our Main.js file we'll do the following steps

  1. Import three.module.js
  2. Create a renderer
  3. Use the renderer to create a canvas element for index.html
  4. Create a scene
  5. Create a camera and add it to the scene
  6. Create a simple Sphere + Cube
  7. Group the Sphere + Cube together and add them to the scene
  8. Add light to the scene so we can see our shapes in action
  9. Create an animation loop that rotates our shapes and give it to the renderer

Here's what all of this looks like

Side Note: Everything gets rendered in the canvas element with WebGL, something I hope you never have to worry about as three.js takes care of a whole ton of ugly WebGL things you don't want to

Now if you open up your web page you should see something like this with your shapes rotating about their local origin

Step 2

There are a few cosmetic things we need to take care of before finishing

  1. Get rid of that pesky whitespace around our canvas to make this app properly take up the whole screen
  2. Handle when the browser is resized (update size of canvas and aspect ratio) and don't let people scroll out of the page 😈

To get rid of the whitespace, we just need some css. Create /css/index.css with the following

Whoa so easy! Don't forget to add <link rel="stylesheet" href="./css/index.css"> to your index.html file

Now we just add some event listeners to the bottom of our function in Main.js to handle resizing the webpage and to disable scrolling out of the page

Now we're all done with our full screen scene! Our codebase isn't the most well organized, but we'll take care of that in the next tutorial

Finished code in action

Git Repository

Glossary

  • module – The modern way of splitting up and importing your JavaScript files, now preferred over html script tags
  • three.jsi – JavaScript library for creating and displaying 3D graphics
  • WebGL – API for rendering graphics, compatible with modern web browsers and allowing for GPU accelerated processing native in the browser
  • renderer – The beautiful beast that creates our scene via WebGL
  • scene – This is what has all the information on what is to be rendered such as 3D models, lights, where these things are located, etc.
  • camera – The point from which the user "sees" our scene
  • animation loop – The function that gets called before every frame to orchestrate our scene
  • local origin – Each object in three.js has a local coordinate system with the object initially at the origin. Adding an object as a child to another object and moving the parent within the parent's coordinate system won't effect the child's relationship with its own coordinate system

Feeling generous/want to support me in writing tutorials? Then buy me a coffee, which I'll probably use for boba or almonds (raw and unsalted you heathens) because I don't like coffee

Continue on to Part 2 – VR Sessions

Comment

Please Wait...

Log in/Sign up to comment

Server error, please try again later

...