Three.js base

A base/starter fiddle for Three.js

by alexvestin

HTML

<script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/0949e59f/examples/js/postprocessing/EffectComposer.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/0949e59f/examples/js/shaders/CopyShader.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/0949e59f/examples/js/postprocessing/ShaderPass.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/0949e59f/examples/js/shaders/SMAAShader.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/0949e59f/examples/js/postprocessing/SMAAPass.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/0949e59f/examples/js/postprocessing/SSAARenderPass.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/0949e59f/examples/js/shaders/SepiaShader.js"></script>

CSS

body {
    padding: 0;
    margin: 0;
}
canvas {
  display: block;
}

JavaScript

var camera, scene, renderer, mesh, material, ctx, texture, canvas, dimensions;

var effectComposer, buffer, mainCamera, mainScene, mainMesh;
var spriteCanvas, spriteCtx
init();
animate();

function init() {
	  spriteCanvas = document.createElement("canvas")
    canvas = document.createElement("canvas")
    
		canvas.width = 1240;
    canvas.height = 480;
    spriteCanvas.height = 1024
    spriteCanvas.width = 1024
    
    ctx = canvas.getContext("2d");
    spriteCtx = spriteCanvas.getContext("2d");
    texture = new THREE.CanvasTexture(spriteCanvas)
    
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(640, 480);
		dimensions = renderer.getSize()

		document.body.appendChild(renderer.domElement);

    camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
    scene = new THREE.Scene();
    
    
    buffer = new THREE.WebGLRenderTarget(spriteCanvas.width, spriteCanvas.height);
    effectComposer = new THREE.EffectComposer(renderer, buffer);
    var renderPass = new THREE.SSAARenderPass(scene, camera);
    var copyPass = new THREE.ShaderPass( THREE.CopyShader );
    var sepiaPass = new THREE.ShaderPass( THREE.SepiaShader );
    effectComposer.addPass(renderPass);
    effectComposer.addPass(copyPass);
    effectComposer.addPass(sepiaPass);
    buffer.texure = texture;
    
    mesh = new THREE.Mesh(
    	new THREE.PlaneBufferGeometry( 2, 2 ), 
      new THREE.MeshBasicMaterial({map: texture})
    );
    scene.add(mesh);
   
    mainCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
    mainScene = new THREE.Scene();
    mainMesh = new THREE.Mesh( 
         new THREE.PlaneBufferGeometry( 2, 2 ), 
         new THREE.MeshBasicMaterial({map: buffer.texture})
    );
    mainScene.add(mainMesh)
}

function animate() {
		const boxWidth = 200
    const boxHeight = 200
    ctx.save()
    ctx.fillStyle = "#FF0000"
    ctx.fillRect((canvas.width / 2) - boxWidth/2, (canvas.height / 2) -boxHeight/2, boxWidth, boxHeight);
    ctx.restore()
    
   ...