This was originally published on codinhood.com
Skyboxes are typically used in video games to create the illusion of far off three-dimensional backgrounds. A skybox is essentially a cube with textures on each side of the cube. The player or camera is then placed within the cube so that all six textures surround them giving them the illusion that they're within a much larger environment. reactnativeinfinity.com makes use of this technique to create the illusion of spinning in space. The Codepen below has a few different skyboxes you can try out. Click and drag the screen to move around.
Three.js setup
First, set up a scene
, camera
, and renderer
within an init
function we will call to initialize Three.js. We'll use a PerspectiveCamera with a position that is zoomed out pretty far so we can see the box before jumping in. We'll also use the THREE.WEbGLRenderer
and append it to the body of the page. Finally, the animate
function will handle rerendering the scene with any updates we add.
let scene, camera, renderer, skyboxGeo, skybox;
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(
55,
window.innerWidth / window.innerHeight,
45,
30000
);
camera.position.set(1200, -250, 20000);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.domElement.id = "canvas";
document.body.appendChild(renderer.domElement);
animate();
}
function animate() {
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
init();
Import the core Three.js library.
<script src="https://threejs.org/build/three.min.js"></script>
Set the body height to the viewport height and add a grey background to the body so we can see the cube.
body {
margin: 0;
height: 100vh;
background: #bdc3c7;
}
Since we haven't added any objects we'll only see a grey background right now.
Add Three.js box
We can add a box with THREE.BoxGeometry
with width
, height
, and depth
set to 10000
. Then use THREE.Mesh
to apply a texture to it, in this case, it will default to a pure white
texture. Finally, add the object to the scene before calling the animate
function within the init
function.
function init() {
...
skyboxGeo = new THREE.BoxGeometry(10000, 10000, 10000);
skybox = new THREE.Mesh(skyboxGeo);
scene.add(skybox);
animate();
Even though it's a cube, it looks like a square because we're viewing it straight on. To verify it is a cube we can add a rotation animation within the animate
function:
function animate() {
skybox.rotation.x += 0.005;
skybox.rotation.y += 0.005;
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
Skybox Mesh Material
You can find free skybox images on opengameart.org or you can search Google for "free skybox images". There should be six images that correspond to each side of the cube that seamlessly mesh together. For example, for React Native Infinity, the six space images correspond to different sides as shown below.
Each image should be named according to the side which they correspond to, for example, purplenebula_ft.png
is the front image, purplenebula_rt.png
is the right image, and purplenebula_dn.png
is the bottom image. There are three steps we need to follow to add these images to our cube:
- Load each image as a Texture
- Map each Texture to a Material array
- Add Material array to the Skybox cube
1. Load Images as Textures
Textures can be loaded in Three.js using the TextureLoader().load()
function. The load()
method takes the path of the image as a parameter. We could load each image by creating six TextureLoader()
functions, like this:
const ft = new THREE.TextureLoader().load("purplenebula_ft.jpg");
const bk = new THREE.TextureLoader().load("purplenebula_bk.jpg");
const up = new THREE.TextureLoader().load("purplenebula_up.jpg");
const dn = new THREE.TextureLoader().load("purplenebula_dn.jpg");
const rt = new THREE.TextureLoader().load("purplenebula_rt.jpg");
const lf = new THREE.TextureLoader().load("purplenebula_lf.jpg");
But it would be better to create a reusable function that loops through all of our images for us. Create a function createPathStrings()
that will create an array of path strings from a file image name, filename
.
function createPathStrings(filename) {
const basePath = "./static/skybox/";
const baseFilename = basePath + filename;
const fileType = ".png";
const sides = ["ft", "bk", "up", "dn", "rt", "lf"];
const pathStings = sides.map(side => {
return baseFilename + "_" + side + fileType;
});
return pathStings;
}
This should create an array of strings that represent the path to each image:
['./static/skybox/purplenebula_ft.jpg', './static/skybox/purplenebula_bk.jpg', ...]
Next, load each texture using TextureLoader().load()
by mapping over the array above. Let's create another function, createMaterialArray()
, to generate a new array of loaded textures. We will also pass in the filename
parameter into the createPathStrings
function.
let skyboxImage = "purplenebula";
function createMaterialArray(filename) {
const skyboxImagepaths = createPathStrings(filename);
const materialArray = skyboxImagepaths.map(image => {
let texture = new THREE.TextureLoader().load(image);
return texture;
});
return materialArray;
}
2. Map each Texture to a Mesh array
The MeshBasicMaterial()
Three.js method will allow us to map our textures above to a Three.js material. Instead of creating another function to do this, we can simply modify the createMaterialArray()
function to return a Three.js material instead of the loaded texture.
function createMaterialArray(filename) {
const skyboxImagepaths = createPathStrings(filename);
const materialArray = skyboxImagepaths.map(image => {
let texture = new THREE.TextureLoader().load(image);
return new THREE.MeshBasicMaterial({ map: texture, side: THREE.BackSide }); // <---
});
return materialArray;
}
3. Add Mesh array to the Skybox cube
We're finally ready to add our mesh array to the cube we created above. First, create a variable, skyboxImage
, with the base file name. Pass that variable into the createMaterialArray
to generate our mesh array. Finally, pass that array into the second parameter of the new Three.Mesh()
function.
const skyboxImage = 'purplenebula';
function init() {
...
const materialArray = createMaterialArray(skyboxImage);
skyboxGeo = new THREE.BoxGeometry(10000, 10000, 10000);
skybox = new THREE.Mesh(skyboxGeo, materialArray);
scene.add(skybox);
animate();
}
Our cube should now have the mesh array, click the "Outside Box" button to see how this should look.
Place camera inside the cube
We can change the camera
's z
position from 20000
to 2000
to put the camera inside the cube.
function init()
...
camera.position.set(1200, -250, 2000);
...
}
Orbit Controls
While the above works to put us inside the cube, it would be better if could control the camera with the mouse and look around the environment. The Orbit Controls package for Three.js allows us to do that add a <script>
import:
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
First, add another variable named controls
to the initialization at the top. Then assign that variable to the OrbitControls
method while passing in the camera
and domElement
. Enable the controls by setting controls.enabled
to true
. Finally, set a minDistance
and maxDistance
so that the user cannot zoom outside of the cube.
let scene, camera, renderer, skyboxGeo, skybox, controls;
function init() {
...
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enabled = true;
controls.minDistance = 700;
controls.maxDistance = 1500;
...
animate();
}
Next, remove the rotation in the animate()
function and add controls.update()
;
function animate() {
controls.update();
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
You should now be able to click and drag the environment around to see whatever part you want. If you want the environment to rotate again, like you're in space rotating, you can use the autoRotate
property:
function init() {
...
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enabled = true;
controls.minDistance = 700;
controls.maxDistance = 1500;
controls.autoRotate = true;
controls.autoRotateSpeed = 1.0;
...
animate();
}
Resize window
If you resize your browser window after initialization the canvas will not resize to fit the new window size. To fix this create a function to redefine the camera.aspect
and renderer
size to the height and width of the window
:
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
Then add an event listener on the window
resize
event and pass this new function. Add this event listener to the init()
function right above the animate()
call.
function init() {
...
window.addEventListener('resize', onWindowResize, false);
animate();
}
The canvas will now resize with the window.
Conclusion
Skyboxes are a neat way to create the illusion of a 3d environment quickly. Although generally used for video games, there might be some creative ways you could implement them in a web project.
Top comments (0)