Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

How switch material by button click?

aldin_abdagic

By aldin_abdagic,
in Questions & Answers

 Share

Recommended Posts

aldin_abdagic Newbie

aldin_abdagic

Posted
Posted 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Babylon.js sample code</title>
        <!-- Babylon.js -->
        <script src="https://www.babylonjs.com/hand.minified-1.2.js"></script>
        <script src="https://preview.babylonjs.com/cannon.js"></script>
        <script src="https://preview.babylonjs.com/oimo.js"></script>
        <script src="https://preview.babylonjs.com/babylon.js"></script>
        <style>
            html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
            }
			
			#control{
			    width: 100%;
                height: 50px;
				z-index: +1;
				position: fixed;
			}
        </style>
    </head>
<body>
     <div id="control">
	     <button id="material1">Material1</button>
		 <button id="material2">Material2</button>
	 </div>
	 
	 
    <div id="canvasZone">
        <canvas id="renderCanvas"></canvas>
    </div>
    <script>
        var canvas = document.getElementById("renderCanvas");
        var engine = new BABYLON.Engine(canvas, true);

        var createScene = function () {
            var scene = new BABYLON.Scene(engine);
        
            //Adding a light
            var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene);
        
            //Adding an Arc Rotate Camera
            var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, false);
			
        
            // The first parameter can be used to specify which mesh to import. Here we import all meshes
            BABYLON.SceneLoader.ImportMesh("", "scenes/", "skull.babylon", scene, function (newMeshes) {
                // Set the target of the camera to the first imported mesh
                camera.target = newMeshes[0];
				
            });
        
            // Move the light with the camera
            scene.registerBeforeRender(function () {
                light.position = camera.position;
            });
			
			var material1 = document.getElementById('material1'), material2 = document.getElementById('material2');

             material1.onclick = function() {
				    ????
        		};
				
             material2.onclick = function() {
				    ????
        		};
			
        
            return scene;
        }
        
        var scene = createScene();

        engine.runRenderLoop(function () {
            scene.render();
        });

        // Resize
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>
</html>

I need to click on the button to change the mesh to transparent or disappear, and i need to press the button  to make the mesh change the texture.

Link to comment
Share on other sites
Raggar Newbie

Raggar

Posted
Posted

I haven't tested the following, but you should use front and back references, not the ID's of the HTML elements.

Make a global, or otherwise accessible variable to reference the imported mesh, and give it a new material with a diffuseTexture.

Then change the properties like alpha and diffuseTexture whenever you need to. 

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Babylon.js sample code</title>
        <!-- Babylon.js -->
        <script src="https://www.babylonjs.com/hand.minified-1.2.js"></script>
        <script src="https://preview.babylonjs.com/cannon.js"></script>
        <script src="https://preview.babylonjs.com/oimo.js"></script>
        <script src="https://preview.babylonjs.com/babylon.js"></script>
        <style>
            html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
            }
			
			#control{
			    width: 100%;
                height: 50px;
				z-index: +1;
				position: fixed;
			}
        </style>
    </head>
<body>
     <div id="control">
	     <button id="material1">Material1</button>
		 <button id="material2">Material2</button>
	 </div>
	 
	 
    <div id="canvasZone">
        <canvas id="renderCanvas"></canvas>
    </div>
    <script>
        var canvas = document.getElementById("renderCanvas");
        var engine = new BABYLON.Engine(canvas, true);

        var createScene = function () {
            var mesh;
            var scene = new BABYLON.Scene(engine);
        
            //Adding a light
            var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene);
        
            //Adding an Arc Rotate Camera
            var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, false);
			
        
            // The first parameter can be used to specify which mesh to import. Here we import all meshes

           var material = new BABYLON.Mater........
           material.diffuseTexture = new BABYLON.Texture("grass.jpg", scene);
           var texture2 = new BABYLON.Texture("amiga.jpg", scene);
           
  
            BABYLON.SceneLoader.ImportMesh("", "scenes/", "skull.babylon", scene, function (newMeshes) {
                // Set the target of the camera to the first imported mesh
                camera.target = newMeshes[0];
		mesh = newMeshes[0];
                mesh.material = material;	
                
            });
        
            // Move the light with the camera
            scene.registerBeforeRender(function () {
                light.position = camera.position;
            });
			
	 var front = document.getElementById('material1'), back = document.getElementById('material2');

         front.onclick = function() {
	    mesh.material.alpha = 0.2;
            //mesh.visibility = 0.2;
        	};
				
         back.onclick = function() {
	    mesh.material.diffuseTexture = texture2;
        	};
			
        
            return scene;
        }
        
        var scene = createScene();

        engine.runRenderLoop(function () {
            scene.render();
        });

        // Resize
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>
</html>

 

Link to comment
Share on other sites
aldin_abdagic Newbie

aldin_abdagic

Posted
  • Author
Posted

Thank you for your reply. This is great. Transparency work yust fine. :)However, if I insert the following codes and press the material2 button to change the texture, nothing happens. I can not get my skin2. Where did I go wrong? it is abouth importMesh texsture.... skin1 and skin2 material...

  

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Babylon.js sample code</title>
        <!-- Babylon.js -->
        <script src="https://www.babylonjs.com/hand.minified-1.2.js"></script>
        <script src="https://preview.babylonjs.com/cannon.js"></script>
        <script src="https://preview.babylonjs.com/oimo.js"></script>
        <script src="https://preview.babylonjs.com/babylon.js"></script>
        <style>
            html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
            }
			
			#control{
			    width: 100%;
                height: 50px;
				z-index: +1;
				position: fixed;
			}
        </style>
    </head>
