如何用Three.js实现三维模型与CAD图纸的联动高亮显示？

要实现三维模型与CAD图纸的联动高亮显示，可以使用Three.js来渲染三维模型，并结合HTML5 Canvas或SVG来显示CAD图纸。以下是实现这一功能的基本步骤：

1. 准备工作

• Three.js：用于渲染三维模型。
• CAD图纸：将CAD图纸导出为SVG或PNG格式，以便在网页中显示。
• HTML5 Canvas或SVG：用于显示CAD图纸并处理交互。

2. 加载三维模型

使用Three.js加载三维模型（如OBJ、GLTF等格式）。

const loader = new THREE.GLTFLoader();
loader.load('path/to/model.gltf', function(gltf) {
    const model = gltf.scene;
    scene.add(model);
}, undefined, function(error) {
    console.error(error);
});

3. 显示CAD图纸

将CAD图纸作为背景图像或SVG元素嵌入到网页中。

<div id="cad-container" style="position: relative;">
    <img id="cad-image" src="path/to/cad.png" style="width: 100%; height: auto;">
    <canvas id="cad-canvas" style="position: absolute; top: 0; left: 0;"></canvas>
</div>

4. 实现联动高亮

通过监听鼠标事件，实现三维模型与CAD图纸的联动高亮显示。

4.1 监听鼠标事件

在Three.js中监听鼠标事件，获取鼠标点击的三维模型中的对象。

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

window.addEventListener('mousemove', function(event) {
    // 将鼠标位置归一化为设备坐标 (-1到+1)
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

    // 通过摄像机和鼠标位置更新射线
    raycaster.setFromCamera(mouse, camera);

    // 计算射线与模型的交点
    const intersects = raycaster.intersectObjects(scene.children, true);

    if (intersects.length > 0) {
        const selectedObject = intersects[0].object;
        highlightObject(selectedObject);
        highlightCAD(selectedObject);
    }
});

4.2 高亮三维模型

在Three.js中高亮选中的三维模型对象。

function highlightObject(object) {
    // 清除之前的高亮
    scene.traverse(function(child) {
        if (child.material) {
            child.material.emissive.set(0x000000);
        }
    });

    // 高亮选中的对象
    if (object.material) {
        object.material.emissive.set(0xff0000);
    }
}

4.3 高亮CAD图纸

在CAD图纸上高亮对应的部分。可以通过在Canvas上绘制高亮区域或修改SVG元素的样式来实现。

function highlightCAD(object) {
    const canvas = document.getElementById('cad-canvas');
    const ctx = canvas.getContext('2d');

    // 清除之前的高亮
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 根据选中的对象在CAD图纸上绘制高亮区域
    const cadPosition = getCADPosition(object);
    ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
    ctx.fillRect(cadPosition.x, cadPosition.y, cadPosition.width, cadPosition.height);
}

function getCADPosition(object) {
    // 根据三维模型对象的位置计算对应的CAD图纸位置
    // 这里需要根据具体的模型和CAD图纸的映射关系来实现
    return {
        x: object.position.x * scaleFactor,
        y: object.position.y * scaleFactor,
        width: 10,
        height: 10
    };
}

5. 优化与扩展

• 性能优化：对于复杂的模型和图纸，可以使用Web Workers或OffscreenCanvas来提高性能。
• 交互增强：可以添加更多的交互功能，如点击选中、拖拽、缩放等。
• 数据映射：确保三维模型与CAD图纸的坐标系统一致，或者通过映射关系进行转换。

6. 总结

通过Three.js和HTML5 Canvas/SVG的结合，可以实现三维模型与CAD图纸的联动高亮显示。关键在于通过鼠标事件获取选中的三维模型对象，并在CAD图纸上对应位置进行高亮显示。具体的实现细节需要根据实际的模型和图纸进行调整和优化。