i_tejas19

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

Share this post


Link to post
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...

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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.

rack_cluster.blend

Share this post


Link to post
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: 

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.