Changing of decal texture every time when i select a new img is not working

Questions
,
1

I have written the below to change the texture of decal material when I click on HTML listed images. the function is working fine but decal keeping the old one only. Here all the images in HTML are coming from the database. Please guide because most of the things which want change are coming from the database. Thank you

<div>    <img onclick="changeIt(this)" src="textures/marb1.jpg" width="50" height="50" style="position:absolute"/>
    <img onclick="changeIt(this)" src="textures/marb2.jpg" width="50" height="50" style="position:absolute; top:100px"/>
    </div>

        <canvas id="renderCanvas"></canvas>

        <script>

            var canvas = document.getElementById("renderCanvas");

            var myimage = "textures/ground.jpg";

            var changeIt = function (img) {  myimage = img.src;    };

            var engine = null;

            var scene = null;

            var sceneToRender = null;

            var createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true }); };

            var delayCreateScene = function () {
    ....
    ...
    ....
    mat.diffuseTexture = new BABYLON.Texture(myimage, scene);
    ................
    ........
2

It seems you want to change the url of a textures afterward: you can use updateURL() for that:

Also, I think it’s a duplicate of Texture loading?

3

Thanks for updateURL(). It’s working but when I click new image from list. It changing the existing texture on mesh.

As I m using decal and every time when I take a new image the design on the mesh should not change. the new selected image applies as independently on the mesh. and also can be removed when required.

Is that be ok if using an array of the decal, That creates new material every time when i select a new image. will this be a problem?

4

No problem, you can create multiple seperate decals this way.

1 Like