change texture dynamically

[Abhay]

hello !

 

I have exported a scene from blender it's working fine in web .

But i want to change its texture and color dynamically .

 

e.g.

 

Suppose i have a bag object i have exported it from blender its name is test.babylon  it has a texture name base.jpg.

But i have have 3 another textures . i have create a dropdownlist in my html page.

 

So i want to if i have selected red/black/purple  from dropdownlist bag texture should be change .

Please do help me out .

 

Thanks in advance .

 

[eucly2]

Hi Abhay!

 

I think you have to add an onchange event on your dropdownlist. In this event you excute a function with texture name parameter like this:

onchange = 'changeTextture(this.value);'

and your changeTexture function look like this:

function changetexture(textureName){    myMesh.material.diffuseTexture = new BABYLON.Texture(textureName, scene);}

finally you should have something like this :

<select onchange='changeTexture(this.value);'>    <option value='texture/texture1.jpg'>texture1</option>    <option value='texture/texture2.jpg'>texture2</option>    <option value='texture/texture3.jpg'>texture3</option></select><script>    function changetexture(textureName){        myMesh.material.diffuseTexture = new BABYLON.Texture(textureName, scene);    } </script>

I hope you understand what I mean...

[Temechon]

Hi all,

 

This should work correctly. Don't forget to remove the previous texture in order to free memory space : 

myMesh.material.diffuseTexture.dispose();myMesh.material.diffuseTexture = new BABYLON.Texture(textureName, scene);

Cheers, 

[eucly2]

Yes before changing texture we have to dispose the actual texture if it's existing to free memory space.

Thanks Temechon for this add.

[Abhay]

Hello eucly2

 

I understand what r u saying but my problem is i have a blender exported file & texture is in that file .

 

I have call that file like this

 

 <script>

    if (BABYLON.Engine.isSupported()) {

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

        var engine = new BABYLON.Engine(canvas, true);

        BABYLON.SceneLoader.Load("", "test1.babylon", engine, function (newScene) {

                        newScene.executeWhenReady(function () {

                                newScene.activeCamera.attachControl(canvas);

                                engine.runRenderLoop(function() {

                    newScene.render();

                });

            });

        }, function (progress) {

                  });

    }

</script> 

 

 

In the script tag i have mark bold that file .

Hope you understand what i mean .

 

 

Thanks in advance

[eucly2]

Hi,

 

I have never use Blender ^^

But if you say "i have a blender exported file & texture is in that file" and if that is possible I think you should have your texture (material) loaded when you load your file.

So can you execute this script to load your file :

if (BABYLON.Engine.isSupported()) {    var canvas = document.getElementById("renderCanvas");    var engine = new BABYLON.Engine(canvas, true);    BABYLON.SceneLoader.Load("", "test1.babylon", engine, function (newScene) {                    newScene.executeWhenReady(function () {                            newScene.activeCamera.attachControl(canvas);                            alert("Nb materials : " + newScene.materials.length);                            alert("Nb textures : " + newScene.textures.length);                            engine.runRenderLoop(function() {                newScene.render();            });        });    }, function (progress) {              });}

and say me how many materials and texture you have.

If I'm good, you have to do this:

<select onchange='changeTexture(this.value);'>    <option value='0'>texture1</option>    <option value='1'>texture2</option>    <option value='2'>texture3</option></select><script>    function changetexture(number){        // this if you have more material than 1        myMesh.material= scene.materials[number];        // or this if you have more texture than 1 and material = 1        // myMesh.material.diffuseTexture = scene.textures[number];            } </script>

[Abhay]

Hello eucly2,

 

.

I have tried your code the page shows alert msg like Nb materials : 4 and Nb textures : 0 

 

Actually blender exported texture with object means object and texture in the same file like test1.babylon .

 

So please let me suggest how to i change texture dynamically using select box .

 

 

Thanks in Advance .

[eucly2]

All your texture are in the JS Array BabylonScene.materials so I suggest to you to do something like this:

<select onchange='changeTexture(this.value);'>    <option value='0'>texture1</option>    <option value='1'>texture2</option>    <option value='2'>texture3</option>    <option value='3'>texture4</option></select><script type="text/javascript">    var canvas;    var engine;    var scene;    $(document).ready(function() {	if (BABYLON.Engine.isSupported()) {	    canvas = document.getElementById("renderCanvas");	    engine = new BABYLON.Engine(canvas, true);	    BABYLON.SceneLoader.Load("", "test1.babylon", engine, function (newScene) {	        newScene.executeWhenReady(function () {                newScene.activeCamera.attachControl(canvas);                scene = newScene;	        engine.runRenderLoop(function() {	            newScene.render();	        });            });        }, function (progress) {           });        }    });    function changeTexture(number){        myMesh.material= scene.materials[number];    } </script>

That should work. If not, can you send me your test1.babylon please.

[Abhay]

Hello eucly2,

 

I have tried your latest code but that shows no results in browser .

I'm sharing my code & test1.babylon file .

Please have a look & help me out .

 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>Using babylon.js - How to load a scene</title>

    <script src="babylon.js"></script>

    <style>

        html, body {

            width: 100%;

            height: 100%;

            padding: 0;

            margin: 0;

            overflow: hidden;

        }

 

        #renderCanvas {

            width: 100%;

            height: 100%;

        }

    </style>

