i_tejas19 Posted December 5, 2018 Share Posted December 5, 2018 I have created an 3D model of a HPC cluster rack using Blender and I have successfully loaded that moel in Babylon.js with animations. All is working fine. But I want to have a mouse hover effect on my model which will pop out the text/label of particular mesh. How I can achieve it, please give me some idea..!! Quote Link to comment Share on other sites More sharing options...
Wingnut Posted December 5, 2018 Share Posted December 5, 2018 Hi @i_tejas19, welcome to the forum. Congrats on successful BJS scene/animations! Pop-up mouse-over labels, eh? Here, check this out... https://www.babylonjs-playground.com/#XCPP9Y#447 That playground teaches BabylonJS GUI labels... AND BJS ActionManager onPointerOverTrigger. Keep in mind that an entire PANEL of information... can pop-up, with clickable stuff on that panel. WOW! I found that playground... using a playground search. I happen to know that MOST GUI demos have the term "advancedTexture" in them... from experience. I often re-name my GUI demo vars to 'adt' - short for advancedDynamicTexture. AdvancedDynamicTexture is a basis for BabylonJS GUI "stuff"... sort of like a sheet of glass that can be put atop a mesh, or across entire screen. Then we paint GUI "controls" onto that glass. That playground will get you started. Both BJS GUI and BJS ActionManagers... are very powerful and versatile. Take the time to read/experiment. Look at the demos/playgrounds in the docs... they inspire more ideas. Soon you will be expert. Ask more, if needed. Make a playground to show us stuff, if you wish. We'll be here. If solved, mark this thread solved, please. aWeirdo, Sebavan and i_tejas19 3 Quote Link to comment Share on other sites More sharing options...
aWeirdo Posted December 5, 2018 Share Posted December 5, 2018 Here's the same one Wingnut posted, but re-using the same rectangle & textblock https://www.babylonjs-playground.com/#XCPP9Y#748 -- Edit -- Another one with a few more optimations, generic displayRect1 function, using the mesh's name or id as text source as example and re-using babylon actions aswell. https://www.babylonjs-playground.com/#XCPP9Y#750 Wingnut and i_tejas19 2 Quote Link to comment Share on other sites More sharing options...
i_tejas19 Posted December 6, 2018 Author Share Posted December 6, 2018 @Wingnut You have suggested me in very right way.? Thaks for that!? I have already tried this, but with the Babylon Meshes. The problem is I have loaded my mesh from blender so How can I edit blender model and add ActionManager to the meshes in that model? You can take a look at my 3D model below...and help with this. rack_cluster.blend Quote Link to comment Share on other sites More sharing options...
i_tejas19 Posted December 6, 2018 Author Share Posted December 6, 2018 @aWeirdo thanks for optimized code..!? But please see the above post and provide me the solution if you can.. Thank you! And yours Battleplanes.io is it developed in Babylon.js or what??? Really nice work? Quote Link to comment Share on other sites More sharing options...
aWeirdo Posted December 7, 2018 Share Posted December 7, 2018 Hi again, @i_tejas19 Afraid I don't use blender, ( do you have a .babylon file ? ), but I suggest adding it after import Here's an example: https://www.babylonjs-playground.com/#XCPP9Y#751 Side-note, this one only uses a single ActionManager Short snippet: var labelActionManager = new BABYLON.ActionManager(scene); labelActionManager.registerAction( pointerOverAction); labelActionManager.registerAction( pointerOutAction); function addLabelToMesh(mesh) { if(mesh.name){ // Do some check if we should add label to this mesh.. mesh.actionManager = labelActionManager; } } // Meshes BABYLON.SceneLoader.ImportMesh("Rabbit", "/scenes/", "Rabbit.babylon", scene, function (newMeshes, particleSystems, skeletons) { // Rabbit.babylon only contains a single mesh. // Simulate the file has multiple meshes, scale & position them. newMeshes[1].scaling = new BABYLON.Vector3(0.1, 0.1, 0.1); newMeshes[1].name = null; // Don't add label for rabbit 1, purely for demostration. var meshes = []; meshes[0] = newMeshes[1]; meshes.push(meshes[0].clone("rabbit 2"), meshes[0].clone("rabbit 3")) meshes[1].position = new BABYLON.Vector3(-5, 0, -2); meshes[2].position = new BABYLON.Vector3(5, 0, -2); // (Attempt to) Add label for each mesh in 'meshes'. meshes.forEach( addLabelToMesh); }); Off-topic: Thanks! Yes, Battleplanes is purely made with babylonJs, It's just a small side-project i work on once in a while, still far far from finished i_tejas19 and Wingnut 2 Quote Link to comment Share on other sites More sharing options...
i_tejas19 Posted December 10, 2018 Author Share Posted December 10, 2018 @aWeirdo This was very helpful..Yes I have .babylon file via Blender. Which tool you use to create models?,? Thanks! 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.