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/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/FXAAShader.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/shaders/BlendShader.js"></script>


<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth/ window.innerHeight, 1, 10000);
camera.position.set(0, 0, 10);
camera.layers.enable(1);
camera.layers.enable(2);
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.autoClear = false;
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor( 0x101000 );
document.body.appendChild(renderer.domElement);

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

var light = new THREE.DirectionalLight(0xffffff, 0.75);
light.position.setScalar(100);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.25));

 
var obj = new THREE.Mesh(new THREE.BoxGeometry(5, 5, 4), new THREE.MeshLambertMaterial({color: "aqua", wireframe: false}));
obj.layers.enable(0);
obj.position.z = 0.25;
console.log('obj.geometry',obj.geometry)
obj.geometry.translate(10,10,10)
//obj.geometry.applyMatrix( new THREE.Matrix4().makeTranslation( 0, 10, 0 ) );
scene.add(obj);

var objBack = new THREE.Mesh(new THREE.BoxGeometry(5, 5, 1), new THREE.MeshBasicMaterial({color: "red", wireframe: false}));
objBack.position.z = -2.25;
objBack.layers.enable(1);
scene.add(objBack);

var weakBloomObj = new THREE.Mesh(new THREE.BoxGeometry(5, 5, 1), new THREE.MeshBasicMaterial({color: "yellow", wireframe: false}));
weakBloomObj.position.z = -10.25;
weakBloomObj.position.x = -2.25;
weakBloomObj.layers.enable(2);
scene.add(weakBloomObj);

 
var target1 = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat} );
var blendShader = new THREE.ShaderPass( THREE.BlendShader );
blendShader.uniforms.tDiffuse1.value = target1.texture; 

/** COMPOSER */
renderScene = new THREE.RenderPass( scene, camera )
	
effectFXAA = new THREE.ShaderPass( THREE.FXAAShader )
effectFXAA.uniforms.resolution.value.set( 1 / window.innerWidth, 1 / window.innerHeight )
	
bloomPass = new...