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:
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
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
index.html
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
There are a few cosmetic things we need to take care of before finishing
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
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
Comment
Please Wait...
Log in/Sign up to comment
Server error, please try again later
...