Three Three.js Cubemap Tests

Cube maps used on this page are by Emil Persson, but with resolution reduced to 512-by-512.

Drag on a canvas with left-mouse button to rotate the view.


1. Textured Cube

Here, each of the six images from the cube map is loaded separately.
They are combined into a MeshFaceMaterial and applied to the cube.
You can see how the pieces of the cube map match up at the edges.


2. Skybox

This is simlar to the first example, but the cube is viewed from the
inside, and the face materials are MeshBasicMaterials instead of
MeshPhongMaterial. No lighting is used in this scene.


3. Skybox with Cubemap Texture

Similar to the second example, but it textures the skybox with a single
cubemap texture instead of with six separate single-face textures. This uses a
ShaderMaterial to implement the cubemap texture. Uses different images for variety.