Vue+Three.js实现PCB电路板3D交互：元器件点击高亮、部件显隐、模型自动旋转实战解析

本文围绕Vue+Three.js实现PCB电路板3D交互：元器件点击高亮、部件显隐、模型自动旋转实战解析展开，先梳理核心概念，再结合实践场景说明步骤、代码思路和容易忽略的细节，方便后续直接参考。

实现效果：

1. 加载 GLB 格式电路板模型。
2. 可以用鼠标拖拽旋转、缩放、平移模型。
3. 点击某个芯片或元器件时，该元件变成半透明蓝色高亮。
4. 可以一键隐藏 / 显示 PCB 主板，只看内部元器件。
5. 点击自动旋转按钮后，模型可以平滑进入环绕旋转状态。

演示动态图效果如下：

核心功能原理讲解：

1. Raycaster 射线拾取实现元器件点击高亮：

核心流程：

1. 监听页面点击事件，获取鼠标屏幕坐标。
2. 根据渲染画布位置修正坐标偏移，转换为 Three.js 标准化坐标[-1,1]。
3. 通过Raycaster从相机位置发射射线，与场景内模型做碰撞检测。
4. 过滤 PCB 基板，仅元器件触发高亮逻辑。
5. 切换选中对象时，自动恢复上一个元件原始材质。

2. 材质缓存机制，解决高亮无法复原：

新手最容易踩的坑：直接修改 Mesh 原始材质。

Three.js 中多个 Mesh 可以共用同一份材质对象，直接修改原始材质，会导致所有共用材质的物体同步变色，并且退出高亮后无法恢复。标准解决方案：

1. 模型加载完成后，遍历所有 Mesh，克隆并缓存每一个物体的原始材质。
2. 选中元器件时，克隆材质副本进行颜色、透明度修改。
3. 取消选中时，读取缓存恢复原始材质。

3. Tween 镜头缓动 + OrbitControls 自动旋转：

直接开关controls.autoRotate交互生硬，体验较差。

优化方案：

1. 开启旋转：镜头平滑过渡到适合环绕观察的视角 → 延时启动自动旋转。
2. 停止旋转：先关闭自动旋转 → 镜头缓动回归初始观测视角。
3. 状态切换前，强制清理上一轮所有动画帧、Tween 实例、定时器，避免多动画并行造成镜头抖动。

完整代码

1. template 结构：

 复制代码<template> <div class="container"> <div class="btn-group">  <div class="btn" :class="{'btn-active': type=='0'}" @click="showVoid">显示主板div>  <div class="btn" :class="{'btn-active': type=='1'}" @click="hideVoid">隐藏主板div>  <div class="btn" v-show="!isAutoRotate" @click="startRotate">自动旋转div>  <div class="btn" v-show="isAutoRotate" @click="stopRotate">停止旋转div> div>  <div class="three" id="three" ref="content">div> div> template> 

2. script 代码：

 复制代码 

3. css样式代码:

 复制代码* { margin: 0; padding: 0; }.container { width: 100%; height: 100%; position: relative; }.three { width: 100%; height: 100%; position: relative; z-index: 1; }.btn-group { position: absolute; right: 0; top: 15px; z-index: 2; display: flex; justify-content: start; align-items: center; }.btn { width: 80px; height: 32px; line-height: 32px; text-align: center; border: 1px solid #dcdfe6; border-radius: 3px; margin-right: 15px; margin-left: 0; cursor: pointer; font-size: 12px; color: #606266; }.btn-active { background-color: #409eff; color: #FFF; } 

模型说明： 本文演示所用的 3D 模型来源于网络，版权归原作者所有。本文仅做 Three.js 前端技术学习演示，并未对模型本身做任何修改。

实际使用时，建议结合项目规模、依赖环境和团队习惯做取舍；先保证流程清晰和结果可验证，再逐步优化细节。