How to create progress bar in three.js?

Is there any code example or idea about how to create a progress bar in three.js, this progress bar will show how much is left until a specific day.

The only thing I found is about LoadingManager three.js docs , but it seems like it handles and keeps track of loaded and pending data, and is not tracking the time.

Here’s some code for a progress bar. Its basically a mesh on top of another mesh. You define your min/max range. There’s the min/max of the mesh. Use mapLinear to map from current value to shape size

const drawwidth = MathUtils.mapLinear(this.value, this.valuemin, this.valuemax, 0, this.shapewidth);

image

2 Likes

Thanks for the answer, how can I fixed the left side of the mesh and add the width to the right side of the mesh? Because when I add the width, the mesh will move to the left side.

Inspired with the topic, made these bars with progressbar: https://codepen.io/prisoner849/full/dyeaMBN

4 Likes