Jump to content

Please Help with this...


Recommended Posts

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..!!

Link to comment
Share on other sites

Hi @i_tejas19, welcome to the forum.  Congrats on successful BJS scene/animations!

Pop-up mouse-over labels, eh?  Here, check this out...


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.

Link to comment
Share on other sites

Here's the same one Wingnut posted, but re-using the same rectangle & textblock :) 

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

Link to comment
Share on other sites

 @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.


Link to comment
Share on other sites

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: 


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);

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 :) 

Link to comment
Share on other sites

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.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...