JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@r92/examples/js/loaders/GLTFLoader.js"></script>
JavaScript
let skyBg, skyBg2;
/* scene background */
var skyLoader = new THREE.TextureLoader();
skyBg = skyLoader.load("https://i.ibb.co/8bzn2nX/sky-hdr-img.jpg");
skyBg.mapping = THREE.EquirectangularReflectionMapping;
skyBg.encoding = THREE.sRGBEncoding;
var skyLoader2 = new THREE.TextureLoader();
skyBg2 = skyLoader2.load("https://i.ibb.co/KrFdvmf/sky-gradient.png");
skyBg2.mapping = THREE.EquirectangularReflectionMapping;
skyBg2.encoding = THREE.sRGBEncoding;
const Color = THREE.Color;
const FrontSide = THREE.FrontSide;
const LinearEncoding = THREE.LinearEncoding;
const LinearFilter = THREE.LinearFilter;
const MathUtils = THREE.MathUtils;
const Matrix4 = THREE.Matrix4;
const Mesh = THREE.Mesh;
const NoToneMapping = THREE.NoToneMapping;
const PerspectiveCamera = THREE.PerspectiveCamera;
const Plane = THREE.Plane;
const RGBFormat = THREE.RGBFormat;
const ShaderMaterial = THREE.ShaderMaterial;
const UniformsLib = THREE.UniformsLib;
const UniformsUtils = THREE.UniformsUtils;
const Vector3 = THREE.Vector3;
const Vector4 = THREE.Vector4;
const WebGLRenderTarget = THREE.WebGLRenderTarget;
var Water = function ( geometry, options ) {
Mesh.call( this, geometry );
var scope = this;
options = options || {};
var textureWidth = options.textureWidth !== undefined ? options.textureWidth : 512;
var textureHeight = options.textureHeight !== undefined ? options.textureHeight : 512;
var clipBias = options.clipBias !== undefined ? options.clipBias : 0.0;
var alpha = options.alpha !== undefined ? options.alpha : 1.0;
var time = options.time !== undefined ? options.time : 0.0;
var normalSampler = options.waterNormals !== undefined ? options.waterNormals : null;
var sunDirection = options.sunDirection !== undefined ? options.sunDirection : new Vector3( 0.70707, 0.70707, 0.0 );
var sunColor = new Color( options.sunColor !== undefined ? options.sunColor : 0xffffff );
var waterColor = new Color( options.waterColor !== undefined ? options.waterColor : 0x7F7F7F...