JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://dta.greweb.fr/assets/javascripts/threejs/ShaderExtras.js"></script>
<script src="http://dta.greweb.fr/assets/javascripts/threejs/EffectComposer.js"></script>
<script src="http://dta.greweb.fr/assets/javascripts/threejs/RenderPass.js"></script>
<script src="http://dta.greweb.fr/assets/javascripts/threejs/TexturePass.js"></script>
<script src="http://dta.greweb.fr/assets/javascripts/threejs/ShaderPass.js"></script>
<script src="http://dta.greweb.fr/assets/javascripts/threejs/MaskPass.js"></script>
<div id="c"></div>
JavaScript
var container = document.getElementById('c');
var startTime=+new Date();
var scene, camera, renderer, composer, composerScene, effectRadioNoise, effectPerturbation;
var WIDTH=400, HEIGHT=300;
var damages = 0;
var Shaders;
function setup () {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, WIDTH/HEIGHT, 1, 10000);
camera.position.z = 150;
camera.rotation.x = Math.PI/2;
camera.rotation.y = 0;
camera.rotation.z = 0;
/// Scene code
scene.add(camera);
scene.add(createTank(new THREE.Vector3(1000, 1000, 0)));
scene.add(createTank(new THREE.Vector3(1000, -1000, 0)));
scene.add(createTank(new THREE.Vector3(-1000, 1000, 0)));
scene.add(createTank(new THREE.Vector3(-1000, -1000, 0)));
///
renderer = new THREE.WebGLRenderer();
renderer.setSize(WIDTH, HEIGHT);
container.appendChild(renderer.domElement);
// Add effects
var rtParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: true };
var renderModel = new THREE.RenderPass(scene, camera);
renderModel.clear = false;
composerScene = new THREE.EffectComposer(renderer, new THREE.WebGLRenderTarget(WIDTH, HEIGHT, rtParameters));
composerScene.addPass(renderModel);
var renderScene = new THREE.TexturePass(composerScene.renderTarget2);
renderScene.uniforms["tDiffuse"].texture = composerScene.renderTarget2;
// create your effects
effectRadioNoise = new THREE.ShaderPass( Shaders[ "radionoise" ] );
effectPerturbation = new THREE.ShaderPass( Shaders[ "perturbation" ] );
effectPerturbation.renderToScreen = true; // set to the last pass
updateEffects();
// Add effects to the composer pass
composer = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget(WIDTH, HEIGHT, rtParameters) );
composer.addPass( renderScene );
composer.addPass( effectRadioNoise );
composer.addPass( effectPerturbation );
}
// Update your effects
function updateEffects () {
var now = +new...