hit2501 Posted July 23, 2015 Share Posted July 23, 2015 Hi. I´m having problems trying to put a html code inside a babylon script. I want to put several html buttons with different actions that will modify a babylon mesh. This is the idea I have but I dont know how to make it work:<body> <form> <canvas id="renderCanvas" width="600" height="300"></canvas> <script> var canvas = document.getElementById("renderCanvas"); var engine = new BABYLON.Engine(canvas, true); var onoff = 1; var createScene = function () { var scene = new BABYLON.Scene(engine); scene.clearColor = new BABYLON.Color4(0, 0, 0, 0); var camera = new BABYLON.ArcRotateCamera("Camera", -7, 1, 0.8, BABYLON.Vector3.Zero(), scene); camera.attachControl(canvas, true); var light1 = new BABYLON.HemisphericLight("hemi1", new BABYLON.Vector3(0, 1, 0), scene); light1.intensity = 1; var light2 = new BABYLON.HemisphericLight("hemi2", new BABYLON.Vector3(0, 0, 0), scene); light2.intensity = 1; BABYLON.SceneLoader.ImportMesh("", "Babylon/", "Arholma10D.babylon", scene, function (newMeshes) { var supports = scene.getMeshByName("bjalkar_ar.001"); var borders = scene.getMeshByName("knutar_arh.001"); var roof = scene.getMeshByName("tak_arholm.001"); var walls = scene.getMeshByName("vaggar_arh.001"); /*I DONT KNOW WHAT I CAN DO TO PUT HERE THE FOLLOWING HTML CODE... <center> <button type="button"><img src="images/rocky_svart.jpg" width="90" height="90"> <script> roof.setEnabled(false); </script> </button> </center> */UNTIL THIS PLACE }); scene.registerBeforeRender(function() { if(onoff == 1) { camera.alpha += .01; } }); return scene; }; var scene = createScene(); engine.runRenderLoop(function () { scene.render(); }); // Resize window.addEventListener("resize", function () { engine.resize(); }); </script></form> </body>Can anybody help me? Thanks in advance Quote Link to comment Share on other sites More sharing options...
ozRocker Posted July 23, 2015 Share Posted July 23, 2015 If you want elements in a permanent HUD you should be putting the HTML outside of the javascript code, like this (I'm using inline styling for demonstration even tho it should be in a separate CSS declaration):<html><body> <div name="footer" style="position: fixed; width: 100%; height: 70px; position: fixed; bottom: 0; left: 0; z-index: 1"> Babylon.js rocks! </div> <canvas id="renderCanvas"></canvas> <script> //Do 3D stuff </script></body></html>If you want to inject HTML code dynamically you'd have to manipulate the DOM. Here's a JQuery example:var elementButton = $('<button type="button"><img src="images/rocky_svart.jpg" width="90" height="90"></button>');$("body").append(elementButton);If you have elements in the same spot that appear and disappear, just make it permanent in the body and use display: none, then in your Javascript script you can set display: block to show it. Quote Link to comment Share on other sites More sharing options...
ozRocker Posted July 23, 2015 Share Posted July 23, 2015 For your specific case, you can put some buttons in a footer HUD like this:<html><body> <div name="footer" style="position: fixed; width: 100%; height: 70px; position: fixed; bottom: 0; left: 0; z-index: 1"> <button style="position:absolute; top:0; left:0" onClick="changeColor()">Color</button> <button style="position:absolute; top:0; left:200px" onClick="changeShape()">Shape</button> </div> <canvas id="renderCanvas"></canvas> <script> //Render 3D function changeColor() { //Color changing code } function changeShape() { //Shape changing code } </script></body></html> Wingnut 1 Quote Link to comment Share on other sites More sharing options...
iiceman Posted July 23, 2015 Share Posted July 23, 2015 You could use one of the user interface extension that people have created: bGUI extension by Temechon: - Source code : https://github.com/Temechon/bGUI - Demo : http://temechon.gith...0">bGUI</span>/ - Documentation : http://doc.babylonjs...age.php?p=25102 Dialogue extension by JCPalmer: https://github.com/B...e/master/Dialog It also has to the extentions CastorGUI. It is part of the extensions to create GUI which create a layer above the canvas. It is as simple to use. Topic:http://www.html5game...canvas/?p=85691 Extention:https://github.com/B...onJS/Extensions Demo:http://www.castoreng...CastorGUI/demo/ Or you could use simple html and create bindings to you javascript code with frameworks like knockout.js or angular.js. If you just want something simple, maybe do something like this: http://www.babylonjs-playground.com/#1P6A1U (of course you don't have to create the buttons dynamically, you could just write them as normal HTML and then just position them with CSS over your 3D canvas) Wingnut and Dad72 2 Quote Link to comment Share on other sites More sharing options...
adam Posted July 23, 2015 Share Posted July 23, 2015 CastorGUI Demo: http://www.castorengine.com/babylon/demoCastorGUI/ Dad72 1 Quote Link to comment Share on other sites More sharing options...
hit2501 Posted July 23, 2015 Author Share Posted July 23, 2015 Thank you all for your help. ozRocker I tried to put the html outside the javascript code and the buttons appear well but the order: "roof.setEnabled(false);" dont work, do you know how can I put the order:"roof.setEnabled(false);" inside your jQuery example? iiceman your example can work fo me but when I want to replicate the example in xampp the console shows me the following error: "Uncaught ReferenceError: $ is not defined index.html:90" in the line where is "$('.button-container').remove();" how can I fix it? Sorry if this are too basic questions, I´m learning yet Quote Link to comment Share on other sites More sharing options...
iiceman Posted July 23, 2015 Share Posted July 23, 2015 The $ symbol refers to jQuery (or you could also use zepto instead). If you have included the jQuery/zepto library and it is actually loaded this should not happen. Make sure you include jQuery before your custom javascript code and maybe use $(document).ready(function(){ // your code goes here }); to make sue the document is ready and the libraries are loaded. jQuery: https://jquery.com/zepto: http://zeptojs.com/ Wingnut 1 Quote Link to comment Share on other sites More sharing options...
ozRocker Posted July 24, 2015 Share Posted July 24, 2015 Thank you all for your help. ozRocker I tried to put the html outside the javascript code and the buttons appear well but the order: "roof.setEnabled(false);" dont work, do you know how can I put the order:"roof.setEnabled(false);" inside your jQuery example? Thats 'cos the scope of the "roof" variable only exists within the ImportMesh function, since that's where its initial declaration is based. You'll need to make it a global variable in order to access it anywhere. I suggest putting a "var roof;" on the line after "var onoff = 1;" If you are getting errors with the $ symbol its because you haven't linked to a JQuery library. Just add<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> inside your <head></head> and that'll link you to the latest JQuery Wingnut 1 Quote Link to comment Share on other sites More sharing options...
Wingnut Posted July 24, 2015 Share Posted July 24, 2015 Excellent helper comment, OzR! You covered the bases perfectly. Have you done help-desk work? You have an excellent style. Thanks for helping forum users... I'm glad you're hanging around with us. Now, about that picture. You're scaring the dog. You aren't gonna kick our butts or anything, right? You could be an action hero on TV! You got the look. I wonder what your smile looks like. (ahem) Quote Link to comment Share on other sites More sharing options...
hit2501 Posted July 25, 2015 Author Share Posted July 25, 2015 Thanks to all of you, with all your help I made it this way:var botonContenedorA1 = $('.boton-contenedorA1').remove(); $('body').append('<div class="boton-contenedorA1"></div>'); $('.boton-contenedorA1').append('<div class="column-1"><ul><li class="boxy"><button type="button"><img src="images/rocky_svart.jpg" width="90" height="90"></button></li></ul></div>') $('.boton-contenedorA1 button').click(function () { roof.setEnabled(false); })I´m glad too to belong to this community Quote Link to comment Share on other sites More sharing options...
ozRocker Posted July 25, 2015 Share Posted July 25, 2015 Excellent helper comment, OzR! You covered the bases perfectly. Have you done help-desk work? You have an excellent style. Thanks for helping forum users... I'm glad you're hanging around with us. Just giving back to the community 'cos all you guys are helping me out as well!I've worked as an iOS developer and web developer for media agencies, telcos, government offices and software dev houses. They require all documentation, code, git commits, etc... to be completely thorough and well explained since I'm not always dealing with developers (I'm usually the only iOS developer there!). I know I look like a bit of a thug haha! When I'm in the U.S people think I'm ex-marine (but I'm Aussie/Thai). I used to be an MMA fighter (Brazilian juijitsu and Thai boxing). Also I live in the red-light district in Melbourne which can get scary sometimes. I need to be able to protect myself and the people I care about. Wingnut 1 Quote Link to comment Share on other sites More sharing options...
iiceman Posted July 25, 2015 Share Posted July 25, 2015 @hit2501: That appending in my demo was jsut to show you on the playground how to do it. We cant edit the HTML there directly so I had to use the function to append it in runtime. But of course you can directly add the needed html like the div elements and buttons to your html structure. The important part, the only thing you actually have to do in the javascript is your click function: $ ('.boton-contenedorA1 button').click(function () { roof.setEnabled(false);}) I how you know what I mean Good luck! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.