<body>
     <div id="control">
	     <button id="material1">Material1</button>
		 <button id="material2">Material2</button>
	 </div>
	 
	 
    <div id="canvasZone">
        <canvas id="renderCanvas"></canvas>
    </div>
    <script>
        var canvas = document.getElementById("renderCanvas");
        var engine = new BABYLON.Engine(canvas, true);

        var createScene = function () {
            var mesh;
            var scene = new BABYLON.Scene(engine);
        
            //Adding a light
            var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene);
        
            //Adding an Arc Rotate Camera
            var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, false);
			
        
            // The first parameter can be used to specify which mesh to import. Here we import all meshes

            var skullmaterial = new BABYLON.StandardMaterial("skin.jpg", scene);
			skullmaterial.diffuseColor = new BABYLON.Color3(0, 0, 7);  // green
            skullmaterial.diffuseTexture = new BABYLON.Texture("skin.jpg", scene);
            var texture2 = new BABYLON.diffuseTexture("skin2.jpg", scene);
           
  
            BABYLON.SceneLoader.ImportMesh("", "scenes/", "skull.babylon", scene, function (newMeshes) {
                // Set the target of the camera to the first imported mesh
                camera.target = newMeshes[0];
				camera2.target = newMeshes[0];
				skull = newMeshes[0];
                skull.material = skullmaterial;
				skull.visibility = 1;
            });	
                
            });
        
            // Move the light with the camera
            scene.registerBeforeRender(function () {
                light.position = camera.position;
            });
			
	 var material1 = document.getElementById('material1'), material2 = document.getElementById('material2');

         material1.onclick = function() {
	          mesh.material.alpha = 0.2;
            //mesh.visibility = 0.2;
        	};
				
         material2.onclick = function() {
	         mesh.material.diffuseTexture = texture2;
        	};
			
        
            return scene;
        }
        
        var scene = createScene();

        engine.runRenderLoop(function () {
            scene.render();
        });

        // Resize
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>
</html>
Link to comment
Share on other sites
aWeirdo Newbie

aWeirdo

Posted
Posted

@aldin_abdagic 

There's no such thing as a "BABYLON.diffuseTexture" :) 
Whether a texture is a diffuseTexture is controlled in the material. 

-  var texture2 = new BABYLON.diffuseTexture("skin2.jpg", scene);
+  var texture2 = new BABYLON.Texture("skin2.jpg", scene);

Furthermore, you defined "var mesh;"
and you are trying to change the material.diffuseTexture for "mesh" when you click your buttons
But in your import, you are setting "skull =  newMeshes[0];"
skull is not defined anywhere.

If i may suggest; https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide

Link to comment
Share on other sites
Wingnut Newbie

Wingnut

Posted
Posted

Hi guys.  In PM, AA and I... are talking.  I have a feeling that AA's imported mesh (in his/her home project)... has multiple mesh and multiple materials.  So I have asked him/her questions about this, and showed how to check length of newMeshes and scene.materials.

I hope you don't mind me revealing some PM discussion, AA.  I won't tell them about our secret gold mine, I promise.  heh

I have also asked him/her to open a free github account and put his/her .babylon file and skin textures... into some folders there... so we can do playground work on them.  Meantime, here's are friend Dude... with a funny-looking torso texture.  Dude has been temporarily renamed 'skull'.  The REAL skull model... has no UV's.

http://playground.babylonjs.com//#A4HF3#15

I also showed new-coder AA how it was somewhat important to put LOTS of "stuff" inside the loader onSuccess area.

So, we are slowly but surely getting AA up-to-speed.  He/She will soon be a pro.  :)

After I learn how many mesh and materials are used in AA's model, I will advance this PG series, and activate some HTML buttons... and we'll do some texture changing... like I did on the torso of our 6-mesh, 5-material friend... Dude. 

I also started teaching AA about UVs, and how some models don't have them.  Also, teaching how to view .babylon files in Notepad or online JSON viewers... or via github (checking for UVs).

I wanted to report where we are... in AA's BJS Orientation Class.  :)  I'm certainly no model-loading expert... but I think 'we' can get him/her started on a decent path.  Thx for your assistance, aW!  We'll get AA's BJS go-cart fired-up and motoring down the trail, no matter what it takes... right?  (ahem)  :)

Then we'll get back to the great @Mythros player-slides-down-hills challenge... after some more doughnuts and coffee.  heh.  We haven't forgotten about you, Mythy, but your challenge requires heavy work.  Physics or not, is the big question... for your challenge.

Link to comment
Share on other sites
Wingnut Newbie

Wingnut

Posted
Posted

Yeah, no UVs. just "colorKind" data.  Still though, per-vertex colorKind data is nice.  It's "the forgotten material" in many ways... especially dynamically animating it.  :o

It will be rediscovered... alive and well, in the ashes of dead HDR/PBR materials, someday.  Jerome will hit a bad button one day, and POOM, a Mandelbrot fractal pattern will get painted into the skull's colorKind buffer... and the angels will sing.  :)

Or, maybe not.

I used the OPEN feature... at this joint... http://jsoneditoronline.org/  to load this url...  https://raw.githubusercontent.com/BabylonJS/Babylon.js/master/assets/meshes/skull.babylon

It worked great, and for once... my dog smiled approvingly.  hmm.  Maybe he's sick.  ;) 

Link to comment
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...
×
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...