如何通过Three.js实现3D模型特定部件的高亮效果？

当然可以用Three.js实现这个需求，核心在于模型的结构准备和代码里的部件定位与效果控制，具体方案如下：

一、模型准备（必须步骤） #

要实现部件高亮，前提是你的3D模型里的目标部件（比如尾翼）是独立的Mesh/Object3D节点：

• 建模时要把尾翼单独拆分出来，不要和机身等其他部件合并成一个网格；
• 导出模型（推荐glTF/GLB格式）时，务必保留部件的层级结构，并且给每个需要高亮的部件设置清晰、唯一的名称（比如命名为tailWing），这样代码才能精准定位到它。
  如果当前模型是合并的网格，必须回到建模软件（Blender、3ds Max等）拆分部件后重新导出。

二、代码实现思路（三种常用方案） #

1. 材质替换法（最简单直接） #

保存目标部件的原始材质，点击按钮时替换成高亮材质，取消高亮时再换回原材质：

// 先从场景中获取目标部件（模型加载完成后执行）
const tailWing = scene.getObjectByName('tailWing');
let originalMaterial;

// 高亮尾翼函数
function highlightTailWing() {
  if (!tailWing) return;
  // 保存原始材质
  originalMaterial = tailWing.material;
  // 替换为半透明红色高亮材质（可根据需求调整颜色、透明度）
  tailWing.material = new THREE.MeshBasicMaterial({ 
    color: 0xff0000, 
    transparent: true, 
    opacity: 0.8 
  });
}

// 取消高亮函数
function unhighlightTailWing() {
  if (tailWing && originalMaterial) {
    tailWing.material = originalMaterial;
  }
}

// 绑定按钮点击事件（假设按钮id为tailWingBtn）
document.getElementById('tailWingBtn').addEventListener('click', () => {
  // 切换高亮状态
  tailWing.material !== originalMaterial ? unhighlightTailWing() : highlightTailWing();
});

2. 轮廓线高亮（视觉区分度高） #

使用Three.js官方提供的OutlineEffect扩展，给目标部件添加彩色轮廓线：

// 引入OutlineEffect（根据你的项目环境调整导入方式）
import { OutlineEffect } from 'three/addons/effects/OutlineEffect.js';

// 创建OutlineEffect实例
const effect = new OutlineEffect(renderer);

// 高亮尾翼函数
function highlightTailWing() {
  const tailWing = scene.getObjectByName('tailWing');
  if (tailWing) {
    // 设置轮廓颜色和宽度
    tailWing.userData.outlineColor = new THREE.Color(0xffff00);
    tailWing.userData.outlineWidth = 3;
  }
}

// 取消高亮函数
function unhighlightTailWing() {
  const tailWing = scene.getObjectByName('tailWing');
  if (tailWing) {
    delete tailWing.userData.outlineColor;
    delete tailWing.userData.outlineWidth;
  }
}

// 注意：渲染循环要替换为effect.render
function animate() {
  requestAnimationFrame(animate);
  effect.render(scene, camera);
}

3. 发光高亮（炫酷视觉效果） #

通过后期处理通道（比如UnrealBloomPass）实现部件发光效果，适合需要强视觉冲击的场景：

• 给目标部件设置一个独特的标记色（比如通过自定义uniform或单独的渲染图层）；
• 在后期处理流程中，只对这个标记色/图层应用发光效果；
  这种方式实现稍复杂，需要对Three.js后期处理有基础了解，核心是通过图层或颜色过滤区分目标部件。

内容的提问来源于stack exchange，提问作者ShefZee