Three.js -剪辑平面，如果物体相交？

Question

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

​

​

Answer 1

Three.js中的每一种材料都有AlphaMap属性，您可以使用它来改变网格的不透明度。所以你可以画一个黑色的矩形，在那里，船要“切”出水面的那一部分，其不透明度为0。

我猜你的船会移动，所以你的纹理也需要移动这个黑色的矩形。要解决这个问题，您可以使用一个HTML <canvas>元素来绘制和移动黑色矩形。然后您可以使用THREE.CanvasTexture将<canvas>转换为飞机阿尔法的纹理。

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通道，或者更确切地说，是CanvasTexture作为渲染目标。这样，你就会得到一个实时的阿尔法地图，它也会对船的翻滚、俯仰和升沉产生反应。

Answer 3

浮点效应采用sin函数，适用于y坐标.您可以使用相同的原则，使gltf模型(船)在任何坐标上移动。

示例：

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