JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/shaders/LuminosityShader.js"></script>
JavaScript
var camera, cameraFX, scene, sceneFX, renderer, renderTarget;
init();
animate();
function init() {
//
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 0, 10, 25 );
camera.lookAt( scene.position );
//
cameraFX = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
sceneFX = new THREE.Scene();
var shader = THREE.LuminosityShader;
var materialFX = new THREE.ShaderMaterial( {
uniforms: THREE.UniformsUtils.clone( shader.uniforms ),
vertexShader: shader.vertexShader,
fragmentShader: shader.fragmentShader
} );
var quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), materialFX );
quad.frustumCulled = false;
sceneFX.add( quad );
//
var geometry = new THREE.TorusKnotBufferGeometry( 8, 3, 256, 32, 2, 3 );
var material = new THREE.MeshPhongMaterial( { color: 0xffff00 } );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
//
var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
scene.add( ambientLight );
var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
camera.add( pointLight );
scene.add( camera );
//
renderer = new THREE.WebGLRenderer();
renderer.autoClear = false;
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//
renderTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, {
depthBuffer: false,
stencilBuffer: false
} );
materialFX.uniforms.tDiffuse.value = renderTarget.texture;
}
function animate() {
requestAnimationFrame( animate );
renderer.clear();
renderer.render( scene, camera, renderTarget );
renderer.render( sceneFX, cameraFX );
}