gryff Posted March 5, 2014 Share Posted March 5, 2014 Feeling flushed with success after the succesful creation of my pub scene from Blender-> babylon, I am getting down to the hard part - scripting some interaction. So using the pick functions seemed like a good place to start. And I got it working nicely in this simple scene based on the "Create simple Elements" tutorial files - even to the point of animating one of the cubes. Interaction 1 However, It all seems to go AWOL when I try simpler code in my pub scene. I have added a white sphere to the pub scene - but it does not register as clickable. Pub and Sphere Here is the code I am using for the pub/sphere scene:<body><div id = "fps"></div><div id = "mesh">Mesh Name = </div> <canvas id="renderCanvas"></canvas> <script> if (BABYLON.Engine.isSupported()) { var canvas = document.getElementById("renderCanvas"); var divFps = document.getElementById("fps"); var divMesh = document.getElementById("mesh"); var engine = new BABYLON.Engine(canvas, true); var newScene = new BABYLON.Scene(engine); BABYLON.SceneLoader.Load("", "10bells.babylon", engine, function (newScene) { newScene.executeWhenReady(function () { // Attach camera to canvas inputs newScene.activeCamera.attachControl(canvas); //Creation of a sphere //(name of the sphere, segments, diameter, scene) var sphere = BABYLON.Mesh.CreateSphere("Sphere", 10, 1.0, newScene); sphere.position = new BABYLON.Vector3(0,3,4); // Once the scene is loaded, just register a render loop to render it engine.runRenderLoop(function() { newScene.render(); divFps.innerHTML = BABYLON.Tools.GetFps().toFixed() + " fps"; }); }); }); // , function (progress) { // To do: give progress feedback to user // }); // Resize window.addEventListener("resize", function () { engine.resize(); }); //When click event is raised window.addEventListener("click", function (evt) { // We try to pick an object var pickResult = newScene.pick(evt.clientX, evt.clientY); if (pickResult.hit) { // alert("Hit made"); // object = pickResult.pickedMesh.name; divMesh.innerHTML = "Mesh Name= " + pickResult.pickedMesh.name; } // end of '"if (pickResult.hit)" else{ divMesh.innerHTML = "NO HIT"; } }); //end of click event }// end of "if (BABYLON.Engine.isSupported())" </script></body>Is there some error in this code ? When I click on the sphere in the pub scene it returns "NO HIT" The only differences between the two scenes that I can see are: 1. the pub scene loads a babylon file first - does that interfere in some way and does that babylon file require some kind of processing for its meshes/submeshes to become clickable?2. the "Create simple elements" scene uses a different camera Thanks you for any help - I'm tearing out my hair. cheers, gryff Quote Link to comment Share on other sites More sharing options...
davrous Posted March 5, 2014 Share Posted March 5, 2014 Hello, It's a JavaScript problem in your code. If you're debugging it, you'll see that the newScene variable you're using for the picking has 0 mesh. Remember that JavaScript works on a function scope. You then need to affect the scene returned by our loading function into the variable being defined outer of the callback function. Bye, David Quote Link to comment Share on other sites More sharing options...
gryff Posted March 6, 2014 Author Share Posted March 6, 2014 You then need to affect the scene returned by our loading function into the variable being defined outer of the callback function. Thank you for the reply David. I changed my loading part of the script to this:var myScene = new BABYLON.Scene(engine); // NEW scene variable captures the meshes BABYLON.SceneLoader.Load("", "10bells.babylon", engine, function (newScene) { newScene.executeWhenReady(function () { // Attach camera to canvas inputs newScene.activeCamera.attachControl(canvas); //added NEW line of code to get meshes. myScene = newScene; //Once the scene is loaded, just register a render loop to render it engine.runRenderLoop(function() { myScene.render(); divFps.innerHTML = BABYLON.Tools.GetFps().toFixed() + " fps"; }); }); });And now it works - I can detect the me objects that are clicked on. I changed the code for the click response to a switch/case code ://When click event is raised window.addEventListener("click", function (evt) { // We try to pick an object var pickResult = myScene.pick(evt.clientX, evt.clientY); if (pickResult.hit) { object = pickResult.pickedMesh.name; switch(object) { case "lestrade" : divMesh.innerHTML = "Hello there " + object; break; case "barmaid" : divMesh.innerHTML = "Pint of the best please " + object; break; default: divMesh.innerHTML = ""; break } } }); //end of click eventIt all seems to be working well - try the link above again and click on the two figures at the bar - but I think I will have to delve deeper into Javascript. The last time I used really Javascript was around 1998 for checking form input etc on webpages - I need a refresher course ;-) You and David Catuhe should be writing a book on WebGL and Babylon.js! cheers, gryff 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.