如何让带EdgesGeometry的网格始终置顶且轮廓不穿透自身？

核心思路 #

通过分层渲染顺序+精准配置深度属性，既保证绿色Mesh及轮廓优先显示在蓝色Mesh上方，又避免轮廓穿透自身。

具体配置步骤 #

1. 设置渲染顺序分层

   • 蓝色Mesh保持默认renderOrder: 0（先渲染）
   • 绿色Mesh及其轮廓统一设置renderOrder: 1（后渲染，确保在蓝色之上）

2. 深度属性精准配置

   • 蓝色Mesh：保持默认的depthTest: true和depthWrite: true，正常写入深度缓冲，作为底层深度参照
   • 绿色Mesh：开启depthTest: true（避免自身穿透），关闭depthWrite: false（不覆盖蓝色的深度缓冲，确保轮廓渲染时能正确识别蓝色的深度）
   • 绿色Mesh的轮廓（LineSegments）：开启depthTest: true，关闭depthWrite: false，同时启用polygonOffset让轮廓略微“浮”在绿色Mesh表面，避免被主体遮挡

代码示例 #

// 蓝色Mesh配置（默认参数可省略，此处明确标注）
blueMesh.renderOrder = 0;
blueMesh.material.depthTest = true;
blueMesh.material.depthWrite = true;

// 绿色Mesh配置
greenMesh.renderOrder = 1;
greenMesh.material.depthTest = true;
greenMesh.material.depthWrite = false;

// 绿色Mesh轮廓配置
const greenEdgesGeometry = new THREE.EdgesGeometry(greenMesh.geometry);
const greenEdgesMaterial = new THREE.LineBasicMaterial({ color: 0x000000 });
const greenEdges = new THREE.LineSegments(greenEdgesGeometry, greenEdgesMaterial);

greenEdges.renderOrder = 1;
greenEdges.material.depthTest = true;
greenEdges.material.depthWrite = false;
greenEdges.material.polygonOffset = true;
greenEdges.material.polygonOffsetFactor = -1; // 负值让轮廓向相机方向偏移

greenMesh.add(greenEdges);

原理说明 #

• 渲染顺序：数值越大越晚渲染，绿色Mesh及轮廓后渲染，会覆盖在蓝色Mesh之上
• 深度测试：绿色Mesh和轮廓开启depthTest，可正确识别自身及蓝色Mesh的深度关系，避免穿透问题
• 深度写入：绿色Mesh关闭depthWrite，不会覆盖蓝色Mesh的深度缓冲，确保轮廓渲染时不会错误地穿透蓝色Mesh
• 多边形偏移：让轮廓与绿色Mesh主体产生微小深度差，避免轮廓被主体遮挡

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