zero-is-one/gist:5767767

## gistfile1.txt
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js canvas - geometry - head</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				font-family: Monospace;
				background-color: #f0f0f0;
				margin: 0px;
				overflow: hidden;
			}
		</style>
	</head>
	<body>

		<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r58/three.min.js"></script>


		<script>

		//http://stemkoski.github.io/Three.js/Textures.html
		//https://github.com/mrdoob/three.js/issues/929

			var container;

			var camera, scene, renderer;

			var head, plane;

			var targetRotation = 0;
			var targetRotationOnMouseDown = 0;

			var mouseX = 0;
			var mouseXOnMouseDown = 0;

			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;

			init();
			animate();

			function init() {

				container = document.createElement( 'div' );
				document.body.appendChild( container );


				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 700 );
				camera.position.y = 150;
				camera.position.z = 500;

				scene = new THREE.Scene();

				// head

				head = new THREE.Mesh( new THREE.CubeGeometry( 100, 100, 100, 8,8,8 ), new THREE.MeshBasicMaterial( { color: 0xffffff, vertexColors: THREE.FaceColors } ) );
				for ( var i = 0; i < head.geometry.faces.length; i ++ ) {
				    head.geometry.faces[ i ].color.setHex( Math.random() * 0xffffff );
				}

				head.position.y = 225;
				scene.add( head );

				torso = new THREE.Mesh( new THREE.CubeGeometry( 100, 150, 50, 8,12,4 ), new THREE.MeshBasicMaterial( { color: 0xffffff, vertexColors: THREE.FaceColors } ) );
				for ( var i = 0; i < torso.geometry.faces.length; i ++ ) {
				    torso.geometry.faces[ i ].color.setHex( Math.random() * 0x0000ff );
				}

				torso.position.y = 100;
				scene.add( torso );

				// Plane
				var geometry = new THREE.PlaneGeometry( 100, 100 );
				geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );
				plane = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0xe0e0e0 } ) );
				scene.add( plane );

				renderer = new THREE.CanvasRenderer();
				renderer.setSize( window.innerWidth, window.innerHeight );

				container.appendChild( renderer.domElement );


				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
				window.addEventListener( 'resize', onWindowResize, false );

			}

			function onWindowResize() {

				windowHalfX = window.innerWidth / 2;
				windowHalfY = window.innerHeight / 2;

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			//

			function onDocumentMouseDown( event ) {

				event.preventDefault();

				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
				document.addEventListener( 'mouseout', onDocumentMouseOut, false );

				mouseXOnMouseDown = event.clientX - windowHalfX;
				targetRotationOnMouseDown = targetRotation;

			}

			function onDocumentMouseMove( event ) {

				mouseX = event.clientX - windowHalfX;

				targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;

			}

			function onDocumentMouseUp( event ) {

				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );

			}

			function onDocumentMouseOut( event ) {

				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );

			}

			function onDocumentTouchStart( event ) {

				if ( event.touches.length === 1 ) {

					event.preventDefault();

					mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
					targetRotationOnMouseDown = targetRotation;

				}

			}

			function onDocumentTouchMove( event ) {

				if ( event.touches.length === 1 ) {

					event.preventDefault();

					mouseX = event.touches[ 0 ].pageX - windowHalfX;
					targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;

				}

			}

			//

			function animate() {

				requestAnimationFrame( animate );

				render();


			}

			function render() {

				plane.rotation.y = head.rotation.y = torso.rotation.y += ( targetRotation - head.rotation.y ) * 0.05;
				renderer.render( scene, camera );

			}

		</script>

	</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>three.js canvas - geometry - head</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<style>
	body {
	font-family: Monospace;
	background-color: #f0f0f0;
	margin: 0px;
	overflow: hidden;
	}
	</style>
	</head>
	<body>

	<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r58/three.min.js"></script>


	<script>

	//http://stemkoski.github.io/Three.js/Textures.html
	//https://github.com/mrdoob/three.js/issues/929

	var container;

	var camera, scene, renderer;

	var head, plane;

	var targetRotation = 0;
	var targetRotationOnMouseDown = 0;

	var mouseX = 0;
	var mouseXOnMouseDown = 0;

	var windowHalfX = window.innerWidth / 2;
	var windowHalfY = window.innerHeight / 2;

	init();
	animate();

	function init() {

	container = document.createElement( 'div' );
	document.body.appendChild( container );


	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 700 );
	camera.position.y = 150;
	camera.position.z = 500;

	scene = new THREE.Scene();

	// head

	head = new THREE.Mesh( new THREE.CubeGeometry( 100, 100, 100, 8,8,8 ), new THREE.MeshBasicMaterial( { color: 0xffffff, vertexColors: THREE.FaceColors } ) );
	for ( var i = 0; i < head.geometry.faces.length; i ++ ) {
	head.geometry.faces[ i ].color.setHex( Math.random() * 0xffffff );
	}

	head.position.y = 225;
	scene.add( head );

	torso = new THREE.Mesh( new THREE.CubeGeometry( 100, 150, 50, 8,12,4 ), new THREE.MeshBasicMaterial( { color: 0xffffff, vertexColors: THREE.FaceColors } ) );
	for ( var i = 0; i < torso.geometry.faces.length; i ++ ) {
	torso.geometry.faces[ i ].color.setHex( Math.random() * 0x0000ff );
	}

	torso.position.y = 100;
	scene.add( torso );

	// Plane
	var geometry = new THREE.PlaneGeometry( 100, 100 );
	geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );
	plane = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0xe0e0e0 } ) );
	scene.add( plane );

	renderer = new THREE.CanvasRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight );

	container.appendChild( renderer.domElement );


	document.addEventListener( 'mousedown', onDocumentMouseDown, false );
	document.addEventListener( 'touchstart', onDocumentTouchStart, false );
	document.addEventListener( 'touchmove', onDocumentTouchMove, false );
	window.addEventListener( 'resize', onWindowResize, false );

	}

	function onWindowResize() {

	windowHalfX = window.innerWidth / 2;
	windowHalfY = window.innerHeight / 2;

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

	renderer.setSize( window.innerWidth, window.innerHeight );

	}

	//

	function onDocumentMouseDown( event ) {

	event.preventDefault();

	document.addEventListener( 'mousemove', onDocumentMouseMove, false );
	document.addEventListener( 'mouseup', onDocumentMouseUp, false );
	document.addEventListener( 'mouseout', onDocumentMouseOut, false );

	mouseXOnMouseDown = event.clientX - windowHalfX;
	targetRotationOnMouseDown = targetRotation;

	}

	function onDocumentMouseMove( event ) {

	mouseX = event.clientX - windowHalfX;

	targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;

	}

	function onDocumentMouseUp( event ) {

	document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
	document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
	document.removeEventListener( 'mouseout', onDocumentMouseOut, false );

	}

	function onDocumentMouseOut( event ) {

	document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
	document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
	document.removeEventListener( 'mouseout', onDocumentMouseOut, false );

	}

	function onDocumentTouchStart( event ) {

	if ( event.touches.length === 1 ) {

	event.preventDefault();

	mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
	targetRotationOnMouseDown = targetRotation;

	}

	}

	function onDocumentTouchMove( event ) {

	if ( event.touches.length === 1 ) {

	event.preventDefault();

	mouseX = event.touches[ 0 ].pageX - windowHalfX;
	targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;

	}

	}

	//

	function animate() {

	requestAnimationFrame( animate );

	render();


	}

	function render() {

	plane.rotation.y = head.rotation.y = torso.rotation.y += ( targetRotation - head.rotation.y ) * 0.05;
	renderer.render( scene, camera );

	}

	</script>

	</body>
	</html>