Load CubeTexture

Questions
1

How to load cubeTetxure using full url without AssetsManager ？

3

Here is PG example - https://playground.babylonjs.com/#UU7RQ#4316

skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("https://playground.babylonjs.com/textures/skybox", scene);

More info in the Docs - Babylon.js docs
API - Babylon.js docs

4

This PG instance does not seem to use the full url and the documentation states rootUrl: defines the url of the texture or the root name of the six images

5

The CubeTexture constructor takes a base URL and (by default) appends “_px.jpg”, “_nx.jpg”, “_py.jpg”, “_ny.jpg”, “_pz.jpg” and “_nz.jpg” to load the +x, -x, +y, -y, +z, and -z facing sides of the cube.

What do you mean speaking of full URL? Do you have an example of full URL?
From my point of view, this base URL "https://playground.babylonjs.com/textures/skybox" is the full URL which one needs to define in order to create CubeTexture.

6

Like threejs cubeTextureLoad passes in an array for url，the url of each image in the array is full
docs:CubeTextureLoader
example :cubemap
source code:code

7

You may also use .env format, it is much simpler

    const hdrTexture = new BABYLON.CubeTexture("textures/country.env", scene);
    scene.environmentTexture = hdrTexture
    scene.createDefaultSkybox(scene.environmentTexture, true, (scene.activeCamera.maxZ - scene.activeCamera.minZ) / 2, 0, false);

Example - Babylon.js Playground

8

Since our project needs to support .env and six images at the same time, I am still looking for a solution. If not, I cannot use the complete url image array. Maybe I need to process the url in advance.

9

If I understand you correctly, you may use filesarray

image
image649×399 15.6 KB

But if you need to retrieve those files from different sources rather than from one folder (rootUrl), you may need to use your own processor.
Source - Babylon.js/packages/dev/core/src/Materials/Textures/cubeTexture.ts at 1fa51fc7f8268a8cd43b205305ec2fafea2edb82 · BabylonJS/Babylon.js · GitHub

2 Likes
10

cool this works fine, but requires the texture array to be provided in a certain order

11

Well, otherwise it would be hard to guess which face of cube is where :slight_smile:
I believe it is the same in Three? - three.js/src/textures/CubeTexture.js at bd9ac7da732e696fb2df8243c413dd877c11ad3a · mrdoob/three.js · GitHub

1 Like
12

in threejs use px nx py ny and so on…
but in babylon if i use Cubetexture files options in order of [px, py, pz, nx, ny, nz] :rofl:

1 Like