如何让ThreeJS中的线条显示在OutlinePass之上？

可以实现，关键是利用EffectComposer的顺序渲染特性——后添加的Pass会绘制在之前Pass的渲染结果之上。具体修改如下：

步骤1：分离线条到独立场景 #

把需要显示在轮廓上方的线条单独放在一个新场景中，避免和主场景对象一起被OutlinePass处理：

// 初始化时新增线条专用场景
this.lineScene = new THREE.Scene();

// 修改createWideLine方法，将线条添加到线条场景而非主场景
this.createWideLine = function(start, end, color) {
  const geometry = new THREE.BufferGeometry().setFromPoints([start, end]);
  const material = new THREE.LineBasicMaterial({ color: color });
  const line = new THREE.Line(geometry, material);
  this.lineScene.add(line); // 添加到lineScene
}

步骤2：调整EffectComposer的Pass顺序 #

修改原代码中Pass的配置和添加顺序，确保线条在OutlinePass之后渲染：

// 创建EffectComposer实例
this.compose = new EffectComposer(this.renderer);

// 添加主场景渲染Pass
var renderPass = new RenderPass(this.scene, this.camera);
this.compose.addPass(renderPass);

// 创建OutlinePass并配置
var outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), this.scene, this.camera);
outlinePass.renderToScreen = false; // 关键：改为false，后续还有Pass需要渲染
outlinePass.selectedObjects.push(this.mesh);

// 轮廓参数配置
outlinePass.edgeStrength = 60;
outlinePass.edgeGlow = 0;
outlinePass.edgeThickness = 5;
outlinePass.pulsePeriod = 0;
outlinePass.usePatternTexture = false;
outlinePass.visibleEdgeColor.set("#CCCCCC");
outlinePass.hiddenEdgeColor.set("#CCCCCC");
outlinePass.overlayMaterial.blending = THREE.CustomBlending

this.compose.addPass(outlinePass);

// 新增：渲染线条场景的Pass，设置clear=false避免清除之前的渲染内容
const lineRenderPass = new RenderPass(this.lineScene, this.camera);
lineRenderPass.clear = false;
this.compose.addPass(lineRenderPass);

// 添加FXAA抗锯齿Pass，最后输出到屏幕
var effectFXAA = new ShaderPass(FXAAShader);
effectFXAA.uniforms["resolution"].value.set(
    1 / window.innerWidth,
    1 / window.innerHeight
);
effectFXAA.renderToScreen = true;
this.compose.addPass(effectFXAA);

// 创建线条
this.createWideLine(new Vector3(0,0,56),new Vector3(-300,0,56), new THREE.Color(0x00FF00));

原理说明 #

1. EffectComposer按Pass的添加顺序依次执行，后执行的Pass会将内容叠加在前序Pass的渲染结果上。
2. 线条独立场景可避免被OutlinePass的轮廓检测逻辑干扰。
3. lineRenderPass.clear = false确保渲染线条时，不会清除OutlinePass已经绘制的轮廓内容。

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