Liam Chapman LiamChapman

raf.js

A simple script with a few niceties that allows for multiple requestAnimationFrame calls, and FPS pinning.

How it works

The script polyfills rAF if required, then overloads requestAnimationFrame and cancelAnimationFrame with a process that allows multiple frames to be queued up for rAF to run.

This is useful if there are multiple animations running on the page, you want all the callbacks to happen at once, and not on multiple rAF calls. This script is meant as a drop-in solution to that problem.

	var l = {
	colour: 0xffffff,
	intensity: 1,
	distance: 0,
	angle: 10 * (Math.PI/180),
	penumbra: 0.8,
	decay: 1
	};

	var light = new THREE.SpotLight( l.colour, l.intensity, l.distance, l.angle, l.penumbra, l.decay);

	var l = {
	colour: 0xffffff,
	intensity: 1,
	distance: 0,
	angle: 10 * RAD,
	penumbra: 0.8,
	decay: 1
	};

	var light = new THREE.SpotLight( l.colour, l.intensity, l.distance, l.angle, l.penumbra, l.decay);

	var m = { x: 0, y: 0 };
	window.addEventListener('mousemove', function (e) {
	m.x = e.clientX;
	m.y = e.clientY;
	camera.position.x = (((m.x / window.innerWidth) * 2) - 1) * -1;
	camera.position.y = ((m.y / window.innerHeight) * 2) - 1;
	});

	var tapedTwice = false;
	function tapHandler (e) {
	if(!tapedTwice) {
	tapedTwice = true;
	setTimeout( function() { tapedTwice = false; }, 300 );
	return false;
	}
	e.preventDefault();
	// DO FUNCTIONALITY HERE!
	}

	var router = function (routes) {
	for (var i in routes) {
	if (i == window.location.pathname) {
	window[routes[i]]();
	}
	}
	};

	/**
	* Example

	var stop = false;
	var frameCount = 0;
	var fps, fpsInterval, startTime, now, then, elapsed;
	function startAnimating(fps) {
	fpsInterval = 1000 / fps;
	then = Date.now();
	startTime = then;
	render();
	}

	// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
	// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

	// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel

	// MIT license

	(function() {
	var lastTime = 0;
	var vendors = ['ms', 'moz', 'webkit', 'o'];

	function range (start, stop, step){
	if(!stop){stop=start;start=0;}
	return Array.from(new Array(parseInt((stop-start)/step)), (x,i) => start+ i*step)
	}