JSFiddle - React, Tailwind, and code Playground

by titansoftime

HTML

<script src="https://rawgit.com/mrdoob/three.js/master/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/objects/Water.js"></script>

CSS

html, body{
  margin:0;
  padding:0;
}

JavaScript

var scene, camera, renderer, ambient, directional, controls, stats, clock, imageLoader;

var material;

var plane;

var _SHADERLIB = {

	// WATER
	water:{

		vertex_pars:[

			'varying vec3 vWorldPosition;'

		].join('\n'),

		begin_vertex: [

			'vWorldPosition = vec3(position.xyz);'

		].join('\n'),

		fragment_pars: [

			'uniform float time;',

			'varying vec3 vWorldPosition;',

			'vec4 getNoise( vec2 uv, in sampler2D normalMap ) {',
			'	vec2 uv0 = ( uv / 103.0 ) + vec2(time / 17.0, time / 29.0);',
			'	vec2 uv1 = uv / 107.0-vec2( time / -19.0, time / 31.0 );',
			'	vec2 uv2 = uv / vec2( 8907.0, 9803.0 ) + vec2( time / 101.0, time / 97.0 );',
			'	vec2 uv3 = uv / vec2( 1091.0, 1027.0 ) - vec2( time / 109.0, time / -113.0 );',
			'	vec4 noise = texture2D( normalMap, uv0 ) +',
			'		texture2D( normalMap, uv1 ) +',
			'		texture2D( normalMap, uv2 ) +',
			'		texture2D( normalMap, uv3 );',
			'	return noise * 0.5 - 1.0;',
			'}'

		].join('\n'),

		normalmap_pars_fragment: [

			'#ifdef USE_NORMALMAP',
				'uniform sampler2D normalMap;',
				'uniform vec2 normalScale;',
			'#endif',
			'#ifdef OBJECTSPACE_NORMALMAP',
				'uniform mat3 normalMatrix;',
			'#endif',
			'#if ! defined ( USE_TANGENT ) && ( defined ( TANGENTSPACE_NORMALMAP ) || defined ( USE_CLEARCOAT_NORMALMAP ) )',
				'vec3 perturbNormal2Arb( vec3 eye_pos, vec3 surf_norm, vec2 normalScale, in sampler2D normalMap ) {',
				
					'vec3 q0 = vec3( dFdx( eye_pos.x ), dFdx( eye_pos.y ), dFdx( eye_pos.z ) );',
					'vec3 q1 = vec3( dFdy( eye_pos.x ), dFdy( eye_pos.y ), dFdy( eye_pos.z ) );',
					'vec2 st0 = dFdx( vUv.st );',
					'vec2 st1 = dFdy( vUv.st );',
					
					'float scale = sign( st1.t * st0.s - st0.t * st1.s );',
					
					'vec4 noise = getNoise( vWorldPosition.xy * vUv * 0.1, normalMap );',									
					
					'vec3 S = normalize( ( q0 * st1.t - q1 * st0.t ) * scale );',
					'vec3 T = normalize( ( - q0 * st1.s + q1 * st0.s ) * scale );',
					'vec3 N = normalize( surf_norm...