</head>

<body>

    <select onchange='changeTexture(this.value);'>

    <option value='0'>texture1</option>

    <option value='1'>texture2</option>

    <option value='2'>texture3</option>

</select>

 

<script>

    function changetexture(number){

        // this if you have more material than 1

        myMesh.material= scene.materials[number];

        // or this if you have more texture than 1 and material = 1

        // myMesh.material.diffuseTexture = scene.textures[number];

        

    } 

</script>

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

 

    <script>

   if (BABYLON.Engine.isSupported()) {

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

    var engine = new BABYLON.Engine(canvas, true);

    BABYLON.SceneLoader.Load("", "test2.babylon", engine, function (newScene) {

                    newScene.executeWhenReady(function () {

                            newScene.activeCamera.attachControl(canvas);

                            alert("Nb materials : " + newScene.materials.length);

                            alert("Nb textures : " + newScene.textures.length);

                            engine.runRenderLoop(function() {

                newScene.render();

            });

        });

    }, function (progress) {

              });

}

</script>

 </body>

</html>

 

i am sharing test1.babylon text file because when i am uploading my file it shows error, so please have a look on test1.txt file

 

Thanks in advance 

 

 

 

 

test1.txt

[eucly2]

Hi Abhay,

 

The correct code for you is this :

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">    <head>        <title>Using babylon.js - How to load a scene</title>        <script src="babylon.js"></script>        <style>            html, body {                width: 100%;                height: 100%;                padding: 0;                margin: 0;                overflow: hidden;            }            #renderCanvas {                width: 100%;                height: 100%;            }        </style>    </head>    <body>        <select onchange='changeTexture(this.value);'>            <option value='0'>texture1</option>            <option value='1'>texture2</option>            <option value='2'>texture3</option>            <option value='3'>texture4</option>        </select>        <select onchange='changeColor(this.value);'>            <option value='0'>Red</option>            <option value='1'>Blue</option>            <option value='2'>Green</option>            <option value='3'>Purple</option>        </select>        <script>            function changeTexture(number) {                var allMeshChange = false;                var i = 0;                while(!allMeshChange){                    scene.meshes[i].material = scene.materials[number];                    allMeshChange = i == scene.meshes.length - 1;                    i++;                }                          }            function changeColor(number) {                var allMeshChange = false;                var i = 0;                var color;                switch(number){                    case '0':// Red                        color = new BABYLON.Color3(1,0,0);                        break;                    case '1':// Blue                        color = new BABYLON.Color3(0,0,1);                        break;                    case '2':// Green                        color = new BABYLON.Color3(0,1,0);                        break;                    case '3':// Purple                        color = new BABYLON.Color3(1,0,1);                        break;                }                while(!allMeshChange){                    scene.meshes[i].material.diffuseColor = color;                                        allMeshChange = i == scene.meshes.length - 1;                    i++;                }                          }        </script>        <canvas id="renderCanvas"></canvas>        <script>            var scene;            if (BABYLON.Engine.isSupported()) {                var canvas = document.getElementById("renderCanvas");                var engine = new BABYLON.Engine(canvas, true);                BABYLON.SceneLoader.Load("", "test2.babylon", engine, function(newScene) {                    newScene.executeWhenReady(function() {                        newScene.activeCamera.attachControl(canvas);                        scene = newScene;                        engine.runRenderLoop(function() {                            newScene.render();                        });                    });                }, function(progress) {                });            }        </script>    </body></html>

But I think you have a problem with Blender export because your test1.babylon have 4 material but with no texture in, so the html select change the material on all meshes but no texture appear...

In this code I put an html select to change the color of your meshe and that work.

[Temechon]

Hey, 

 

I looked at your baylon file, and here is what I can see: http://i.imgur.com/dk31tww.png

I think there is a misunderstanding with materials and textures.

 

In babylon, materials are javascript objects used to define the color of some specific meshes. Textures are used within a material, and is used to apply a specific image on the mesh.

 

