Boilerplate for three.js

constants

const TAU = Math.PI * 2,
      Width = window.innerWidth,
      Height = window.innerHeight,
      // (x, a1, a2, b1, b2)
      map = THREE.Math.mapLinear,
      // (x, y, t)
      lerp = THREE.Math.lerp,
      // (value, min, max)
      clamp = THREE.Math.clamp,
      // (x, min, max)
      // Returns the percentage (0-1) that x has moved between min and max,
      // with easing in to/out of min and max.
      smoothstep = THREE.Math.smoothstep, 
      degToRad = THREE.Math.degToRad,
      radToDeg = THREE.Math.radToDeg,
      // (low, high) Random integer from low to high interval.
      randInt = THREE.Math.randInt,
      // (low, high) Random float from low to high interval.
      randFloat = THREE.Math.randFloat,
      randFLoatSpread = THREE.Math.randFloatSpread

onWindowResize

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
}

platformRequestAnimationFrame

function platformRequestAnimationFrame() {
    return window.requestAnimationFrame ||
           window.mozRequestAnimationFrame ||
           window.webkitRequestAnimationFrame ||
           window.msRequestAnimationFrame
}

rendererConfig

function rendererConfig(clearColor=0x000000) {
    renderer = new THREE.WebGLRenderer({'antialias': true})
    renderer.setPixelRatio(window.devicePixelRatio)
    renderer.setSize(Width, Height)
    renderer.setClearColor(clearColor, 1.0)
    document.body.appendChild(renderer.domElement)
}

WebGL

/**
 * @author alteredq / http://alteredqualia.com/
 * @author mr.doob / http://mrdoob.com/
 */

THREE.WEBGL = {

	isWebGLAvailable: function () {

		try {

			var canvas = document.createElement( 'canvas' );
			return !! ( window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ) );

		} catch ( e ) {

			return false;

		}

	},

	isWebGL2Available: function () {

		try {

			var canvas = document.createElement( 'canvas' );
			return !! ( window.WebGL2RenderingContext && canvas.getContext( 'webgl2' ) );

		} catch ( e ) {

			return false;

		}

	},

	getWebGLErrorMessage: function () {

		return this.getErrorMessage( 1 );

	},

	getWebGL2ErrorMessage: function () {

		return this.getErrorMessage( 2 );

	},

	getErrorMessage: function ( version ) {

		var names = {
			1: 'WebGL',
			2: 'WebGL 2'
		};

		var contexts = {
			1: window.WebGLRenderingContext,
			2: window.WebGL2RenderingContext
		};

		var message = 'Your $0 does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">$1</a>';

		var element = document.createElement( 'div' );
		element.id = 'webglmessage';
		element.style.fontFamily = 'monospace';
		element.style.fontSize = '13px';
		element.style.fontWeight = 'normal';
		element.style.textAlign = 'center';
		element.style.background = '#fff';
		element.style.color = '#000';
		element.style.padding = '1.5em';
		element.style.width = '400px';
		element.style.margin = '5em auto 0';

		if ( contexts[ version ] ) {

			message = message.replace( '$0', 'graphics card' );

		} else {

			message = message.replace( '$0', 'browser' );

		}

		message = message.replace( '$1', names[ version ] );

		element.innerHTML = message;

		return element;

	}

};