Search the Community
Showing results for tags 'material switch click'.
-
<!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.