Three.js技术问询：如何仅为特定对象添加Bloom效果

嘿，我太懂你这个困扰了——用Three.js的EffectComposer加UnrealBloom或者标准Bloom时，想只给特定对象加辉光，试过双场景叠加却出现效果退化，对吧？我之前也踩过这个坑，下面给你几个亲测有效的解决方案：

这是最常用且高效的方法，核心思路是把需要辉光的对象放到单独图层，分别渲染主场景和辉光场景再叠加：

• 步骤拆解：

  1. 给需要Bloom的对象分配专属图层：

     // 给目标对象设置图层1（默认是图层0）
     yourBloomObject.layers.set(1);
     // 如果是组对象，记得遍历子元素设置图层
     yourBloomGroup.traverse(obj => obj.layers.set(1));
     

  2. 创建两个EffectComposer：一个负责渲染主场景（不含辉光对象），另一个只渲染辉光对象的场景
  3. 关键配置：确保辉光Composer的渲染通道不清除颜色缓冲，用正确的混合模式叠加

• 完整渲染循环示例：

// 初始化主场景Composer
const mainComposer = new EffectComposer(renderer);
mainComposer.addPass(new RenderPass(scene, camera));
// 可以在这里添加主场景的其他后期效果（比如抗锯齿）

// 初始化辉光专属Composer
const bloomComposer = new EffectComposer(renderer);
const bloomRenderPass = new RenderPass(scene, camera);
// 关键：设置清除颜色为纯黑，透明度为0，避免覆盖主场景
bloomRenderPass.clearColor = new THREE.Color(0x000000);
bloomRenderPass.clearAlpha = 0;
bloomComposer.addPass(bloomRenderPass);
// 添加UnrealBloomPass，根据需求调整参数
bloomComposer.addPass(new UnrealBloomPass(
  new THREE.Vector2(window.innerWidth, window.innerHeight),
  1.5, // strength
  0.4, // radius
  0.85 // threshold
));

// 渲染循环
function render() {
  requestAnimationFrame(render);

  // 1. 先渲染主场景：相机只看图层0
  camera.layers.set(0);
  mainComposer.render();

  // 2. 切换到辉光图层，用加法混合叠加到主场景
  renderer.context.globalCompositeOperation = 'screen'; // 比add更自然的辉光混合
  camera.layers.set(1);
  bloomComposer.render();

  // 3. 恢复默认混合模式，避免影响后续渲染
  renderer.context.globalCompositeOperation = 'source-over';
}

如果你的场景更复杂（比如只想给对象的某个局部加辉光），可以用掩码材质来标记辉光区域：

• 步骤拆解：

  1. 创建一个纯白的掩码材质，用来标记需要辉光的区域：

     const maskMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
     

  2. 渲染前保存目标对象的原始材质，替换为掩码材质；渲染完再恢复
  3. 用掩码渲染结果作为Bloom的输入，再和主场景叠加

• 核心代码片段：

// 渲染循环中
function render() {
  requestAnimationFrame(render);

  // 1. 渲染主场景
  mainComposer.render();

  // 2. 替换目标对象材质为掩码材质
  yourBloomObject.traverse(obj => {
    if (obj.isMesh) {
      obj.userData.originalMaterial = obj.material;
      obj.material = maskMaterial;
    }
  });

  // 3. 渲染掩码并应用Bloom
  renderer.context.globalCompositeOperation = 'screen';
  bloomComposer.render();

  // 4. 恢复原始材质
  yourBloomObject.traverse(obj => {
    if (obj.isMesh) {
      obj.material = obj.userData.originalMaterial;
    }
  });

  // 恢复混合模式
  renderer.context.globalCompositeOperation = 'source-over';
}

你之前遇到的问题大概率是这两个原因：

• 没有正确设置辉光Composer的清除参数：如果清除了颜色缓冲，就会覆盖主场景的渲染结果，导致辉光叠加时丢失细节
• 混合模式选错了：用add混合容易导致过曝或者颜色失真，screen模式更贴近真实的辉光叠加效果，能保留更多场景细节

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