How can I draw a scale meter?

Question

I want to draw (on the renderer) a fixed vertical line (or a bar) that gives info about size/distance or zooming factor like the one in Google Maps (see the image) (supposing to use a Orbit Control or a Trackball Control). Is it possibile?

Answer 1

why yes, good sir! You could find out the distance quite easily if you have THREE.OrbitControls object and a THREE.Camera:

var controls = new THREE.OrbitControls(...);
var camera = ....;
//get distance from camera to 'target' of OrbitControls
var distance = camera.position.distanceTo(controls.target);

luckily for us, THREE.OrbitControls also has minDistance and maxDistance attributes which control how close and how far away the camera can move from the target point. So, to get relative position of our camera between minDistance and maxDistance we can use the following code:

var normalizedDistance = (distance- controls.minDistnace) / (controls.maxDistance - controls.minDistance);

Now our new normalizedDistance variable will store a value between 0 and 1 relative to how far we are from the target, if we are at the minDistance - we can't get any closer and normalizedDistance === 0, if we are at maxDistance and can't get any further, out normalizedDistance === 1.

Also, be careful, by default THREE.OrbitControls.maxDistance is set to infinity, so to get a meaningful normalizedDistance you would have to set maxDistance to some reasonable non-infinite value, like say 100 or 1000.