threejs模型测量

### 实现3D模型测量功能

为了在Three.js中实现3D模型的测量功能，可以采用射线检测技术来捕捉鼠标点击位置对应的3D坐标，并计算两点之间的距离。下面是一个简单的例子说明如何设置这样的交互机制。

#### 创建场景并初始化必要的组件

首先建立一个基本的Three.js环境，包括场景、相机和渲染器：

// 初始化场景
const scene = new THREE.Scene();

// 设置透视摄像机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 添加WebGLRenderer作为渲染目标
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 启用轨道控制器以便于观察物体
const controls = new THREE.OrbitControls(camera, renderer.domElement);

#### 准备用于测量的对象

定义两个变量存储选中的顶点或面片中心的位置向量，当用户第一次点击时记录起点，第二次点击则用来标记终点，从而能够计算两者间的直线距离。

let startPoint = null;
let endPoint = null;

#### 处理用户的输入事件

监听`mousedown`事件，在每次触发时执行射线投射操作找到最近的交点；如果已经有一个起始点了，则认为当前点击为结束点并显示测得的距离。

function onMouseDown(event) {
    event.preventDefault();

    const mouse = new THREE.Vector2(
        (event.clientX / window.innerWidth) * 2 - 1,
        -(event.clientY / window.innerHeight) * 2 + 1
    );

    raycaster.setFromCamera(mouse, camera);

    let intersects = raycaster.intersectObjects(scene.children); // 假设所有的子对象都是可被拾取的
    
    if (intersects.length > 0 && !startPoint) { // 如果还没有设定起点...
        startPoint = intersects[0].point.clone(); // ...保存第一个相交处的世界坐标
        
    } else if (intersects.length > 0 && startPoint !== null) { // 已经有了起点的情况下...
        endPoint = intersects[0].point.clone(); // 更新终点为新的点击位置
        
        console.log(`Distance between points is ${startPoint.distanceTo(endPoint).toFixed(2)} units.`);
        
        resetSelections(); // 测量完成后重置状态
    }
}

function resetSelections() {
    startPoint = null;
    endPoint = null;
}

#### 将上述逻辑集成到项目里

最后一步就是把上面编写的函数绑定到实际的DOM元素上去响应用户的动作。这里假设整个画布都属于Three.js的应用范围，因此可以直接挂接到文档根节点上。

window.addEventListener('mousedown', onMouseDown, false);

以上代码片段展示了怎样利用Three.js库构建一个简易但有效的3D空间内长度测量工具[^1]。需要注意的是这只是一个非常基础的例子，具体应用场景可能需要更复杂的逻辑支持，比如考虑不同类型的几何形状、多边形内部/外部的选择等。