Create a scale bar

Questions
1

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

Or something more simple like this :

https://fervent-snyder-c66537.netlify.app/

I found this post three.js - How can I draw a scale meter? - Stack Overflow

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

1 Like
2

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…

3

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