Three.js墙体裁剪问题：模拟液体的圆柱体穿透通道壁如何解决

一、推导通道壁内法线（适配裁剪平面方案） #

• 若通道是规则几何体：
  • 方形通道：每个壁面的内法线可直接按方向定义，比如前壁内法线为new THREE.Vector3(0,0,-1)，后壁为new THREE.Vector3(0,0,1)，左右上下壁同理，指向通道内部即可。
  • 圆形管道：取壁面任意一点，用该点坐标减去管道中心轴上的对应点，得到的向量就是指向内部的法线（圆形管道壁的法线始终指向中心轴方向）。
• 若通道是不规则自定义模型：
  • 在建模软件（如Blender）中手动给通道壁面设置内法线后导出，Three.js加载模型时会保留法线数据，直接从Mesh.geometry.attributes.normal中提取对应面的法线即可。
  • 无法修改原始模型的话，可在Three.js中调用computeVertexNormals()重新计算法线，再对每个法线向量取反，得到内法线。

二、无需内法线的替代方案 #

1. 深度测试+材质遮罩 #

给通道壁材质关闭深度写入，同时开启液体圆柱的深度测试，配合渲染顺序就能遮挡穿透部分：

// 通道壁材质配置
const wallMaterial = new THREE.MeshStandardMaterial({
  color: 0x888888,
  depthWrite: false
});
// 液体圆柱材质配置
const liquidMaterial = new THREE.MeshStandardMaterial({
  color: 0x2266ff,
  transparent: true,
  opacity: 0.8,
  depthTest: true
});
// 固定渲染顺序：先画通道壁，再画液体
wallMesh.renderOrder = 0;
liquidMesh.renderOrder = 1;

2. 布尔运算（几何层面修正） #

借助three-bvh-csg这类布尔运算库，直接从几何上减去穿透部分：

import { SUBTRACTION, CSG } from 'three-bvh-csg';

// 将模型转为CSG对象
const wallCSG = CSG.fromMesh(wallMesh);
const liquidCSG = CSG.fromMesh(liquidMesh);
// 用通道减去圆柱，得到正确的液体形状
const resultCSG = wallCSG.subtract(liquidCSG);
// 转换回可渲染的Mesh
const resultMesh = CSG.toMesh(resultCSG, wallMesh.matrix);

这种方案视觉精度最高，但复杂模型会增加性能开销，适合静态场景。

3. 限制液体几何体范围 #

如果通道规则，直接约束液体圆柱的尺寸：比如圆形通道内，液体圆柱半径始终小于通道内半径，高度不超出通道上下边界，从源头上避免穿透。

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