aldin_abdagic

How switch material by button click?

Recommended Posts

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

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

@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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.