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

作者：袖梨 2026-07-30

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

实现效果：

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

演示动态图效果如下：

核心功能原理讲解：

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

核心流程：

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

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

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

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

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

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

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

优化方案：

开启旋转：镜头平滑过渡到适合环绕观察的视角 → 延时启动自动旋转。
停止旋转：先关闭自动旋转 → 镜头缓动回归初始观测视角。
状态切换前，强制清理上一轮所有动画帧、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; }