首页 > 网页制作 >Vue+Three.js实现PCB电路板3D交互：元器件点击高亮、部件显隐、自动旋转

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

来源：互联网 2026-07-31 17:05:29

Vue+Three.js 实现 PCB 电路板 3D 交互：元器件点击高亮、部件显隐与模型自动旋转核心交互功能基于 Three.js 与 Vue 框架构建的 PCB 电路板 3D 可视化方案，支持以下交互操作：加载 GLB 格式电路板模型。使用鼠标拖拽旋转、缩放、平移模型。点击芯片或元器件

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

长期稳定更新的攒劲资源： >>>点此立即查看<<<

核心交互功能

基于 Three.js 与 Vue 框架构建的 PCB 电路板 3D 可视化方案，支持以下交互操作：

加载 GLB 格式电路板模型。
使用鼠标拖拽旋转、缩放、平移模型。
点击芯片或元器件时，该元件呈现半透明蓝色高亮效果。
支持一键隐藏或显示 PCB 主板，便于查看内部元器件布局。
点击自动旋转按钮后，模型平滑进入环绕旋转展示状态。

演示效果

核心功能原理讲解

以下为开发过程中容易遇到的关键技术点，直接影响交互流畅度与用户体验。

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

核心流程清晰，但每个步骤都影响最终效果：

监听页面点击事件，获取鼠标在屏幕上的坐标。
根据渲染画布位置修正坐标偏移，转换为 Three.js 标准化坐标 [-1,1]。若画布非全屏显示，此步骤极易出错。
通过 Raycaster 从相机位置发射射线，与场景内所有模型进行碰撞检测。
需过滤 PCB 基板本身，仅让元器件触发高亮逻辑，避免点击主板时出现蓝色高亮。
切换选中对象时，自动恢复上一个元件的原始材质。

材质缓存机制解决高亮无法复原问题

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

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

Tween 镜头缓动与 OrbitControls 自动旋转

直接开关 controls.autoRotate 效果生硬，优化方案注重平滑过渡：

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

完整代码实现

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>

script 代码

 复制代码

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;
}