How to add measurement details while line drawing in three.js - three.js

Question

I'm trying to add the length of the start point and endpoint of the line geometry. I have a line but I have no idea how to show some unit measurement data in the form of the text while drawing the wall in mouse move itself.
Here's the fiddle
var renderer, scene, camera;
var line;
var count = 0;
var mouse = new THREE.Vector3();
init();
animate();
function init() {
// info
var info = document.createElement('div');
info.style.position = 'absolute';
info.style.top = '30px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.style.color = '#fff';
info.style.fontWeight = 'bold';
info.style.backgroundColor = 'transparent';
info.style.zIndex = '1';
info.style.fontFamily = 'Monospace';
info.innerHTML = "three.js - animated line using BufferGeometry";
document.body.appendChild(info);
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// scene
scene = new THREE.Scene();
// camera
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(0, 0, 1000);
// geometry
var geometry = new THREE.BufferGeometry();
var MAX_POINTS = 500;
positions = new Float32Array(MAX_POINTS * 3);
geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));
// material
var material = new THREE.LineBasicMaterial({
color: 0xff0000,
linewidth: 2
});
// line
line = new THREE.Line(geometry, material);
scene.add(line);
document.addEventListener("mousemove", onMouseMove, false);
document.addEventListener('mousedown', onMouseDown, false);
}
// update line
function updateLine() {
positions[count * 3 - 3] = mouse.x;
positions[count * 3 - 2] = mouse.y;
positions[count * 3 - 1] = mouse.z;
line.geometry.attributes.position.needsUpdate = true;
}
// mouse move handler
function onMouseMove(event) {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
mouse.z = 0;
mouse.unproject(camera);
if( count !== 0 ){
updateLine();
}
}
// add point
function addPoint(event){
console.log("point nr " + count + ": " + mouse.x + " " + mouse.y + " " + mouse.z);
positions[count * 3 + 0] = mouse.x;
positions[count * 3 + 1] = mouse.y;
positions[count * 3 + 2] = mouse.z;
count++;
line.geometry.setDrawRange(0, count);
updateLine();
}
// mouse down handler
function onMouseDown(evt) {
// on first click add an extra point
if( count === 0 ){
addPoint();
}
addPoint();
}
// render
function render() {
renderer.render(scene, camera);
}
// animate
function animate() {
requestAnimationFrame(animate);
render();
}
I'm trying to achieve the measurement like the above.

Answer 1

The simplest way is to use CSS2D labels. You can assign a regular HTML <div> to act as a label. It displays flat on top of your <canvas> renderer without rotations so it's always facing the camera. See here for a demo on how to set up your CSS2DRenderer:
https://threejs.org/examples/#css2d_label
All you'd have to do is take the average of 2 Vector3s, and assign that as your label's position.
// Get distance and midpoint
var distance = vectorA.distanceTo(vectorB);
var midpoint = new Vector3();
midpoint.copy(vectorA);
midpoint.add(vectorB).multiplyScalar(0.5);
// Create label, set distance and position
const labelDiv = document.createElement( 'div' );
labelDiv.className = 'label';
labelDiv.textContent = "Distance: " + distance;
labelDiv.style.marginTop = '-1em';
const distLabel = new CSS2DObject( labelDiv );
distLabel.position.copy( midpoint );
cssScene.add( distLabel );