JSFiddle - React, Tailwind, and code Playground

by lighty1235

HTML

<script type="x-shader/x-vertex" id="vertexshader">

		  varying vec2 vUv;

			void main() {

				vUv = uv;

				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

			}

</script>

<script type="x-shader/x-fragment" id="fragmentshader">

		  uniform sampler2D baseTexture;
			uniform sampler2D bloomTexture;

			varying vec2 vUv;

			void main() {

				gl_FragColor = ( texture2D( baseTexture, vUv ) + vec4( 1.0 ) * texture2D( bloomTexture, vUv ) );

			}

</script>

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

import * as THREE from 'https://threejs.org/build/three.module.js';

import {
  GUI
} from 'https://threejs.org/examples/jsm/libs/dat.gui.module.js';

import {
  OrbitControls
} from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';
import {
  EffectComposer
} from 'https://threejs.org/examples/jsm/postprocessing/EffectComposer.js';
import {
  RenderPass
} from 'https://threejs.org/examples/jsm/postprocessing/RenderPass.js';
import {
  ShaderPass
} from 'https://threejs.org/examples/jsm/postprocessing/ShaderPass.js';
import {
  UnrealBloomPass
} from 'https://threejs.org/examples/jsm/postprocessing/UnrealBloomPass.js';

let o1, o2;

const params = {
  exposure: 1,
  bloomStrength: 5,
  bloomThreshold: 0,
  bloomRadius: 0
};

const darkMaterial = new THREE.MeshBasicMaterial({
  color: "black"
});
const materials = {};

const renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setClearColor(0xECF0F1);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.toneMapping = THREE.ReinhardToneMapping;
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 200);
camera.position.set(0, 0, 10);
camera.lookAt(0, 0, 0);

const controls = new OrbitControls(camera, renderer.domElement);
controls.maxPolarAngle = Math.PI * 0.5;
controls.minDistance = 1;
controls.maxDistance = 100;
controls.addEventListener('change', render);

scene.add(new THREE.AmbientLight(0x404040));

const renderScene = new RenderPass(scene, camera);

const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);
bloomPass.threshold = params.bloomThreshold;
bloomPass.strength = params.bloomStrength;
bloomPass.radius = params.bloomRadius;

const bloomComposer = new EffectComposer(renderer);
bloomComposer.renderToScreen =...