Sphere + Health Bar

Hello,

I’m new to three.js. I was playing around a bit with it and read lots about three, physijs, ammojs and so on. I made a sphere moving though my map. Works fine.

Now I was wondering how I could apply a health bar above the sphere. Since I use an orthographic camera and also applied the possibility to rotate the camera I need a healthbar that is always facing the camera.

Any help is much appreciated! I’ve searched for this quite a while now. If I managed to oversee the obvious then I’m sorry and happy about an advice!

Thanks

Have you considered to use an instance of THREE.Sprite for this use case? You could add one as a child of your sphere representing the health bar. In this way, you only have to transform the sphere and the health bar will automatically be at the right place.

The following example demonstrates the basic usage of sprites:

https://threejs.org/examples/webgl_sprites

2 Likes

Hi, welcome to the forum :partying_face:

Another option might be to use CSS2DObjects to create some fancy healthbars in CSS. Code would be similar to this Example, but instead of labels you could use a div inside a div and then control the element’s style width through javascript.

1 Like

I’mvery happy with the result using CSS2DObjects! Thanks a lot!

1 Like

My two cents. I went with HTML/CSS for my game, here’s what that looks like (health bars specifically)

why CSS? Because customization is a lot easier, and because you can modify CSS without having to re-compile the application, which makes the job of editing your UI styles a lot easier. Plus, there’s a bunch of nice things that come with CSS out of the box, it’s just a lot less pain down the road.

Doing UI in GL has it’s own appeal though, I found that the hard way when after days of performance analysis I found out that my HTML/CSS minimap with 100s of icons was slowing everything down by a huge amount, I re-wrote that part in GL, now it’s blazing fast. For illustration - GL implementation of the minimap took about 40 hours total, whereas HTML version took about 2 hours.

One thing to watch out for with HTML/CSS overlay - it’s not part of your world, it’s drawn on top of it, so you have to live with the fact that no tree, bird or anything else can overlay your UI. I’ve embraced it, and it’s not been an issue for me. But you mileage may vary.

3 Likes