Search code examples
javascriptbabylonjs

babylon.js skybox give errors


I am want to create skybox.

I copy example from https://www.babylonjs-playground.com/#UU7RQ#240. When I want to see result. I see in inspect errors: Here is screenshot of errors.

errors screenshot

this is code:

let canvas = document.getElementById("renderCanvas");

let engine = new BABYLON.Engine(canvas, true);


var createScene = function () {
    var scene = new BABYLON.Scene(engine);
    var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, Math.PI / 2, 5, BABYLON.Vector3.Zero(), scene);
    camera.attachControl(canvas, true);

    var light = new BABYLON.HemisphericLight("hemiLight", new BABYLON.Vector3(-1, 1, 0), scene);
    light.diffuse = new BABYLON.Color3(1, 0, 0);

    // Skybox
    var skybox = BABYLON.MeshBuilder.CreateBox("skyBox", {size:1000.0}, scene);
    var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
    skyboxMaterial.backFaceCulling = false;
    skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene);
    skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
   skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
   skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
   skybox.material = skyboxMaterial;

   return scene;

};

// activate scene
let scene = createScene();

// show scene
engine.runRenderLoop(function() {
    scene.render();
});

scene.activeCamera.attachControl(canvas);

Solution

  • Hello unfortunately you cannot load images directly from the disk. They have to be hosted by a local webserver (Apache, IIS, etc)