JSFiddle - React, Tailwind, and code Playground

by grano

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script>
<script src='https://threejs.org/examples/js/postprocessing/EffectComposer.js'></script>
<script src='https://threejs.org/examples/js/postprocessing/RenderPass.js'></script>
<script src='https://threejs.org/examples/js/postprocessing/ShaderPass.js'></script>
<script src='https://threejs.org/examples/js/shaders/CopyShader.js'></script>
<script src="https://threejs.org/examples/js/shaders/LuminosityHighPassShader.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/UnrealBloomPass.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

 <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>

JavaScript

let camera, scene, renderer, bloomComposer, finalComposer;
let uniforms = {
  globalBloom: {value: 1}
}

init();
animate();

function init() {
	camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.01, 1000 );
	camera.position.set( 140, 140, 140 );
	camera.lookAt( 0, -10, 0 );	
  camera.layers.enable(1);
  
	scene = new THREE.Scene();
      
  const normalBox = new THREE.Mesh(new THREE.BoxGeometry(10, 10, 10), new THREE.MeshBasicMaterial({color: "red"}));
  normalBox.position.set(1,50,60);
 normalBox.layers.enable(0);
  scene.add(normalBox);

	const bloomBox = new THREE.Mesh(new THREE.BoxGeometry(10, 10, 10),
  		new THREE.MeshBasicMaterial({
      	color: "blue",
      }
    ));
  bloomBox.position.set(1,50,80);
  bloomBox.layers.enable(1);
  scene.add(bloomBox);
  
  const bloomBox2 = new THREE.Mesh(new THREE.BoxGeometry(10, 10, 10),
  		new THREE.MeshBasicMaterial({color: "green",
      	        onBeforeCompile: shader => {
                  shader.uniforms.globalBloom = uniforms.globalBloom;
                  shader.fragmentShader = `
            uniform float globalBloom;
            ${shader.fragmentShader}
            `.replace(
                    `#include <dithering_fragment>`,
                    `#include <dithering_fragment>
    	            	vec3 green = vec3(0.0, 1.0, 0.0);
				            vec3 col = green;
				            col *= 0.28;
				            gl_FragColor.rgb = mix(gl_FragColor.rgb, col, globalBloom);
        				    `
                  );
        }
      })
    );
  bloomBox2.position.set(1,50,100);
  bloomBox2.layers.enable(1);
  scene.add(bloomBox2);



  renderer = new THREE.WebGLRenderer();
	renderer.autoClear = false;
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );
  
 	const controls = new THREE.OrbitControls( camera, renderer.domElement );
  controls.target.set( 0, 1, 0 );

	setEffect()
}

function setEffect() { 
 const renderScene = new...