Create a vertical ruler with measurements

I want to create a vertical ruler with measurements like the image below. can anyone help me with it.

i’ve used this code to create a vertical line

           var material = new THREE.LineBasicMaterial({
				color: 0x07E1E1,
				linewidth: 3

			var geometry = new THREE.Geometry();
				new THREE.Vector3( 0, 0, 0 ),
				new THREE.Vector3( 0, 1100, 0 ),
				new THREE.Vector3( 0, 0, 0 )

			var line = new THREE.Line( geometry, material );
			scene.add( line );
			line.position.set(-550, -550, 200);

But it is not getting as the image and also the measurements…

You might want to implement the measurements as THREE.Sprite's. The following example uses this approach for its legend:

The relevant code is in Lut.js.


Hi, does somebody know a solution for a dynamic ruler?
Which is updating its values by zooming?
I appreciate every help!

1 Like

Hi @AndreasHerz,
Did you ever get anywhere with a dynamic ruler?
I would be very interested in this feature also.

Can you explain a bit more about the dynamic behaviour you are looking for?
In most cases in threejs the zooming in and out is essentially moving the camera closer and further to the camera. How would you want the calues on the ruler to change?

For instance, say I have a scene that actually has a physical scale, such as a solar system.
It would be nice to have in a corner of the scene a ruler that gives an idea of the current scale we are looking at.

So the ruler would be fixed in size and position (I think you can add an object to the camera so that it doesn’t move when we move the camera), but as you are getting closer to the Sun, the tick marks on the ruler would move and potentially new ones would appear as older ticks move out of range.

Another way to think of this would also be like axes around a 2D plot, where the tick marks are changing when we zoom/pan.

Hope this makes sense.