Label on top of an objects

[Dad72]

Hello,

 

I am looking for idea to create a labeled at the on top of an object to display the name of the object for example.

 

Do you have any ideas of how I could do this ?

 

Here is an example in pictures (the part in red is what I would like to)

 

 

Thanks for help

[Kilombo]

Hey dad72, I took the Wingnut test. And this function came up:

var makeOverOut = function(mesh,meshid,type) {

        function attrib(){onPointerOvermeshId = meshid;}

        function attribtype(){onPointerOverType = type;}

        mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOutTrigger, myMouseOut));

        mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOverTrigger, myMouseOver));

        mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOverTrigger, attrib));

        mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOverTrigger, attribtype));

};

 

so the meshid is a global var that receives whatever i want to have defined has a meshis (text, some description retrieved from database), then you can use to print it on the screen.

 

Check the example, on my project. http://andromedaquest.tk/map.php

If you move over the planets (when you turn the camera to the right), something will pop up (in this case a menu).

 

I can give you more details, if you want.

[Dad72]

Thanks Kilombo. I'll look

[Dad72]

I look more ready and this is not really the result I want. My label didn't need action, it is present at all times.

 

I just think the texture dynamic that I can add to a "mesh plan" attaching has the object. It should be able to work.

[Temechon]

Hi guys, 

 

Why don't you add an simple HTML element at the mouse position when your mouse is over your mesh ?

It should be fairly easy to do it, don't you think ?

[GameMonetize]

You can create a billboard:

var plane = BABYLON.Mesh.CreatePlane("plane", 3, scene);var planeMaterial = new BABYLON.StandardMaterial("plane material", scene);planeMaterial.backFaceCulling = false;var planeTexture = new BABYLON.DynamicTexture("dynamic texture", 512, scene, true);planeTexture.hasAlpha = true;planeMaterial.diffuseTexture = planeTexture;plane.billboardMode = BABYLON.Mesh.BILLBOARDMODE_ALL;plane.material = planeMaterial;

[Dad72]

Hi guys, 

 

Why don't you add an simple HTML element at the mouse position when your mouse is over your mesh ?

It should be fairly easy to do it, don't you think ?

 

This is exactly what I do not want to. I want a permanent label and no html.

 

 

 

Thanks Deltakosh, it of the idea that I had, it'll help me.

[Wingnut]

And I think you might want to add a line something like... 

 

planeTexture.drawText("Portal Start", null, 150, "bold 80px verdana", "black", "red");

 

But I could be wrong.    Dynamic textures is not well documented.  As far as I know, there is no Basic Tutorial or WIKI tutorial that teaches it.  I made a demo once that used it, but I did not set BILLBOARD mode, so I dont know what THAT does.

 

The names of those colors at the end... are web-based color names.

[Dad72]

Thank you Wingnut. I succeeded has to do something with dynamic textures and it works.

 

var planeMaterial,plan,planeTexture,textureContext,size,textSize; plan = BABYLON.Mesh.CreatePlane("Etiquetes", 1.0, scene);plan.scaling.y = 0.8; plan.scaling.x = 3;plan.position = new BABYLON.Vector3(0, 2.75, 0); planeMaterial = new BABYLON.StandardMaterial("plane material", scene);planeTexture = new BABYLON.DynamicTexture("dynamic texture", 128, scene, true);planeTexture.hasAlpha = true; textureContext = planeTexture.getContext();textureContext.font = "bold 40px Calibri";size = planeTexture.getSize();textureContext.save();textureContext.fillStyle = "red";textureContext.fillRect(0, 0, size.width, size.height); textSize = textureContext.measureText(data.name);textureContext.fillStyle = "white";textureContext.fillText(data.name, (size.width - textSize.width) / 2, (size.height + 20) / 2); textureContext.restore();planeTexture.update(); planeMaterial.diffuseTexture = planeTexture;plan.material = planeMaterial;plan.parent = objet3d;

By against DK, if I used this:  BABYLON.Mesh.BILLBOARDMODE_ALL

nothing displayed (may be a bug to find here)

[Kilombo]

Wingnut..... You are saving every body day

 

I was just working on some buttons in Blender so that i could importe them has meshes. But your demo just solved my problem for the buttons, and dad72 problem.

 

Thanks mate.

 

I'll put you on the credits in my work (well..... isn't anything special, isn't ?!?!, lol ), you really helped me already in a bunch of things.

[Dad72]

Good in fact I'll try something else, because the result is not perfect on my project, My labels it's too big, square, and the LookAt function won't as I want.

 

I'll see what happens to make my labels in html

[Dad72]

The result HTML me not like either. I prefer abandoned this label ideas.

[Wingnut]

Thanks K... but I don't deserve all the accolades (nice things you say).  I make mistakes more often than I get lucky with a good idea. 

 

Dad72... I don't know how zoomed-in your picture is.  Is that entire light-colored area... the portal start?  Is so, you could overlay another plane on top it... that says 'portal start' in big letters... but then set the plane's .visibility to about .2 so the "portal start" words are not too bold and annoying.  Like a barely-visible transparent gif.  Just thoughts. 

 

Also, do you want the label to face the camera all the time?  Maybe a sprite or two... with words on it/them? 

 

Also, maybe you might want to think about internationalization (sometimes called i18n).  To make your game be ready for ANY language, you would use a SYMBOL or marker... for 'portal start'.  No words.  Take a quick look at the SHADOWS demo on the BJS website.  Its just a couple of rotating torus... but it could be the SYMBOL for a portal start... in your game.

 

Later, when your game goes international... it would be easy to show a picture of the symbol and tell users that it indicates a portal start... in the game's documentation.  The overall objective here... would be to use NO WORDS in the entire game... only symbols.  The users would read the game's documentation... to learn what the symbols indicate.  This way your game is more-easily ready for many nationalities and languages.

 

*shrug*  Just thinking... but likely no good ideas. 

[GameMonetize]

Dad72, you forgot this line:

planeMaterial.backFaceCulling = false;

[Dad72]

@Deltakosh:  Yes, I deliberately not put the backFaceCulling was false, because I wanted to use LookAt () to keep the front of labels are facing the camera, the rear was not necessary ..

 

@ Wingnut: I'll try to be more clear on what I wanted to do and that seems to me not so simple in practice.

• - I wanted to make a label as shown in my picture on this subject, but a plan, it is square and the result is not pretty and I do not know to round the corners of a plan.
• - It is expanded when away from the camera and narrowed when approaching to always see what is written on the labels, but without a big Panel on top of an object.
• - The label must always be facing the camera.
• - The texts of the portals (\"Start\", \"Forest\", \"City\"...) is specified by the users of my editor. (no problem for the multilanguage)
• - I can't use symbol has the place, because displaying the name of the portal and to assist the user in creating links to portals with direct views to their name. For example the gate \"A\" goes to the portal \"B\". It is necessary that in the properties of the gate \"A\" learn its destination by specifying the \"B\" portal or another. The label would therefore facilitate this task for users.

 

 

[Wingnut]

Thanks for the clarification, dad72.  I suppose you could Blender-model a round-corner rectangle plane.  *shrug*  (You already knew that, though).

 

I liked that... textureContext = planeTexture.getContext() ...that you did.  That was COOL!  I must try to remember that.

 

The label gets smaller as camera gets closer, you say.  That should be interesting, too.  Scaling based on camera distance to label.  Wow.  Nice.  I would love to see your algorithm and code for that part, when its done, and if you allow.

 

Ok, I will shut up now and let the experts go back to work on your challenge.  I hope you find a fast and good solution.

[reddozen]

why not just use transparencies on a clamped texture to simulate rounded edges?