In your file, you don't have any textures, but you have 4 differents materials: default material, colorShader, test1.A1 and test1.A5.

   - "default material" is the material that you can see on your mesh when you load your scene.

   - colorShader is empty (check this :http://i.imgur.com/JECPo9r.png) : Attributes _color3, _color4, .... are all Array[0], so no color will be applied.

   - A1 and A5 have the same properties: same diffuse color, same specular color, ...

 

Indeed, you have a problem in your blender export, or in your materials.

 

Cheers, 

[eucly2]

That is exactly what I want to say.

But Temechon say it better than me 

[Abhay]

Hello ,

 

many many thanks to both of u for supporting .

 

but i have a query if i have texture in .babylon file and i want to change that like colors so how can i define texture file name  in my html page .

 

Thanks in advance .

[eucly2]

You have to create a folder in your web project named "texture" for example, in this folder you put all your texture that you what ("texture1.jpg", "texture2.jpg"...) and after you create your html select like this:

<select onchange='changeTexture(this.value);'>    <option value='texture/texture1.jpg'>texture1</option>    <option value='texture/texture2.jpg'>texture2</option>    <option value='texture/texture3.jpg'>texture3</option>    <option value='texture/texture4.jpg'>texture4</option></select>

And finally you change the changeTexture method like this:

function changeTexture(texture) {    var allMeshChange = false;    var i = 0;    while(!allMeshChange){        if(scene.meshes[i].material.diffuseTexture) scene.meshes[i].material.diffuseTexture.dispose();        scene.meshes[i].material.diffuseTexture = new BABYLON.Texture(texture, scene);        allMeshChange = i == scene.meshes.length - 1;        i++;    }              }

Normaly that will work

[Abhay]

hello All,

 

I have tried your recent code but using that i haven't get exact result what i want .

hope you understood what i want .

 

So could you please share the code for changing texture as well as color dynamically .

 

 

Thanks in advance .

[eucly2]

Can you give me some picture of what you have with my code and what you want please.

[eucly2]

With my last code and personnals textures I can change texture of your mesh dynamicaly:

Texture 1:

Texture 2:

Texture 3:

Texture 4:

 

The right select is the second

[Abhay]

Hello ,

 

Actually i want if have select texture 1 color red/green/blue , texture 2 color red/green/blue, texture 3 color red/green blue from drop down list changes should be happen according to ddl .

 

I'm sharing with u another babylon txt file (the file name is testing.txt)   and three texture file which i want to change dynamically .

in babylon txt file texture1.jpg included  .

 

So please have a look & help me out .

 

Thanks in Advance . 

testing.txt

[eucly2]

Hi!

 

I make a web page with your file.

In this page you can change texture and color of all your meshes in your babylon file:

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">    <head>        <title>Using babylon.js - How to load a scene</title>        <script src="babylon.js"></script>        <style>            html, body {                width: 100%;                height: 100%;                padding: 0;                margin: 0;                overflow: hidden;            }            #renderCanvas {                width: 100%;                height: 100%;            }        </style>    </head>    <body>        <select onchange='changeColor(this.value);'>            <option value='0'>Red</option>            <option value='1'>Blue</option>            <option value='2'>Green</option>        </select>        <select onchange='changeTexture(this.value);'>            <option value='texture/texture1.jpg'>texture1</option>            <option value='texture/texture2.jpg'>texture2</option>            <option value='texture/texture3.jpg'>texture3</option>        </select>        <script>            function changeTexture(texture) {                var allMeshChange = false;                var i = 0;                while (!allMeshChange) {                    if (scene.meshes[i].material.diffuseTexture)                        scene.meshes[i].material.diffuseTexture.dispose();                    scene.meshes[i].material.diffuseTexture = new BABYLON.Texture(texture, scene);                    allMeshChange = i == scene.meshes.length - 1;                    i++;                }            }            function changeColor(number) {                var allMeshChange = false;                var i = 0;                var color;                switch (number) {                    case '0':// Red                        color = new BABYLON.Color3(1, 0, 0);                        break;                    case '1':// Blue                        color = new BABYLON.Color3(0, 0, 1);                        break;                    case '2':// Green                        color = new BABYLON.Color3(0, 1, 0);                        break;                    case '3':// Purple                        color = new BABYLON.Color3(1, 0, 1);                        break;                }                while (!allMeshChange) {                    scene.meshes[i].material.diffuseColor = color;                    allMeshChange = i == scene.meshes.length - 1;                    i++;                }            }        </script>        <canvas id="renderCanvas"></canvas>        <script>            var scene;            if (BABYLON.Engine.isSupported()) {                var canvas = document.getElementById("renderCanvas");                var engine = new BABYLON.Engine(canvas, true);                BABYLON.SceneLoader.Load("", "test2.babylon", engine, function(newScene) {                    newScene.executeWhenReady(function() {                        newScene.activeCamera.attachControl(canvas);                        scene = newScene;                        engine.runRenderLoop(function() {                            newScene.render();                        });                    });                }, function(progress) {                });            }        </script>    </body></html>

And your textures are in a folder named "texture"

I can't do anything else I hope it's will be good for you.

[Abhay]

Hello eucly2,

 

thanks a lot for supporting me . it's help me a lot .

[eucly2]

No problem.