What is the path URL for CubeTexture?

Questions
1

I am writing a project in React. I’m trying to create a skybox, but it doesn’t see the textures, which path should they have?

Screenshot_20230215_070859
Screenshot_20230215_070859976×268 92.8 KB

Here I’m trying to get textures “textures/meadow”, but it doesn’t work…

    const material = new BABYLON.StandardMaterial("skyBox");
    material.backFaceCulling = false;
    material.reflectionTexture = new BABYLON.CubeTexture("textures/meadow");
    material.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
    material.diffuseColor = new BABYLON.Color3(0, 0, 0);
    material.specularColor = new BABYLON.Color3(0, 0, 0);
2

This might help - Getting Started - Chapter 5 - Skies Above | Babylon.js Documentation

Make sure the extension is correct as it seams your files are named correctly on first glance

3

It should work, as it’s what is done in this PG:

The textures are probably not accessible through textures/meadow? Can you check in the console of the browser if you have some 404 errors?

4

How did you create your project? If you used create-react-app it’s a little tricky to get your assets. If they’re set up properly you should be able to bring up the images via a URL, like http:/localhost/assets/textures/medow_nz.jpg

An alternative is to import URLs, like this:

import px from “…/assets/sky/skybox_px.jpg”;
import py from “…/assets/sky/skybox_py.jpg”;
import pz from “…/assets/sky/skybox_pz.jpg”;
import nx from “…/assets/sky/skybox_nx.jpg”;
import ny from “…/assets/sky/skybox_ny.jpg”;
import nz from “…/assets/sky/skybox_nz.jpg”;

…

const skybox = MeshBuilder.CreateBox("skyBox", {size:1000.0}, scene);
const skyboxMaterial = new StandardMaterial("skyBox", scene);
skyboxMaterial.backFaceCulling = false;
skyboxMaterial.reflectionTexture = new CubeTexture("",scene,undefined,undefined,[px, py, pz, nx, ny, nz]);
skyboxMaterial.reflectionTexture.coordinatesMode = Texture.SKYBOX_MODE;
skyboxMaterial.diffuseColor = new Color3(0, 0, 0);
skyboxMaterial.specularColor = new Color3(0, 0, 0);
skybox.material = skyboxMaterial;
3 Likes