ThreeJS 测距功能

  测距功能，也就是选择两点，计算它们的距离，实现效果大致如下：

  上图中主要涉及几个操作：

• 点击鼠标左键选点，点击鼠标右键停止选点，若选择点数超过两点，则两点绘制一条线段，两点中心添加一个距离标签
• 动态绘制点和线段
• 动态绘制距离标签
• 确定两点后添加 xyz 辅助线
• 按下 ESC 键撤销上一步操作

选点绘线

  首先，我们需要通过鼠标在三维空间中选点，但是我们的屏幕是二维的，还有一维不知道，因此没办法直接凭空选点，因此目前的选点都是基于某个物体来的，即在物体上选点。

  那么要如何获取鼠标点击的位置呢，首先需要知道标准设备坐标转空间坐标，然后使用 Raycaster 根据这个点从相机位置发出一条射线，并检测与这条射线相交的物体，即可获得鼠标点击的位置：

const mouse = new THREE.Vector2();

// 标准设备坐标转空间坐标
mouse.x = (e.clientX / width) * 2 - 1;
mouse.y = -(e.clientY / height) * 2 + 1;

let raycaster = new THREE.Raycaster();
raycaster.setFromCamera(mouse, camera);

let intersects = raycaster.intersectObjects(scene.children);
if(intersects.length > 0) {
   
   
    return intersects[0].point;	// point 即点击坐标
}

  选了点后，需要在该点位置绘制一个圆点表示，这边使用了SphereGeometry 来绘制圆点：

createPoint = (pos, config={
   
   color:0x009bea, size:0.3}) => {
   
   
    let mat = new THREE.MeshBasicMaterial({
   
   color: config.color || 0x009bea});
    let sphereGeometry = new THREE.SphereGeometry(config.size || 0.3, 32, 32);
    let sphere = new THREE.Mesh(sphereGeometry, mat);
    sphere.position.set(pos.x, pos.y, pos.z);
    return sphere;
};

  两点之间绘制一条线段：

createLine = (p1, p2, config={
   
   color:0x009bea}) => {
   
   
    let lineGeometry = new THREE.Geometry()