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.
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:
Then a sky geometry is created:
An empty array for materials is created:
A new material is created for each face of the cube by iterating through the given path to the image directory:
The sky material is created:
A mesh is now created from the newly created geometry and material:
Sphere
If the user chose for their skybox to be a sphere, then the sky geometry is created:
Then the sky material is created:
Once again, the skybox’s mesh is created:
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?
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:
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.
