TL;DR: For the editor to show the attributes of the scripts, it needs to ‘parse’ them to know what attributes have been added and this is a manual step.
the only question left is that i cic not see where is the url used in Will’s code
var self = this;
var image = new Image();
image.crossOrigin = "anonymous";
image.onload = function () {
var texture = new pc.Texture(self.app.graphicsDevice);
texture.setSource(image);
var material = self.entity.model.material;
material.diffuseMap = texture;
material.update();
};
image.src = this.url;
};
and what does the new pc.Texture(self.app.graphicsDevice); means? why didn’t he use loadFromUrl ?
var ChangeMaterial2 = pc.createScript('changeMaterial2');
var imageUrl ='https://s3-us-west-2.amazonaws.com/ticomsoft-image-repo/1.png';
ChangeMaterial2.attributes.add("targetMaterial", {type: 'number'});
ChangeMaterial2.prototype.initialize = function() {
var self = this;
console.log(imageUrl);
targetMaterial = 9;
// allow cross origin texture requests
this.app.loader.getHandler("texture").crossOrigin = "anonymous";
var asset = new pc.Asset("myTexture", "texture", {
url: imageUrl
});
this.app.assets.add(asset);
asset.on("load", function (asset) {
var material = self.entity.model.meshInstances[targetMaterial].material;
material.diffuseMap = asset.resource;
material.update();
});
this.app.assets.load(asset);
};
if i’m running this it all wors fine
but if i remove the line targetMaterial = 9; and assign 9 in the editor i get an error that material cannot be found.
printing targetMaterial yields undefined.
why? why didn’t it read the number from the scene?
He was creating a new PlayCanvas texture object that requires the graphics device object to be passed in. (See API reference: https://developer.playcanvas.com/en/api/pc.Texture.html). His way didn’t make use of the PlayCanvas asset system or registry.
I would say that Dave’s method would be the preferred method IMO.
Given the age of the post, perhaps the function didn’t exist then? Or maybe it doesn’t handle CORS?
(have been around this topic for 6 months ago but forgot the CORS-part this time, and I dont have it turned-on at my website for the present).
In relation to this above, I get a lame answer “that I can turn-on that myself” from my website-provider … are there by any chance some upload-image services with CORS that I/one can use?
but still, even though the 1st thing i do is to catch the on(“error”)
i still get an uncaught exception when i get it
*i call a set of image and increase the number until there is no such image.
What i try to do here is to make sure to handle the exception properly if the call returns error
You don’t need to handle the exception yourself as long as you have the error event callback. In the callback, you can do whatever logic you need to in the event of an image load error.
Resurrecting this old thread. I was trying to load texture from a URL and it works all fine when assigned to a material. But in my case, I need to update the texture on a button and it just doesn’t seem to work. Any ideas why?
If you open the project, the button doesn’t load the texture that I would expect it to, because of the script attached. Besides, if you “Enable” the Box Entity in the scene, you could see that the button starts erroring out too(this is not related to the texture load issue but still worth mentioning). Finally, if you “Disable” the button and only display the box, you could see the updated texture.
// initialize code called once per entity
LoadUrlTextures.prototype.loadOnButton = function()
{
var self = this;
var asset = this.app.assets.loadFromUrl(this.textureUrl, 'texture', function (error, asset) {
if (error) {
console.log(error);
return;
}
var element = self.entity.element;
element.texture = asset.resource;
});
};
I’ve tried several of the suggested solutions but could not get it to work. I’ve noticed that the mentioned example uses Legacy Model instead of Render and StandardMaterial instead of script created BasicMaterial which I use in my project. The currently active code for loading from URL is the code mentioned by @yaustar in his last post.
Anyway, I’ve made a project to debug the issue. It contains 2 boxes and 2 scripts. 1 loads the image via URL and the other sets it via script attribute resource (same image). The only difference when comparing the loaded Texture objects is that the URL-loaded has format 7 and the set image has format 6. Maybe someone could have a look.
Thank you very much!
Interesting … I’ve tried setting the material again in the loaded-handler but it seems to work only when it’s set once like you did.
EDIT: I can now confirm that the problem comes from using BasicMaterial. Replacing it with StandardMaterial makes it work as expected.