threex
Version:
Game Extensions for three.js http://www.threejsgames.com/extensions/
88 lines (67 loc) • 3.83 kB
HTML
<!DOCTYPE html>
<script src="../../../vendor/three.js/build/three.min.js"></script>
<script src="../../../vendor/three.js/examples/js/postprocessing/EffectComposer.js"></script>
<script src="../../../vendor/three.js/examples/js/postprocessing/BloomPass.js"></script>
<script src="../../../vendor/three.js/examples/js/postprocessing/DotScreenPass.js"></script>
<script src="../../../vendor/three.js/examples/js/postprocessing/FilmPass.js"></script>
<script src="../../../vendor/three.js/examples/js/postprocessing/MaskPass.js"></script>
<script src="../../../vendor/three.js/examples/js/postprocessing/RenderPass.js"></script>
<script src="../../../vendor/three.js/examples/js/postprocessing/SavePass.js"></script>
<script src="../../../vendor/three.js/examples/js/postprocessing/ShaderPass.js"></script>
<script src="../../../vendor/three.js/examples/js/postprocessing/TexturePass.js"></script>
<script src="../../../vendor/three.js/examples/js/shaders/BleachBypassShader.js"></script>
<script src="../../../vendor/three.js/examples/js/shaders/BlendShader.js"></script>
<script src="../../../vendor/three.js/examples/js/shaders/CopyShader.js"></script>
<script src="../../../vendor/three.js/examples/js/shaders/ColorifyShader.js"></script>
<script src="../../../vendor/three.js/examples/js/shaders/ConvolutionShader.js"></script>
<script src="../../../vendor/three.js/examples/js/shaders/FilmShader.js"></script>
<script src="../../../vendor/three.js/examples/js/shaders/FXAAShader.js"></script>
<script src="../../../vendor/three.js/examples/js/shaders/HorizontalBlurShader.js"></script>
<script src="../../../vendor/three.js/examples/js/shaders/RGBShiftShader.js"></script>
<script src="../../../vendor/three.js/examples/js/shaders/DotScreenShader.js"></script>
<script src="../../../vendor/three.js/examples/js/shaders/SepiaShader.js"></script>
<script src="../../../vendor/three.js/examples/js/shaders/VerticalBlurShader.js"></script>
<script src="../../../vendor/three.js/examples/js/shaders/VignetteShader.js"></script>
<script src="../threex.effectcomposer.js"></script>
<body style='margin: 0px; background-color: #bbbbbb;overflow: hidden;'><script>
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 3;
var geometry = new THREE.CubeGeometry( 1, 1, 1);
var material = new THREE.MeshNormalMaterial();
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
var renderTarget= new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, {
minFilter : THREE.LinearFilter,
magFilter : THREE.LinearFilter,
format : THREE.RGBAFormat,
stencilBuffer : false
});
var composer = new THREE.EffectComposer(renderer, renderTarget );
var effect = new THREE.RenderPass( scene, camera )
composer.addPass( effect );
var effect = new THREE.ShaderPass( THREE.CopyShader );
composer.addPass( effect );
// // create the effect
// var effect = new THREE.ShaderPass( THREE.SepiaShader );
// effect.uniforms[ "amount" ].value = 0.9;
// composer.addPass( effect );
effect.renderToScreen = true;
// var effect = new THREE.ShaderPass( THREE.DotScreenShader );
// effect.uniforms[ 'scale' ].value = 4;
// composer.addPass( effect );
// var effect = new THREE.ShaderPass( THREE.RGBShiftShader );
// effect.uniforms[ 'amount' ].value = 0.0015;
// effect.renderToScreen = true;
// composer.addPass( effect );
requestAnimationFrame(function animate(now){
requestAnimationFrame( animate );
mesh.rotation.x += 0.005;
mesh.rotation.y += 0.01;
composer.render();
//renderer.render( scene, camera );
});
</script></body>