threejstest/script.js

var cameraDelta = {
	x: 0,
	y: 0,
	z: 0
}

var keyTable = {
	"Up": {
		axis: "z",
		modifier: -2
	},
	"Down": {
		axis: "z",
		modifier: 2
	},
	"Left": {
		axis: "x",
		modifier: -2
	},
	"Right": {
		axis: "x",
		modifier: 2
	},
	"PageUp": {
		axis: "y",
		modifier: 2
	},
	"PageDown": {
		axis: "y",
		modifier: -2
	},
};

window.onload = ready;

function ready() {
	doAnimation = true;
	init();
	registerEventListener();
	animate();
}

function init() {
	resX = window.innerWidth - 4;
	resY = window.innerHeight - 4;

	camera = new THREE.PerspectiveCamera(75, resX / resY, 0.1, 20000);
	camera.position.z = 400;

	scene = new THREE.Scene();

	cube = new THREE.Mesh(new THREE.CubeGeometry(200, 200, 200), new THREE.MeshLambertMaterial({
		color: 0xCCCC00,
		wireframe: true
	}));
	scene.add(cube);

	cube2 = new THREE.Mesh(new THREE.CubeGeometry(100, 100, 100), new THREE.MeshPhongMaterial({
		color: 0x00AAFF,
		wireframe: false
	}));
	scene.add(cube2);
	
	spotlight = new THREE.SpotLight(0xCCFFCC);
	spotlight.position.set(100, 150, 200);
	spotlight.castShadow = true;
	spotlight.target = new THREE.Object3D(0,0,200);
	scene.add(spotlight);
	
	xaxis = new THREE.Mesh(new THREE.CubeGeometry(500, 1, 1), new THREE.MeshBasicMaterial({
		color: 0xFF0000,
		wireframe: false
	}));
	scene.add(xaxis);

	yaxis = new THREE.Mesh(new THREE.CubeGeometry(1, 500, 1), new THREE.MeshBasicMaterial({
		color: 0x00FF00,
		wireframe: false
	}));
	scene.add(yaxis);

	zaxis = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 500), new THREE.MeshBasicMaterial({
		color: 0x0000FF,
		wireframe: false
	}));
	scene.add(zaxis);
	
	//renderer = new THREE.CanvasRenderer();
	renderer = new THREE.WebGLRenderer();
	renderer.setSize(resX, resY);

	document.body.appendChild(renderer.domElement);
}

function animate() {
	if(doAnimation == false) {
		// request a call for animate before next browser repaint
		window.requestAnimationFrame(animate);
		return;
	}

	camera.position.x += cameraDelta.x;
	camera.position.y += cameraDelta.y;
	camera.position.z += cameraDelta.z;
	//camera.lookAt(new THREE.Vector3(0,0,0));
	
	cube.rotation.x += 0.01;
	cube.rotation.y += 0.01;

	cube2.rotation.x -= 0.01;
	cube2.rotation.y -= 0.01;
	
	renderer.render(scene, camera);
	
	// request a call for animate before next browser repaint
	window.requestAnimationFrame(animate);
}

function registerEventListener() {
	//enable receiving keyboard events
	renderer.domElement.tabIndex = 1;

	renderer.domElement.onmousedown = processEvent;
	renderer.domElement.onmouseup = processEvent;
	renderer.domElement.onmousemove = processEvent;
	renderer.domElement.onmousewheel = processEvent;
	renderer.domElement.onkeydown = processEvent;
	renderer.domElement.onkeyup = processEvent;
}

function processEvent(event) {
	if(event instanceof MouseEvent) {
		console.log(["Maus", event.type, event]);
	} else if(event instanceof KeyboardEvent) {
		//log and ignore undefined events
		if(keyTable[event.keyIdentifier] == undefined) {
			console.log(["Tastatur", event.keyIdentifier, event.type, event]);
			return;
		}
		
		//apply movement to camera
		if(event.type == "keydown") {
			//apply delta on keydown
			cameraDelta[keyTable[event.keyIdentifier].axis] = keyTable[event.keyIdentifier].modifier;
		} else if(event.type == "keyup") {
			//remove delta on keyup
			cameraDelta[keyTable[event.keyIdentifier].axis] = 0;
		}
	}
	return;
}