Apply cubemap texture on cube Mesh

[arthuro555]

Hey 👋

I am not very experienced with 3D so sorry if this is a bad question, but is it possible to apply a cubemap texture onto a cube mesh? Or to create a material from a cubemap to pass to PIXI3D.Mesh3D.createCube?

Anyways, thanks for building this :).

[jnsmalm]

Hello!

Yes, this is possible to do. You need to create a new material and reference that when creating the cube mesh. This is actually exactly how the skybox is implemented. Have a look at https://github.com/jnsmalm/pixi3d/tree/develop/src/skybox and let me know if you are not sure about what to do.

[arthuro555]

Thanks, that worked fine for me.

[goldenratio]

@jnsmalm can we also do this with standard material? something like this? Cube is still black for me.

    const baseTexture = new StandardMaterialTexture(PIXI.Texture.from('BaseMap').baseTexture);
    const normalTexture = new StandardMaterialTexture(PIXI.Texture.from('NormalMap').baseTexture);

    const material = new StandardMaterial();
    material.baseColor = new Color(0.7, 0, 0, 1);
    material.baseColorTexture = baseTexture;
    material.normalTexture = normalTexture;

    const obj = Mesh3D.createCube(material);

[goldenratio]

it works, seems I have issues with the light when using ibl

didn't work,

const ibl = new ImageBasedLighting(
  Cubemap.fromColors(new Color(1,0,0)),
  Cubemap.fromColors(new Color(0,0,0))
)
LightingEnvironment.main.imageBasedLighting = ibl;

works,

const light = Object.assign(new Light(), {
  x: -1,
  z: +3
});
LightingEnvironment.main.lights.push(light);

[goldenratio]

works now :D sorry my bad,

const ibl = new ImageBasedLighting(
  Cubemap.fromColors(new Color(0.8,0.8,0.8, 1)),
  Cubemap.fromColors(new Color(0.8,0.8,0.8, 1))
);