threex.skymap

threex.skymap is a three.js extension to use the use of skymaps. Additionnaly it provides skymaps of cubemaps taken in three.js examples. You can find more examples of texture cubes here

Show, Don't Tell

• examples/basic.html [view source] : It shows a basic usage with reflection and skybox.
• examples/cubetexturehcross.html [view source] : It shows a simple usage of threex.cubetexturehcross.js.
• examples/requirejs.html [view source] : It shows a basic usage with reflection and skybox thru require.js

How To Install It

You can install it manually. Just do

<script src='threex.skymap.js'></script>
<script src='threex.texturecube.js'></script>
<script src='threex.cubetexturehcross.js'></script>

You can install with bower.

bower install threex.skymap

How To Use It

For Skymap with a well known urls

var mesh    = THREEx.createSkymap('mars')
scene.add( mesh )

Here is the list of well known urls, "bridge2", "escher", "park2", "park3med", "pisa", "skybox", "swedishroyalcastle", "mars". or just do this line in jsconsole.

console.log(Object.keys(THREEx.TextureCube.WellKnownUrls));

For Skymap with your own skymap.

var textureCube = THREEx.createTextureCube([
    'cube_px.jpg', 'cube_nx.jpg',
    'cube_py.jpg', 'cube_ny.jpg',
    'cube_pz.jpg', 'cube_nz.jpg',
])
var mesh    = THREEx.createSkymap(textureCube)
scene.add( mesh )

For reflexion.

var geometry    = new THREE.CubeGeometry( 1, 1, 1);
var material    = new THREE.MeshPhongMaterial();
// add the reflexion in material.envMap
material.envMap = THREEx.createTextureCube('pisa')
var mesh    = new THREE.Mesh( geometry, material );
scene.add( mesh );

To handle split a cube texture in horizontal cross format into 6 pictures in three.js order, just do

var images  = THREEx.CubeTextureHCross.split(hcrossImage)

To build cube texture in horizontal cross format from 6 pictures in three.js order, just do

var canvas  = THREEx.CubeTextureHCross.build(images)

To load a cube texture in horizontal cross format and get a three.js texture, just do

THREEx.CubeTextureHCross.load(imageUrl, function(cubeMap){
    // ... here use cubeMap
    // ... maybe something like material.envMap  = cubeMap
})