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; }