aldin_abdagic

Members
  • Content Count

    9
  • Joined

  • Last visited

About aldin_abdagic

  • Rank
    Newbie

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. aldin_abdagic

    How switch material by button click?

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

    switch between active camera?

    How make nice transition between camera after clicking button?
  3. aldin_abdagic

    switch between active camera?

    Thank you for your reply. I notice there are differences between camera and cameras. I lake babylon.js Wingut i see you are good in coding, can you help me with my next questions? Thx
  4. <!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.
  5. aldin_abdagic

    switch between active camera?

    I find solution var camera2 = new BABYLON.ArcRotateCamera("Camera", 1.5, 0.8, 130, BABYLON.Vector3.Zero(), scene); camera.attachControl(canvas, false); muts chenge to; var camera2 = new BABYLON.ArcRotateCamera("Camera", 1.5, 0.8, 130, BABYLON.Vector3.Zero(), scene); camera2.attachControl(canvas, false);
  6. aldin_abdagic

    switch between active camera?

    I'm new to babylon.js and javascript. I really need swich camera on button click. I typed in the code but there is a problem when I click on another camera (camer2), then the object does not rotate, and if I click on camera1 it all works normally. Where I'm wrong please help in the code. Thank you very much. <!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="front">Front</button> <button id="top">Top</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); var camera2 = new BABYLON.ArcRotateCamera("Camera", 1.5, 0.8, 130, 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 front = document.getElementById('front'), back = document.getElementById('top'); front.onclick = function(switchCam) { scene.activeCamera = camera; }; top.onclick = function(switchCam) { scene.activeCamera = camera2; }; return scene; } var scene = createScene(); engine.runRenderLoop(function () { scene.render(); }); // Resize window.addEventListener("resize", function () { engine.resize(); }); </script> </body> </html>
  7. aldin_abdagic

    Babylon.js render canvas not open in tab?

    Thank you for your reply. How to make a tab I took with w3schools and doing fine. If I put text, image link, or whatever else is doing well. When I put a canvas render and click on the tablinks, just open an empty field. <div id="Tokyo" class="tabcontent"> <div id="canvasZone"> <canvas id="renderCanvas"></canvas> </div> </div> https://www.w3schools.com/howto/howto_js_tabs.asp the whole code is above. Sory for my bad english
  8. aldin_abdagic

    Babylon.js render canvas not open in tab?

    Try to clarify. If I insert a render canvas into tabcontent, then nothing appears on the screen, and if I insert a render canvas anywhere in html it works normally ... <div id="Tokyo" class="tabcontent"> <div id="canvasZone"> <canvas id="renderCanvas"></canvas> </div> </div>
  9. Hi my webgl work fine. I add render canvas in tab but not showing object. If i add render canvas in different html element work fine..help? <!DOCTYPE html> <html> <head> <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> #renderCanvas { width: 100%; height: 100%; touch-action: none; background-color: #f2f2f2; } body {font-family: "Lato", sans-serif;} /* Style the tab */ div.tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; } /* Style the buttons inside the tab */ div.tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 17px; } /* Change background color of buttons on hover */ div.tab button:hover { background-color: #ddd; } /* Create an active/current tablink class */ div.tab button.active { background-color: #ccc; } /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } </style> </head> <body> <p>In this example, we use JavaScript to "click" on the London button, to open the tab on page load.</p> <div class="tab"> <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button> <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button> <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button> </div> <div id="London" class="tabcontent"> <h3>London</h3> </div> <div id="Paris" class="tabcontent"> <h3>Paris</h3> </div> <div id="Tokyo" class="tabcontent"> <div id="canvasZone"> <canvas id="renderCanvas"></canvas> </div> </div> <script> function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent.style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks.className = tablinks.className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } // Get the element with id="defaultOpen" and click on it document.getElementById("defaultOpen").click(); </script> <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("", "anatomy3d/", "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; }); return scene; } var scene = createScene(); engine.runRenderLoop(function () { scene.render(); }); // Resize window.addEventListener("resize", function () { engine.resize(); }); </script> </body> </html>