Loading remote image & retain settings

Help & Support
1

Hi, I have this project that you can view here: https://playcanv.as/p/c8zuGVJi/

I hope that I can share the editor here: https://playcanvas.com/editor/scene/607639

If you look at the code.js file: https://playcanvas.com/editor/code/551742?tabs=12218370

You will see that the cube loads an image. The image has a glossiness of 100. When you click the image I have some code that loads a remote image. This all works well however my problem is that when the external image has loaded the glossiness and all the other settings seem to be lost.

How do I load an external image and retain the original settings?

Thanks.

2

Hahaha @will take a look please :smiley:

3

Start on that: before click you have different material on your mesh.

image

So don’t

var myMesh =  pc.app.root.findByName("Model").model.meshInstances[1];
myMesh.material = material;

Instead just

var myMesh =  pc.app.root.findByName("Model").model.meshInstances[1];

myMesh.material.diffuseMap = texture;
material.update();
1 Like
4

Thanks Mike, this worked. However, it did not work for this project (below)?

Editor: https://playcanvas.com/project/551735/overview/vase

View: https://launch.playcanvas.com/607631?debug=true

Also after the second time you click the top buttons both meshes are draped. Do you know why this would happen and how to correct it?

Thanks for your help!

5

I’ll take a look in one hour

6

I got the second click problem solved by using alf’s answer here.

However I’m still not able to retain the gloss value.

7

Hi Mike, any chance you can have a look at why the gloss values are not retained in my demo?

Thank you!

Load.prototype.initialize = function() {

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 = new pc.StandardMaterial();
    
    material.diffuseMap = texture; 
    material.update();         

    pc.app.root.findByName(myProduct).model.meshInstances[myMeshNumber].material = material;
};


myLoad = function(myImage){
    image.src = myURL + myFolder + myImageFolder + myImage;
};
};
8

Sorry, too busy there says.

Don’t create new material, change already existing one.
Your settings are there and then you set new material, they got lost.

1 Like
9

Yes, I understand the problem now. Thank you.