JSFiddle - React, Tailwind, and code Playground

by pedrobrandaosilva

HTML

<script src="https://threejs.org/build/three.min.js"></script>

<script src='https://threejs.org/examples/js/shaders/CopyShader.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/VignetteShader.js"></script>
<script src="https://threejs.org/examples/js/shaders/HueSaturationShader.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);

var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor( 0xffffff );
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, 5), new THREE.MeshLambertMaterial({color: 0xff0505, wireframe: false}));
obj.position.z = 0.25;
scene.add(obj);

/** COMPOSER */
composer = new THREE.EffectComposer( renderer )
composer.setSize( window.innerWidth, window.innerHeight )

renderScene = new THREE.RenderPass( scene, camera )
composer.addPass( renderScene )

const effectVignette = new THREE.ShaderPass(THREE.VignetteShader )
effectVignette.uniforms[ "offset" ].value = 1;
effectVignette.uniforms[ "darkness" ].value = 2.3;
composer.addPass(effectVignette)

const hueSaturationShader = new THREE.ShaderPass(THREE.HueSaturationShader)
hueSaturationShader.uniforms['hue'] = -0.5
hueSaturationShader.uniforms['saturation'] = 1
this.composer.addPass(hueSaturationShader)
      
render();
function render(){
  requestAnimationFrame(render);
    
  renderer.autoClear = false;
  renderer.clear();
  
  composer.render();
  
  renderer.clearDepth();
  renderer.render(scene, camera);
}