# Create a scale bar

**URL:** <https://discourse.threejs.org/t/create-a-scale-bar/25278>\
**Category:** Questions\
**Tags:** transform\
**Created:** [April 12, 2021, 9:39am UTC](https://discourse.threejs.org/t/create-a-scale-bar/25278 "2021-04-12T09:39:58Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Fran\_Raga](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fran_raga/32/17608_2.png) [@Fran\_Raga](https://discourse.threejs.org/u/Fran_Raga)\
**Post date:** [April 12, 2021, 9:39am UTC](https://discourse.threejs.org/t/create-a-scale-bar/25278/1 "2021-04-12T09:39:58Z")

</div>

Hi  
I was looking for information on how to implement a scale bar like this in three js like this one:

> **[Scale Bars for D3 Maps](https://bl.ocks.org/HarryStevens/8c8d3a489aa1372e14b8084f94b32464)**
>
> Harry Stevens’s Block 8c8d3a489aa1372e14b8084f94b32464

Or something more simple like this :

[https://fervent-snyder-c66537.netlify.app/](https://fervent-snyder-c66537.netlify.app/)

I found this post [three.js - How can I draw a scale meter? - Stack Overflow](https://stackoverflow.com/questions/26719519/how-can-i-draw-a-scale-meter)

And I’m try it with this code :

const distance = this.camera.position.distanceTo(this.controls.target)  
const normalizedDistance =  
distance / (this.controls.maxDistance - this.controls.minDistance)  
console.log(normalizedDistance)  
fieldNameElement.innerText = 'Scale : ’ + normalizedDistance.toFixed(2).toString()

But I’m not sure that fragment represents what I’m looking for.

Anyway, Does anyone have any ideas on how to get started, is there an example or something I can use as a starting point?

thanks

---

<div class="post-metadata">

**Author:** ![FrancoCorleone](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/francocorleone/32/22770_2.png) [@FrancoCorleone](https://discourse.threejs.org/u/FrancoCorleone)\
**Post date:** [December 11, 2021, 12:57pm UTC](https://discourse.threejs.org/t/create-a-scale-bar/25278/2 "2021-12-11T12:57:17Z")

</div>

Did you find anything useful for that topic? I need to implement a dynamic scale bar and to be honest, I have no idea how to even start with it. All resources point out, I can’t use pixels and just draw some svg line because I won’t be able to calculate it, on the other hand creating lines in THREE and removing them all the time depending on the position of the model etc. seems not optimal at all…

---

<div class="post-metadata">

**Author:** ![astro\_bear](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/astro_bear/32/45204_2.png) [@astro\_bear](https://discourse.threejs.org/u/astro_bear)\
**Post date:** [February 28, 2024, 5:22pm UTC](https://discourse.threejs.org/t/create-a-scale-bar/25278/3 "2024-02-28T17:22:14Z")

</div>

I’m interested also. p5.js has scale bar solutions, but I’m not sure how to integrate it with three.js.