Recommended Posts

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 .

 

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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 .

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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>
<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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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, 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 .

Share this post


Link to post
Share on other sites

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

Texture 1:

dk0Zxer.png

Texture 2:

jApQgtl.png

Texture 3:

t6if93m.png

Texture 4:

h17rbic.png

 

The right select is the second

Share this post


Link to post
Share on other sites

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

post-10292-0-73864700-1409287422.jpg

post-10292-0-61696600-1409287434.jpg

post-10292-0-86547300-1409287452_thumb.j

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.