Health Bar in 3D space in CC 3

Hi there, is there any sample that described how to create a health bar in 3D in CC 3.0?

Any Idea?
I think we need a Telegram group for cocos creator developers to solve their problem fast

I also need this thing… In Three.js, for example, we have sprite what can be rendered in 3d space, and always faced to the camera. But as I know Cocos not provide this.

Yes, you can. I rendered names (UI Labels) above several moving 3D objects in 3D space already in the latest CC3.0. Unfortunately, I can’t tell you right now from the top of my head how I did it.
It wasn’t that complicated but I had to look up quite some things myself.

Generally speaking, this is done with RenderTargets → from UI to 3DSpace.
I am back in a couple of days, If no one else has chimed in until then I’ll see if I can look up some code and post it here.

(There are official demos where this is done and I think in this specific case this was even already CC3 compatible. So the code might not even need a lot of adjustment. I am not sure though. But porting isn’t that hard anyways. The “rendertarget examples” are somewhere included in a bunch of examples on Github. Not sure if this was “testcases” or “3d examples” or “physics examples” or whatever…but you can download them and look it up.)

We have a Discord, which might be a bit better help.

You can use the way I shared in this topic

The basic idea is to render the 2D elements on the UI Camera and sync position with 3d world objects.

In 3.1, you will be able to attach Label, Sprite etc directly to 3d world nodes

2 Likes

Hi, Is already any example with UI in the 3D? I tried it in 3.3.1, but looks like it doesn’t work. Thanks.
My sprite doesn’t look at the camera and I can’t rotate it, also position is strange.

I just found RenderRoot2D Component in the examples, it works, thanks!
https://docs.cocos.com/creator/3.1/api/en/classes/ui.renderroot2d.html

Hello again, RenderRoot2D is ok to render the Sprites, I can rotate the Sprite node by X axis:


But when I trying to do the same with Label, it just scales down instead of rotate:

Is any solution to rotate Label in 3D World? Thanks.

Hi, I came across this post, because have same problem. But with sprites. And I have found that you use non DEFAULT sprite type. This fixed my problem.

Labels has same secret - use Cache Mode: CHAR, and they will be rendering as you expecting.

1 Like

Thanks, I thought I tried this, but now I tried again, and it works…

Just noticed when I use custom TTF font “CHAR” cache mode make label ugly, so I hope nowadays will be support for label. Currently, I wrote my own component what take texture from Label and draw it into Quad mesh