JSFiddle - React, Tailwind, and code Playground
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/postprocessing/TexturePass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/MaskPass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/ClearPass.js"></script>
<script src="https://threejs.org/examples/js/shaders/CopyShader.js"></script>
<script src="https://threejs.org/examples/js/shaders/FXAAShader.js"></script>
CSS
body {
background-color: #000;
margin: 0px;
overflow: hidden;
}
JavaScript
let camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
let scene = new THREE.Scene();
scene.add( new THREE.AmbientLight( 0xFFFFFF ) );
THREE.ImageUtils.crossOrigin = '';
let texture = THREE.ImageUtils.loadTexture( "https://threejs.org/examples/textures/crate.gif" );
let material = new THREE.MeshBasicMaterial( { map:texture } );
let geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
let cube = new THREE.Mesh( geometry, material );
cube.position.z = -500;
scene.add( cube );
renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setClearColor( 0xe0e0e0 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.autoClear = false;
document.body.appendChild( renderer.domElement );
var parameters = {
minFilter: THREE.LinearFilter,
magFilter: THREE.LinearFilter,
format: THREE.RGBFormat,
stencilBuffer: true
};
var renderTarget = new THREE.WebGLRenderTarget( 4, 4 /*window.innerWidth, window.innerHeight*/, parameters );
let composer = new THREE.EffectComposer( renderer, renderTarget );
var clearPass = new THREE.ClearPass();
composer.addPass( clearPass );
var renderPass = new THREE.RenderPass( scene, camera );
composer.addPass( renderPass );
var outputPass = new THREE.ShaderPass( THREE.CopyShader );
outputPass.renderToScreen = true;
composer.addPass( outputPass );
function onResize( e ) {
renderer.setSize( window.innerWidth, window.innerHeight );
composer.setSize( window.innerWidth, window.innerHeight );
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
}
function render() {
cube.rotation.x += 0.1;
cube.rotation.z += 0.2;
renderer.clear();
composer.render();
}
window.onresize = onResize;
onResize();
window.setInterval( render, 300 )