# Sphere + Health Bar

**URL:** <https://discourse.threejs.org/t/sphere-health-bar/11890>\
**Category:** Questions\
**Tags:** sprites\
**Created:** [January 6, 2020, 1:55pm UTC](https://discourse.threejs.org/t/sphere-health-bar/11890 "2020-01-06T13:55:21Z")\
**Posts on this page:** 1\
**Showing post:** 5

<div class="post-metadata">

**Author:** ![Usnul](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/usnul/32/2355_2.png) [@Usnul](https://discourse.threejs.org/u/Usnul)\
**Post date:** [January 7, 2020, 2:16pm UTC](https://discourse.threejs.org/t/sphere-health-bar/11890/5 "2020-01-07T14:16:13Z")

</div>

My two cents. I went with HTML/CSS for [my game](https://discourse.threejs.org/t/might-is-right-the-game/6523), here’s what that looks like (health bars specifically)

 ![2019-12-28 16_32_42-C__git_strategy_release..._combat_turn_marker.png _ 12_16 file(s) _ 100.00%](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/5/59bd41c7447b3fb69d9c2cf5ec0ba04fddfbe4dd.png)

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.

---

_[View the full topic](https://discourse.threejs.org/t/sphere-health-bar/11890)._
