如何使用Three.js隐藏两个Object3D的相交区域？附球体示例

嘿，针对你提出的「隐藏两个Object3D相交区域」的需求（比如透明红球体S-Red和蓝球体S-Blue的相交部分），最靠谱的方案是利用Three.js的**模板缓冲（Stencil Buffer）**来实现精准的区域遮罩。下面我结合你的球体例子，给出完整的实现步骤和代码：

核心原理 #

模板缓冲可以帮我们在渲染时标记场景中的特定区域，后续渲染其他物体时，我们可以根据模板标记来决定哪些区域显示、哪些区域隐藏。对于你的场景，我们可以：

1. 先渲染S-Red，把它覆盖的区域在模板缓冲中标记出来
2. 再渲染S-Blue时，只渲染不在模板标记区域的部分，这样两个球体的相交区域就会被自动隐藏

完整代码示例 #

// 基础场景搭建
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xf0f0f0);
// 关键：开启模板缓冲
renderer.enableStencilTest = true;
document.body.appendChild(renderer.domElement);

// 创建两个球体
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);

// S-Red：透明材质
const redMaterial = new THREE.MeshBasicMaterial({
  color: 0xff0000,
  transparent: true,
  opacity: 0.5,
  // 模板缓冲设置：渲染时替换模板值为1
  stencilFunc: THREE.AlwaysStencilFunc,
  stencilOp: THREE.ReplaceStencilOp,
  stencilRef: 1,
  stencilWriteMask: 0xff,
  stencilReadMask: 0xff
});
const sphereRed = new THREE.Mesh(sphereGeometry, redMaterial);
sphereRed.position.x = -0.8;
scene.add(sphereRed);

// S-Blue：正常材质，利用模板缓冲剔除相交区域
const blueMaterial = new THREE.MeshBasicMaterial({
  color: 0x0000ff,
  // 模板缓冲设置：只渲染模板值不等于1的区域
  stencilFunc: THREE.NotEqualStencilFunc,
  stencilRef: 1,
  stencilWriteMask: 0x00, // 不修改模板缓冲
  stencilReadMask: 0xff
});
const sphereBlue = new THREE.Mesh(sphereGeometry, blueMaterial);
sphereBlue.position.x = 0.8;
scene.add(sphereBlue);

camera.position.z = 3;

// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

关键参数解释 #

• renderer.enableStencilTest = true：必须开启这个才能使用模板缓冲功能
• 对于S-Red的材质：
  • stencilFunc: THREE.AlwaysStencilFunc：无论当前模板值是什么，都通过测试
  • stencilOp: THREE.ReplaceStencilOp：将模板缓冲中对应区域的值替换为stencilRef（这里是1）
• 对于S-Blue的材质：
  • stencilFunc: THREE.NotEqualStencilFunc：只有当模板值不等于stencilRef（1）时，才渲染该区域
  • stencilWriteMask: 0x00：避免修改模板缓冲，保证标记的区域是S-Red的范围

扩展调整 #

如果需要双向隐藏（同时让S-Red和S-Blue的相交区域都不可见），可以分四次渲染：

1. 渲染S-Red标记模板区域
2. 渲染S-Blue时剔除相交区域
3. 重置模板缓冲
4. 渲染S-Blue标记模板区域，再渲染S-Red时剔除相交区域

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