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. 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. How make nice transition between camera after clicking button?
  3. 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. 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. 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. 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. 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>