JSFiddle - React, Tailwind, and code Playground

by wisegorilla

HTML

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
    
<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three/build/three.module.js",
      "cs": "https://unpkg.com/three/examples/jsm/controls/OrbitControls.js"
		}
	}
</script>

CSS

body {
	  margin: 0;
}

JavaScript

import * as THREE from 'three';
import { OrbitControls } from 'cs';

// init

const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animation );
document.body.appendChild( renderer.domElement );

const camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.04, 4000 );
camera.position.set( 0, 3.5, 7 );
camera.lookAt( 0, 0, 0 );

new OrbitControls( camera, renderer.domElement );

const scene = new THREE.Scene();

const geometry = new THREE.BoxGeometry( 3, 3, 3 );
const material = new THREE.MeshNormalMaterial();

const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

const plane = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000 ), makeWaterMaterial( renderer ) );
plane.geometry.rotateX( -Math.PI / 2 );
scene.add( plane );

// animation

function animation( time ) {

	mesh.rotation.x = time / 8000;
	mesh.rotation.y = time / 4000;

	renderer.render( scene, camera );

}

// water shader

function makeWaterMaterial( renderer ) {

	// make this work with WebGL1Renderer
  const fragmentPrefix = renderer.extensions.has('EXT_frag_depth') ? '#extension GL_EXT_frag_depth:enable\n' : '';
  
  return new THREE.ShaderMaterial( {
  	vertexShader: `
      varying vec3 eye;
      varying vec3 pos;
      void main () {
      	vec4 mvp = modelViewMatrix * vec4 (position, 1.0);

      	pos = position;
      	eye = vec3(mvp) * normalMatrix;

      	gl_Position = projectionMatrix * mvp;
      }
		`,
    
    // based on https://www.shadertoy.com/view/lt3GWj

    fragmentShader: `${fragmentPrefix}
    	uniform float iTime;

// A documented, altered, recolored version of "Seascape".
// The famous original at:
// https://www.shadertoy.com/view/Ms2SD1

// "Seascape" by Alexander Alekseev aka TDM - 2014
// Commenting added by bteitler
//  HSV/color adjustments and additional commenting by...