JSFiddle - React, Tailwind, and code Playground

by MelMacaluso

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.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;
			vec4 getTexture( sampler2D texelToLinearTexture ) {
				return mapTexelToLinear( texture2D( texelToLinearTexture , vUv ) );
			}
			void main() {
				gl_FragColor = ( getTexture( baseTexture ) + vec4( 1.0 ) * getTexture( bloomTexture ) );
			}
</script>

<script src="https://threejs.org/build/three.min.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/MaskPass.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/FXAAShader.js"></script>
<script src="https://threejs.org/examples/js/shaders/ConvolutionShader.js"></script>
<script src="https://threejs.org/examples/js/shaders/LuminosityHighPassShader.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/UnrealBloomPass.js"></script>


<div class="bg">
  <div class="canvas">
  
  </div>
</div>

CSS

body {
	  margin: 0;
}

canvas {
  display: block;
}

body {
background-color: #923cb5;
background-image: linear-gradient(147deg, #923cb5 0%, #000000 74%);
}

JavaScript

var camera, scene, renderer, canvas
var geometry, material, mesh

const gui = new dat.GUI({ closed: true, autoPlace: true})

init()


function init() {
    const	bg = new THREE.TextureLoader().load( 'https://i.imgur.com/iosI0Um.png' )
		canvas = document.querySelector('.canvas')
    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 )
    camera.position.z = 1

    scene = new THREE.Scene()

    geometry = new THREE.SphereGeometry( 0.10, 100, 100)
    cubeGeometry = new THREE.BoxGeometry( 5, 5, 2)
    material = new THREE.MeshBasicMaterial({color: '#ff0'})
    material2 = new THREE.MeshBasicMaterial({color: '#de2154'})
    material3 = new THREE.MeshBasicMaterial({color: '#2ef080'})
    material4 = new THREE.MeshBasicMaterial({color: '#fff'})

    
    mesh = new THREE.Mesh( geometry, material )
    mesh2 = new THREE.Mesh( geometry, material2 )
    mesh3 = new THREE.Mesh( geometry, material3 )
    cube = new THREE.Mesh( cubeGeometry, material4 )

    mesh2.position.x = 0.3
  	mesh3.position.x = -0.3
    cube.position.x = 0.0
    cube.position.y = 6.2
    cube.position.z = -9

    scene.add( mesh )
    scene.add( mesh2 )
    scene.add( mesh3 )
    scene.add( cube )

    renderer = new THREE.WebGLRenderer( { alpha: false, antialias: true } )
    renderer.setSize( window.innerWidth, window.innerHeight )
    renderer.setPixelRatio(window.devicePixelRatio)
    renderer.toneMapping = THREE.ReinhardToneMapping
    
    canvas.appendChild( renderer.domElement )
    
    // Custom
    const bloomLayer = new THREE.Layers(),
      width = window.innerWidth,
      height = window.innerHeight,
      params = {
        bloomRadius: 0,
        bloomStrength: 4,
        bloomThreshold: 0.16,
        exposure: 1.6
      },
      ENTIRE_SCENE = 0,
      BLOOM_SCENE = 1,
      darkMaterial = new THREE.MeshBasicMaterial({ color: 'black' }),
      materials = {},
      renderScene = new THREE.RenderPass(scene, camera),
      bloomPass = new...