CODEWITHSUNDEEP
javascriptthree.jsskybox
Doggett.rj
Doggett.rj

Reputation: 3

Three.js skybox not loading

I am completely new to Three.JS and cant seem to get my head around getting a skybox to appear in my scene. I'm not getting any errors from my code, which has left me stumped. Any help would be greatly appreciated. 

function createSky(){

    var imageList = "CubeMap"

    THREE.ImageUtils.crossOrigin = '';
    var faces  = ["HDR0001", 
                  "HDR0002", 
                  "HDR0003", 
                  "HDR0004", 
                  "HDR0005"]; 

    var imgType = ".jpg";
    var skyGeo  = new THREE.CubeGeometry (500, 500, 500);
    var matFacesArray = [];

    for (var i = 0; i < 6; i++) {
         matFacesArray.push( new THREE.MeshBasicMaterial({
            map: THREE.ImageUtils.loadTexture( imageList + faces[i] + imgType ),        
            side: THREE.BackSide
         }));

    }      

    var sky = new THREE.MeshFaceMaterial ( matFacesArray );
    var skyBox = new THREE.Mesh ( skyGeo, sky );
    scene.add ( skyBox );    

}

Upvotes: 0

Views: 318

Answers (1)

Hopploppa
Hopploppa

Reputation: 142

Where are you watching your log for warnings/errors? Seems strange you are not getting any feedback since THREE.ImageUtils.loadTexture is deprecated, use TextureLoader.load instead, this warning should show up if you are using a somewhat later version of three js.

Also, what browser are you using? I find that Firefox is usually a bit more generous with showing textures than Chrome for example. This has to do with cross-origin image load and can be a problem when you try to run your code locally.

Upvotes: 0

Related Questions