JSFiddle - React, Tailwind, and code Playground

by Paul West

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

console.clear();
import * as THREE from "https://cdn.skypack.dev/[email protected]";
import {OrbitControls} from "https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls.js";

import { EffectComposer } from 'https://cdn.skypack.dev/[email protected]/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'https://cdn.skypack.dev/[email protected]/examples/jsm/postprocessing/RenderPass.js';
import { ShaderPass } from 'https://cdn.skypack.dev/[email protected]/examples/jsm/postprocessing/ShaderPass.js';

import { GUI } from 'https://cdn.skypack.dev/[email protected]/examples/jsm/libs/lil-gui.module.min.js';

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100);
camera.position.set(0, 10, 10);
let renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x7f7f7f);
renderer.setSize(innerWidth, innerHeight);
//renderer.outputEncoding = THREE.sRGBEncoding;
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);

let controls = new OrbitControls(camera, renderer.domElement);

let light = new THREE.DirectionalLight(0xffffff, 1.0);
light.position.set(1, 1, 0);

light.castShadow = true;

light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;

const d = 10;

light.shadow.camera.left = - d;
light.shadow.camera.right = d;
light.shadow.camera.top = d;
light.shadow.camera.bottom = - d;

light.shadow.camera.far = 1000;

scene.add(light, new THREE.AmbientLight(0xffffff, 0.5));

let pg = new THREE.PlaneGeometry(10, 10);
pg.rotateX(-Math.PI * 0.5);
let pm = new THREE.MeshLambertMaterial({color: "white"});
let p = new THREE.Mesh(pg, pm);
p.receiveShadow = true;
scene.add(p);

let sg = new THREE.SphereGeometry(2);
let sm = new THREE.MeshLambertMaterial("white");
let s = new THREE.Mesh(sg, sm);
s.position.y = 2;
s.castShadow = true;
scene.add(s)

const BlueishShader = {

	uniforms: {

		'tDiffuse': { value: null },
    'blueVal': { value: 0.25 }

	},

	vertexShader:...