如何在three.js中绘制线条时添加测量细节

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var geometry = new THREE.Geometry();
geometry.vertices.push(
    new THREE.Vector3(-10, 0, 0),
    new THREE.Vector3(0, 10, 0),
    new THREE.Vector3(10, 0, 0)
);
var material = new THREE.LineBasicMaterial({ color: 0x0000ff });

var line = new THREE.Line(geometry, material);
scene.add(line);

var fontLoader = new THREE.FontLoader();
fontLoader.load('fonts/helvetiker_regular.typeface.json', function (font) {
    var textGeometry = new THREE.TextGeometry('Measurement: ' + geometry.vertices[0].distanceTo(geometry.vertices[1]), {
        font: font,
        size: 1,
        height: 0.1
    });
    var textMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    var textMesh = new THREE.Mesh(textGeometry, textMaterial);
    textMesh.position.set(0, 5, 0);
    scene.add(textMesh);
});

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();