Potato Logo Half Baked City Potato Logo

Skyboxes

In this tutorial we're going to create a Skybox so users can have something to look at in the background of our scene

Step 1

We'll use the finished code from Getting Started With WebXR Part 4 as our starting point. After you download the code for that project, go ahead and delete everything that's in the _createAssets() function in /scripts/core/Main.js and take out the 3 lines dealing with rotating shapes in _update()

Before we write any new code, let's find ourselves a Skybox! If you have one already you want to use, go ahead and use it, otherwise wwwtyro made this amazing space skybox generator which you can download one from

For those who have a skybox, name the files as back.png, bottom.png, front.png, left.png, right.png, and top.png (replace .png with whatever extension your images use)

Now we'll place all of our skybox files into the same directory, which for this tutorial I'll use /images/skyboxes/space/

Step 2

Time to write some code. Let's create a new folder called /scripts/components/ and add a file there called Skybox.js

In Skybox.js let's have a class that:

  1. Accepts both the path of our skybox files and the extension of those files in the constructor
  2. Has a function addToScene(scene) that tries to build the Skybox when called
  3. Creates the box of textures using THREE.CubeTextureLoader
  4. Sets the background of our scene as the loaded texture

Doing those things should lead to something like this

Documentation for CubeTextureLoader

All that's left is creating an instance of our Skybox in Main.js, so let's fill in _createAssets() to look like this

Remember to import Skybox!

Firing up our website give us this pretty cool scene we can look around

We're all done with this tutorial, but keep reading if you're interested in a possible enhancement you can add and how to go about it

Finished code in action

Git Repository

If you want to have a skybox that's rotating along one of its axis, you can't use the background property of the scene at this time. You might be able to in the future, so keep an eye out for this issue on GitHub. If you don't mind a slightly less performant solution, rather than using the background property of a scene one could apply the texture to an actual BoxGeometry and then rotate the Mesh along that axis. Considerations with this are your camera's maximum rendering distance. You don't want to make your Skybox so large that the longest distance the user could be to one of the box's corners is greater than the maximum rendering distance. Otherwise, you'll experience clipping and parts of your Skybox will be black

Using a cube mesh is less performant because then your cpu is more involved in the process of rotating your skybox

This branch of the repo shows an example of the enhancement using the less performant solution

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

...