Just to further explain, the JSON for cubemaps when downloaded from the Editor doesn’t seem to be usable by the engine at runtime.
Therefore you have to create the cubemap in code like I’ve shown above you use a DDS file instead.
I’m not sure what you mean by this.
To ensure that I downloaded and used the correct data, I downloaded it several times and replaced it several times, but the result was the same，Just to tell you that the data I downloaded is not modified
Yes, I trying to say that it doesn’t matter how many times it is downloaded, the format is not suitable to be used by the engine.
You have to either create the cubemap in code as shown in my example or load the DDS
Yeah,I know your means,but I’m confused that material.cubemap is texture or null,but the cubemap is asset,I don’t know how to add this cubemap to material.cubemap
This is my code:
var textureUrls = [
"./Assets/model/polestar2/47347304/Refl_0005s_0000.jpg",
"./Assets/model/polestar2/47347304/Refl_0005s_0000.jpg",
"./Assets/model/polestar2/47347307/Refl_0001s_0000.jpg",
"./Assets/model/polestar2/47347306/Refl_0002s_0000.jpg",
"./Assets/model/polestar2/47347304/Refl_0005s_0000.jpg",
"./Assets/model/polestar2/47347304/Refl_0005s_0000.jpg"
];
// Create assets from the texture URLs
var textures = textureUrls.map(function(url, i) {
var asset = new pc.Asset('skybox' + '-' + i, 'texture', { url: url });
app.assets.add(asset);
return asset.id;
});
var cubemap = new pc.Asset(
'skybox',
'cubemap',
'null',
{
textures: textures
}
);
console.log(cubemap);
// mat is material which should have a cubemap texture
mat.cubemap = cubemap;
console.log(mat);
// app.setSkybox(cubemap);
This is a screenshot of the console.log(mat) in the log
This seems to indicate that the material.cubemap setting is not successful,I don’t know if I understand right？
when I found it is a cubemap missing problem,I have tried like this:
var cubemapAsset = new pc.Asset('New Cubemap.dds', 'texture', {
url: "./Assets/model/polestar2/47347309/New Cubemap.dds",
cubemap: true
}, {
"minFilter": 5,
"magFilter": 1,
"anisotropy": 1,
"rgbm": false,
"prefiltered": "New Cubemap.dds",
"textures": [
"./Assets/model/polestar2/47347304/Refl_0005s_0000.jpg",
"./Assets/model/polestar2/47347304/Refl_0005s_0000.jpg",
"./Assets/model/polestar2/47347307/Refl_0001s_0000.jpg",
"./Assets/model/polestar2/47347306/Refl_0002s_0000.jpg",
"./Assets/model/polestar2/47347304/Refl_0005s_0000.jpg",
"./Assets/model/polestar2/47347304/Refl_0005s_0000.jpg"
]
});
cubemapAsset.on('load', function () {
mat.cubemap = cubemapAsset.resource;
mat.reflectivity = 5.633
console.log(mat);
});
app.assets.add(cubemapAsset);
app.assets.load(cubemapAsset);
but it didn’t work.
Updated example to add cubemap to the material: https://playcanvas.com/editor/scene/1164378
var app = this.app;
var textureUrls = [
"https://raw.githubusercontent.com/yaustar/yaustar.github.io/master/skybox/right.jpg",
"https://raw.githubusercontent.com/yaustar/yaustar.github.io/master/skybox/left.jpg",
"https://raw.githubusercontent.com/yaustar/yaustar.github.io/master/skybox/top.jpg",
"https://raw.githubusercontent.com/yaustar/yaustar.github.io/master/skybox/bottom.jpg",
"https://raw.githubusercontent.com/yaustar/yaustar.github.io/master/skybox/front.jpg",
"https://raw.githubusercontent.com/yaustar/yaustar.github.io/master/skybox/back.jpg"
];
// Create assets from the texture URLs
var textures = textureUrls.map(function(url, i) {
var asset = new pc.Asset('skybox' + '-' + i, 'texture', { url: url });
app.assets.add(asset);
return asset.id;
});
var cubemap = new pc.Asset(
'skybox',
'cubemap',
null,
{
textures: textures
}
);
this.app.assets.add(cubemap);
app.setSkybox(cubemap);
// Test material
cubemap.ready(function(asset) {
var material = app.assets.find('test-material');
material.resource.useSkybox = false;
material.resource.metalness = 1;
material.resource.useMetalness = true;
material.resource.cubeMap = asset.resource;
material.update();
});
1 Like
This address return 404,and my code is here:
var textureUrls = [
"./Assets/model/polestar2/47347304/Refl_0005s_0000_图层 2.jpg",
"./Assets/model/polestar2/47347304/Refl_0005s_0000_图层 2.jpg",
"./Assets/model/polestar2/47347307/Refl_0001s_0000_图层 2.jpg",
"./Assets/model/polestar2/47347306/Refl_0002s_0000_图层 2.jpg",
"./Assets/model/polestar2/47347304/Refl_0005s_0000_图层 2.jpg",
"./Assets/model/polestar2/47347304/Refl_0005s_0000_图层 2.jpg"
];
// Create assets from the texture URLs
var textures = textureUrls.map(function(url, i) {
var asset = new pc.Asset('skybox' + '-' + i, 'texture', { url: url });
app.assets.add(asset);
return asset.id;
});
var cubemap = new pc.Asset(
'skybox',
'cubemap',
'null',
{
textures: textures
}
);
// cubemap.on('load', function () {
// console.log(cubemap);
// mat.cubemap = cubemap;
// mat.update()
// })
app.assets.add(cubemap);
// app.assets.load(cubemap);
// app.setSkybox(cubemap);
cubemap.ready(function(asset) {
mat.resource.cubeMap = asset.resource;
mat.update();
console.log(mat);
});
but .ready function isn’t triggered
Sorry, the URL is PlayCanvas | HTML5 Game Engine
Any errors in devtool console?
Nothing,But I got this error in https://playcanvas.com/editor/scene/1164378
No errors,just isn’t triggered the .ready function,so I use
cubemap.on('load', function () {
console.log(cubemap);
mat.cubemap = cubemap;
mat.update()
})
app.assets.add(cubemap);
app.assets.load(cubemap);
then I got this error:
I don’t know if this error report is important
Is GitHub blocked from where you are? Eg, can you see this file? https://raw.githubusercontent.com/yaustar/yaustar.github.io/master/skybox/right.jpg
It’s normal now
Regarding your issues, if you can provide a playcanvas project on playcanvas.com (similar to what I’ve done), it will make it a lot easier to fix your specific issues as I can fork it
Yeah,thank you very much. I will try my best to make a demo tomorrow for you to test. I don’t know how to send the file to you on this website. could you provide your email to me
I will DM my email address
1 Like
I have updated the example to use your cubemap textures: https://playcanvas.com/editor/scene/1164378