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>

JavaScript

let camera, scene, renderer, composer;

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 directionalLight = new THREE.DirectionalLight(0xffffff, 1.2);
  directionalLight.position.set(2, 2, 2);
  scene.add(directionalLight);
  
  	const normalBox = new THREE.Mesh(new THREE.BoxGeometry(10, 10, 10), new THREE.MeshBasicMaterial({color: "red"}));
  normalBox.position.set(1,50,60);
  normalBox.layers.set(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.set(1);
  scene.add(bloomBox);

	loadModel();

  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 loadModel() {
const loader = new THREE.GLTFLoader();
  loader.load( 'https://threejs.org/examples/models/gltf/Stork.glb', function ( gltf ) {
    const model = gltf.scene;
    gltf.scene.traverse( function ( child ) {
//	    child.layers.set(1);
    })          
    scene.add( model );
	});
}

function setEffect() {
  const renderModel = new THREE.RenderPass( scene, camera );
 
  
 const bloomPass = new THREE.UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 6, 2, 0 )
 bloomPass.threshold = 0
 bloomPass.strength = 1.6
 bloomPass.radius = 0.35


 composer = new THREE.EffectComposer( renderer );
 composer.setSize( window.innerWidth, window.innerHeight )
 composer.renderToScreen = true;
 composer.addPass( renderModel );
 composer.addPass( bloomPass ); 
}


function animate()...