three.js camera rotation

by ostapische

HTML

<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://rawgithub.com/RobertWHurst/KeyboardJS/master/keyboard.js"></script>

CSS

html, body, canvas {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border-spacing: 0;
	overflow: hidden;
}

JavaScript

function degInRad(deg) {
    return deg * Math.PI / 180;
}
/////////////////////////////////
function render() {
    requestAnimationFrame(render);
    if (leftPressed) {
	    neck.rotation.y += degInRad(1);
	} else if (rightPressed) {
	    neck.rotation.y -= degInRad(1);
	}
	if (upPressed) {
        camera.rotation.x += degInRad(1);
		//cameraHolder.rotation.x = Math.max( - PI_2, Math.min( PI_2, degInRad(1).rotation.x ) );
	} else if (downPressed) {
        camera.rotation.x -= degInRad(1);
		//cameraHolder.rotation.x = Math.max( - PI_2, Math.min( PI_2, degInRad(1).rotation.x ) );
	}
    renderer.render(scene, camera);
}
/////////////////////////////////
var scene, camera, renderer, grass, neck;
var leftPressed = false;
var rightPressed = false;
var upPressed = false;
var downPressed = false;
/////////////////////////////////
window.onload = function() {
    scene = new THREE.Scene();
	camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
    cameraHolder = new THREE.Object3D();
	cameraHolder.add( camera );
	
    renderer = new THREE.WebGLRenderer();
	renderer.rendererSize = {width: window.innerWidth, height: window.innerHeight, quality: 100, maxQuality: 400, minQuality: 20};
    renderer.setSize( renderer.rendererSize.width, renderer.rendererSize.height );
	document.body.appendChild( renderer.domElement );
    
    var texture, material, geometry, element;
    
    /*THREE.ImageUtils.crossOrigin = undefined;
    texture = THREE.ImageUtils.loadTexture( "http://s22.postimg.org/cmp4guiil/grass.jpg" );
	texture.wrapS = THREE.RepeatWrapping;
	texture.wrapT = THREE.RepeatWrapping;
	texture.repeat.set( 24, 24 );
	material = new THREE.MeshBasicMaterial( { map: texture } );*/
    material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
	material.side = THREE.DoubleSide;
	geometry = new THREE.PlaneGeometry(24, 24);
	grass = new THREE.Mesh( geometry, material );
	grass.name = "grass";
	scene.add( grass );
    
    neck = new...