The making of WhitestormJS’s skybox component

At some point in time, we realized we needed to add skyboxes to WhitestormJS. We knew we’d have to do it at some point; what game engine doesn’t have skyboxes?

Research

Figuring out how skyboxes work was simple enough. After a bit of research it became pretty clear what we’d have to do to add them to our engine.

Diagram of a Skybox

Basically, the skybox is nothing but a giant cube (or sphere) surrounding the game scene with a texture on its inside.


How it works

Cube

If the user chose for their skybox to be a cube, then an array of directions is created:

Example code

Then a sky geometry is created:

Example code

An empty array for materials is created:

Example code

A new material is created for each face of the cube by iterating through the given path to the image directory:

Example code

The sky material is created:

Example code

A mesh is now created from the newly created geometry and material:

Example code

Sphere

If the user chose for their skybox to be a sphere, then the sky geometry is created:

Example code

Then the sky material is created:

Example code

Once again, the skybox’s mesh is created:

Example code

Wrapping it up

The new skybox mesh, created from a cube or sphere, is then added to the underlying Three.js scene, centered at the camera.

You can check out the entire skybox class here.

What does this look like?

Example skybox image

When used correctly, a skybox can be a pretty nice addition to a 3D scene. You can see this exact example here.

To create this skybox was very simple:

Example code

The path property linked to this directory, which contained the skybox image files.


What’s a component?

As you probably read in the title, the skybox class is a component of WhitestormJS. Some other components are the Fog and FogExp2 classes.

WhitestormJS components are essentially parts of the engine that add a very specific feature, and serves a single purpose. The two fog classes simply add fog to a scene, and the skybox class obviously adds a skybox. They’re meant to be single-use classes for each scene, and not meant to be used several times like lights, or shapes.