JSFiddle - React, Tailwind, and code Playground

by guillermo_matterport

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/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(-5, 5, 5);
camera.layers.enable(1);
var renderer = new THREE.WebGLRenderer({antialias: true});
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: 0x150505, wireframe: true}));
obj.position.z = 0.25;
scene.add(obj);

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

/** 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 THREE.UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 )
bloomPass.threshold = 0.21
bloomPass.strength = 1.2
bloomPass.radius = 0.55
bloomPass.renderToScreen = true
	
composer = new THREE.EffectComposer( renderer )
composer.setSize( window.innerWidth, window.innerHeight )
	
composer.addPass( renderScene )
composer.addPass( effectFXAA )
composer.addPass( bloomPass )
	
renderer.gammaInput = true
renderer.gammaOutput = true
renderer.toneMappingExposure = Math.pow( 0.9, 4.0 ) 

render();
function render(){
  requestAnimationFrame(render);
    
  renderer.autoClear = false;
  renderer.clear();
  
  camera.layers.set(1);
  composer.render();
  
  renderer.clearDepth();
  camera.layers.set(0);
  renderer.render(scene, camera);
}