Cada material en Three.js tiene una propiedad AlphaMap que puede usar para cambiar la opacidad de la malla. Entonces podrías dibujar un rectángulo negro donde está el bote para "recortar" esa parte del plano de agua con una opacidad de 0.

Supongo que su bote se moverá, por lo que su textura también necesitará mover este rectángulo negro. Para resolver esto, podría usar un elemento HTML <canvas> para dibujar y mover el rectángulo negro. Entonces podría usar THREE.CanvasTexture para convertir el <canvas> en una textura para el alfa de su plano.

 const drawingCanvas = document.getElementById( 'drawing-canvas' ); const canvasTexture = new THREE.CanvasTexture( drawingCanvas ); const waterMaterial = new THREE.MeshBasicMaterial({ transparent: true, alphaMap: squareTexture });

Vea esta demostración de trabajo para saber cómo usar un lienzo 2D como textura en su escena 3D. Cuando dibuje en el cuadrado superior izquierdo, verá que se aplica al cubo. Podría copiar este enfoque, pero en lugar de asignarlo a material.map , lo usaría en material.alphaMap .

Podría verificar la posición de los vértices del casco de la nave en cada cuadro y, dados suficientes puntos en PlaneGeometry, podría desplazar todos los vértices de la superficie dentro del casco de la nave a la coordenada y del vértice del casco más cercano. Esto probablemente también podría hacerse con un sombreador personalizado, que probablemente sea una solución más eficiente. La idea de @ Marquizzo con el canal alfa también es probablemente una mejor solución, ya que realmente no desea simular el desplazamiento del agua, como supongo, sino simplemente deshacerse de la visualización del agua dentro del barco. En este caso, colocaría una cámara ortográfica sobre la nave, establecería los planos de recorte cercanos y lejanos lo más cerca posible del plano y usaría el canal alfa o, más bien, CanvasTexture dentro del canal alfa como objetivo de representación. De esta manera, obtendrá un mapa alfa en tiempo real que también reacciona al balanceo, cabeceo y cabeceo del barco.

El efecto de flotación se hace con la función sin, aplicada a la coordenada y. Puede usar el mismo principio para hacer que el modelo gltf (barco) se mueva en cualquier eje de coordenadas.

Ejemplo:

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