babylon skybox from hell

Question

I'm going through the tutorials for babylonjs and I've been pulling my hair out over many things. I'm at the first environment tutorial and I'm trying to get my skybox to render. assuming the file paths are correct, what could the issue be?

var canvas,
    createScene,
    engine;

// Get the canvas element from our HTML below
canvas = document.querySelector("#renderCanvas");
// Load the BABYLON 3D engine
engine = new BABYLON.Engine( canvas, true );

// Here begins a function that we will 'call' just after it's built
createScene = function () {

    var scene = new BABYLON.Scene( engine );

    // this is how to set or change the background color
    // the .clearColor method is used with the new BABYLON.Color3();
    scene.clearColor = new BABYLON.Color3( 0.5, 0.8, 0.5 );
    // there are also preset colors like blue, red, yellow you can add by saying BABYLON.Color3.Blue();

    // ambient color is used to help determine what things will ultimately look like.
    scene.ambientColor = new BABYLON.Color3( 0.3, 0.3, 0.3 );

    // when there is no ambient color on the scene, ambient colors on textures and ambient colors of your objects will have no effect.

    var camera = new BABYLON.ArcRotateCamera("Camera", 0.4, 1.2, 20, new BABYLON.Vector3(-10, 0, 0), scene);
    var light0 = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3.Zero(), scene);
    light0.diffuse = new BABYLON.Color3(1, 1, 1);
    light0.specular = new BABYLON.Color3(1, 1, 1);
    light0.groundColor = new BABYLON.Color3(0, 0, 0);

    // skybox
    var skybox = BABYLON.Mesh.CreateBox( 'skyBox', 100.0, scene );
    console.log( skybox );
    var skyboxMaterial = new BABYLON.StandardMaterial('skyBox', scene);
    skyboxMaterial.backFaceCulling = false;
    skybox.material = skyboxMaterial;

    // infanite distance makes the sky box follow the camera's position
    skybox.infiniteDistance = true;

    // here, we remove all light relection from the shape
    skyboxMaterial.diffuseColor = new BABYLON.Color3( 0, 0, 0 );
    skyboxMaterial.specularColor = new BABYLON.Color3( 0, 0, 0 );

    // now we apply the texture to the box
    skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture( 'data/images/skybox', scene );
    skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;

    scene.activeCamera = camera;
    scene.activeCamera.attachControl( canvas );

    return scene;
}; // End of createScene function

// -------------------------------------------------------------
// Now, call the createScene function that you just finished creating
var scene;

scene = createScene();
// Register a render loop to repeatedly render the scene
engine.runRenderLoop( function () {
    scene.render();
});
// Watch for browser/canvas resize events
window.addEventListener( 'resize', function () {
    engine.resize();
});

Answer 1

The path to your images is wrong (or your images are not there, not correctly name, not jpegs, etc.).

I took your playground example, then reformatted (in playground code you only give the createScene function; it does the rest of the scaffolding code for you. I also fixed the .Zero() syntax error it was complaining about, by simply using new BABYLON.Vector3(0,0,0) (I don't know why .Zero() was bad, but (0,0,0) is the same number of characters.)

At that point it still did nothing. Then I changed the path to where the playground demo images are found it works: http://www.babylonjs-playground.com/#1XQWKQ#9

So "data/images/skybox" is not where your images are. Remember you must be serving them through a web server. If it still won't work try troubleshooting by giving a full path (see http://www.babylonjs-playground.com/#1XQWKQ#10 for an example). If they are on another server then you might be hitting CORS issues (best solution for that: keep them on the same server as your html file!).