three.js 物体 3D 模型尺寸测量：如何使用 Raycaster 和几何体

前端

2023-12-23 21:06:13

尺寸测量标注：解锁 three.js 中的测量能力

在物联网、数字孪生和 Web3D 可视化项目中，尺寸测量是一个必不可少的特性。three.js 提供了强大的工具，使您能够轻松为 3D 模型添加尺寸测量功能。

揭秘 three.js 的尺寸测量

1. 创建测量工具

首先，需要初始化一个 three.js 场景，加载您要测量的 3D 模型。接下来，创建一个 Raycaster 对象来检测用户点击模型的射线。最后，创建一个变量来存储测量点和测量距离。

2. 处理用户点击事件

监听场景中的鼠标点击事件。当用户点击时，使用 Raycaster 对象将点击位置射线投射到场景中，确定模型表面被点击的点。将第一个点击的点存储为第一个测量点。

3. 捕捉第二个测量点

等待用户单击第二个点。再次使用 Raycaster 对象确定第二个测量点。

4. 计算测量距离

使用 three.js 的 Vector3.distanceTo() 方法计算两个测量点之间的距离。将测量距离存储在变量中。

5. 创建尺寸标注

根据测量距离创建一个箭头或线段几何体。将几何体添加到场景中，并将其定位在测量点之间。根据需要自定义箭头或线段的外观（例如颜色、宽度和材质）。

代码示例

// 初始化场景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 加载 3D 模型
const loader = new THREE.GLTFLoader();
loader.load('model.gltf', function (gltf) {
    scene.add(gltf.scene);
});

// 初始化 Raycaster
const raycaster = new THREE.Raycaster();

// 测量变量
let point1, point2, distance;

// 鼠标点击事件监听器
window.addEventListener('click', function(e) {
    // 获取鼠标点击位置
    const mouseX = e.clientX;
    const mouseY = e.clientY;

    // 准备射线投射
    const ray = new THREE.Raycaster();
    ray.setFromCamera(new THREE.Vector2(mouseX / window.innerWidth * 2 - 1, -(mouseY / window.innerHeight) * 2 + 1), camera);

    // 检测射线与模型的交点
    const intersects = ray.intersectObjects(scene.children, true);

    if (intersects.length > 0) {
        // 获取第一个交点
        const intersect = intersects[0];

        // 处理第一个测量点
        if (!point1) {
            point1 = intersect.point;
        } 
        // 处理第二个测量点
        else if (!point2) {
            point2 = intersect.point;

            // 计算测量距离
            distance = point1.distanceTo(point2);

            // 创建尺寸标注（例如箭头）
            const arrowGeometry = new THREE.ArrowHelper(point1.clone().normalize(), point2.clone().normalize(), distance, 0xff0000);
            scene.add(arrowGeometry);
        }
    }
});