Three.js - 如果对象相交则剪裁平面？

Question

我使用 PlaneGeometry 作为水，并在其上添加了一艘船（gltf 模型）。问题是，当船稍微停在水中时，即使船是漂浮的，水也会显示在船内。当船（或其他模型/物体）与运动相交时，有没有办法夹住水？

Answer 1

Three.js 中的每种材质都有一个 AlphaMap 属性 可用于更改网格的不透明度。因此，您可以绘制一个黑色矩形，船将在其中“切出”不透明度为 0 的水线部分。

我认为您的船将要移动，因此您的纹理也需要移动这个黑色矩形。要解决此问题，您可以使用 HTML 元素来绘制和移动黑色矩形。然后您可以使用 THREE.CanvasTexture 将 转换为飞机 Alpha 的纹理。

const drawingCanvas = document.getElementById( 'drawing-canvas' );
const canvasTexture = new THREE.CanvasTexture( drawingCanvas );

const waterMaterial = new THREE.MeshBasicMaterial({
    transparent: true,
    alphaMap: squareTexture
});

请参阅此工作演示，了解如何在 3D 场景中使用 2D 画布作为纹理。当您在左上角的正方形上绘制时，您会看到它被应用到立方体上。您可以复制此方法，但不要将其分配给 material.map，而是在 material.alphaMap 上使用它。

Answer 2

您可以检查每帧船体顶点的位置，并且如果 PlaneGeometry 上有足够的点，您可以将船体内部表面的所有顶点移动到最近船体顶点的 y 坐标。这也可以通过自定义着色器来完成，这可能是一个更有效的解决方案。
@Marquizzo 关于 alpha 通道的想法可能也是一个更好的解决方案，因为您并不像我假设的那样真正想要模拟水的位移，而只是摆脱船内水的显示。在这种情况下，我将在船上方放置一个正交相机，将近剪裁平面和远剪裁平面设置为尽可能靠近平面，并使用 Alpha 通道或 Alpha 通道内的 CanvasTexture 作为渲染目标。这样，您将获得实时 alpha 贴图，该贴图也会对船舶的横滚、纵摇和升沉做出反应。

Answer 3

浮动效果是通过应用于 y 坐标的 sin 函数实现的。你可以用同样的原理让gltf模型（船）在任意坐标轴上移动。

例子：

position.y = Math.sin(ship.userData.initFloating + t) * 0.15;