Hi, i'm trying to do a keyboard control in three.js. How can i fix this error?

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

camera.position.z = 5;

var renderer = new THREE.WebGLRenderer();

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

renderer.setClearColor(0x404040, 1);

document.body.appendChild(renderer.domElement);

var controls = new THREE.TrackballControls(camera);

var light = new THREE.AmbientLight(0x00FF00);

scene.add(light);

renderer.render(scene, camera);

var light = new THREE.DirectionalLight();

light.position.set(1,1,1);

scene.add(light);

var clock = new THREE.Clock();

var speedx = 0.1;

var speedy = 0.4;

var delta = 0;

var g = -0.1;

render();

function render(){

delta = clock.getDelta();

speedy += g*delta;

renderer.render(scene, camera);

requestAnimationFrame(render);

controls.update();

}

var geometry1 = new THREE.CircleGeometry( 5, 32 );

var material = new THREE.MeshBasicMaterial( { color: 0x008B8B } );

var circle = new THREE.Mesh( geometry1, material );

scene.add( circle );

circle.position.y = -1;

circle.rotation.x = -Math.PI / 2;

function createFrogEyes(){

var geometry = new THREE.Geometry();

geometry.vertices.push(new THREE.Vector3(0,-0.08,0));

geometry.vertices.push(new THREE.Vector3(0.08,0,0));

geometry.vertices.push(new THREE.Vector3(0,0.08,0));

geometry.vertices.push(new THREE.Vector3(-0.08,0,0));

geometry.vertices.push(new THREE.Vector3(0,0,0.08));

geometry.vertices.push(new THREE.Vector3(0,0,-0.08));

geometry.faces.push(new THREE.Face3(3,2,4));

geometry.faces.push(new THREE.Face3(2,3,5));

geometry.faces.push(new THREE.Face3(1,2,5));

geometry.faces.push(new THREE.Face3(2,1,4));

geometry.faces.push(new THREE.Face3(4,1,0));

geometry.faces.push(new THREE.Face3(0,1,5));

geometry.faces.push(new THREE.Face3(0,5,3));

geometry.faces.push(new THREE.Face3(4,0,3));

geometry.computeFaceNormals();

var material = new THREE.MeshLambertMaterial({color: 0x000000, wireframe: false});

var object = new THREE.Mesh(geometry, material);

return object;

}

function createFrogAxes(length){

var geometry = new THREE.Geometry();

geometry.vertices.push(new THREE.Vector3(0, 0, 0));

geometry.vertices.push(new THREE.Vector3(length, 0, 0));

geometry.vertices.push(new THREE.Vector3(0, 0, 0));

geometry.vertices.push(new THREE.Vector3(0, length, 0));

geometry.vertices.push(new THREE.Vector3(0, 0, 0));

geometry.vertices.push(new THREE.Vector3(0, 0, length));

geometry.colors.push(new THREE.Color(0xff0000));

geometry.colors.push(new THREE.Color(0xff0000));

geometry.colors.push(new THREE.Color(0x00ff00));

geometry.colors.push(new THREE.Color(0x00ff00));

geometry.colors.push(new THREE.Color(0x0000ff));

geometry.colors.push(new THREE.Color(0x0000ff));

var material = new THREE.LineBasicMaterial();

material.vertexColors = THREE.VertexColors;

var axes = new THREE.LineSegments(geometry, material);

axes.name = "axes";

return axes;

}

function shapeOctahedron(end, side, material)

{

var geometry = new THREE.Geometry();

geometry.vertices.push(new THREE.Vector3(0,-0.25,0));//0

geometry.vertices.push(new THREE.Vector3(0.5,0,0));//1

geometry.vertices.push(new THREE.Vector3(0,0.25,0));//2

geometry.vertices.push(new THREE.Vector3(-0.5,0,0));//3

geometry.vertices.push(new THREE.Vector3(0,0,0.25));//4

geometry.vertices.push(new THREE.Vector3(0,0,-0.25));//5

geometry.faces.push(new THREE.Face3(0,1,4));

geometry.faces.push(new THREE.Face3(1,2,4));

geometry.faces.push(new THREE.Face3(2,3,4));

geometry.faces.push(new THREE.Face3(3,0,4));

geometry.faces.push(new THREE.Face3(0,5,1));

geometry.faces.push(new THREE.Face3(1,5,2));

geometry.faces.push(new THREE.Face3(2,5,3));

geometry.faces.push(new THREE.Face3(3,5,0));

var material = new THREE.MeshLambertMaterial({color: 0xff9966, wireframe: false});

var shapeOctahedron = new THREE.Mesh(geometry, material);

shapeOctahedron.name = "shapeOctahedron";

return shapeOctahedron;

}

function shapeDecahedron(sizeX, sizeY, sizeZ, material)

{

var geometry = new THREE.Geometry();

geometry.vertices.push(new THREE.Vector3(-1,0,0)); //0

geometry.vertices.push(new THREE.Vector3(-0.31,0,-0.95));//1

geometry.vertices.push(new THREE.Vector3(0.81,0,-0.59));//2

geometry.vertices.push(new THREE.Vector3(0.81,0,0.59));//3

geometry.vertices.push(new THREE.Vector3(-0.31,0,0.95));//4

geometry.vertices.push(new THREE.Vector3( 0,0.5,0));//5

geometry.vertices.push(new THREE.Vector3(0,-0.5,0));//6

geometry.faces.push(new THREE.Face3(0,6,1));

geometry.faces.push(new THREE.Face3(1,6,2));

geometry.faces.push(new THREE.Face3(2,6,3));

geometry.faces.push(new THREE.Face3(3,6,4));

geometry.faces.push(new THREE.Face3(4,6,0));

geometry.faces.push(new THREE.Face3(0,1,5));

geometry.faces.push(new THREE.Face3(1,2,5));

geometry.faces.push(new THREE.Face3(2,3,5));

geometry.faces.push(new THREE.Face3(3,4,5));

geometry.faces.push(new THREE.Face3(4,0,5));

var material = new THREE.MeshLambertMaterial({color: 0xffff00,wireframe: false});

var shapeDecahedron = new THREE.Mesh(geometry, material);

shapeDecahedron.name = "shapeDecahedron";

return shapeDecahedron;

}

function foot()

{

var geometry = new THREE.Geometry();

geometry.vertices.push(new THREE.Vector3(0,0,0));//0

geometry.vertices.push(new THREE.Vector3(0.35,0,0.1775));//1

geometry.vertices.push(new THREE.Vector3(0.35,0,-0.1775));//2

geometry.faces.push(new THREE.Face3(1,2,0));

var material = new THREE.MeshLambertMaterial({color: 0xff9966, wireframe: false});

var foot= new THREE.Mesh(geometry, material);

foot.name = "foot";

return foot;

}

var Torso = shapeDecahedron();

var axes1 = createFrogAxes(1);

scene.add(Torso);

Torso.add(axes1);

var Head = shapeOctahedron();

Head.position.set(1.31,0,0);

scene.add(Head);

Torso.add(Head);

var REye = createFrogEyes();

REye.position.set(0.2,0,0.23);

scene.add(REye);

Head.add(REye);

var LEye = createFrogEyes();

LEye.position.set(0.2,0,-0.23);

scene.add(LEye);

Head.add(LEye);

var FRHip = new THREE.Object3D();

FRHip.name = "FRHip";

FRHip.position.set(0.81, 0, 0.59);

var axes2 = createFrogAxes(1);

axes2.position.set(0,0,0);

axes2.rotation.z = Math.PI/2;

FRHip.add(axes2);

scene.add(FRHip);

Torso.add(FRHip);

var FRUpLeg = shapeOctahedron();

var axes3 = createFrogAxes(0.5);

axes3.rotation.z = Math.PI/2;

FRUpLeg.add(axes3);

FRUpLeg.position.x = 0.5;

scene.add(FRUpLeg);

FRHip.add(FRUpLeg);

FRHip.rotation.z = -Math.PI/2;

var FRKnee = new THREE.Object3D();

FRKnee.name = "FRKnee";

FRKnee.position.set(0.5,0,0);

var axes4 = createFrogAxes(0.5);

FRKnee.add(axes4);

scene.add(FRKnee);

FRUpLeg.add(FRKnee);

var FRLowLeg = shapeOctahedron();

FRLowLeg.position.x = 0.5;

var axes5 = createFrogAxes(0.5);

FRLowLeg.add(axes5);

scene.add(FRLowLeg);

FRKnee.add(FRLowLeg);

FRKnee.rotation.z = Math.PI/2;

var FRAnkle = new THREE.Object3D();

FRAnkle.name = "FRAnkle";

FRAnkle.position.set = (1,0,0);

var axes6 = createFrogAxes(0.5);

axes6.position.set(0.5,0,0);

FRAnkle.add(axes6);

scene.add(FRAnkle);

FRLowLeg.add(FRAnkle);

var FRFoot = foot();

scene.add(FRFoot);

FRAnkle.add(FRFoot);

var FLHip = new THREE.Object3D();

FLHip.name = "FLHip";

FLHip.position.set(0.81, 0, -0.59);

var axes7 = createFrogAxes(1);

axes7.position.set(0,0,0);

axes7.rotation.z = Math.PI/2;

FLHip.add(axes7);

scene.add(FLHip);

Torso.add(FLHip);

var FLUpLeg = shapeOctahedron();

var axes8 = createFrogAxes(0.5);

axes8.rotation.z = Math.PI/2;

FLUpLeg.add(axes8);

FLUpLeg.position.x = 0.5;

FLUpLeg.position.Z = 0.5;

scene.add(FLUpLeg);

FLHip.add(FLUpLeg);

FLHip.rotation.z = -Math.PI/2;

var FLKnee = new THREE.Object3D();

FLKnee.name = "FLKnee";

FLKnee.position.set(0.5,0,0);

var axes9 = createFrogAxes(0.5);

FLKnee.add(axes9);

scene.add(FLKnee);

FLUpLeg.add(FLKnee);

var FLLowLeg = shapeOctahedron();

FLLowLeg.position.x = 0.5;

var axes10 = createFrogAxes(0.5);

FLLowLeg.add(axes10);

scene.add(FLLowLeg);

FLKnee.add(FLLowLeg);

FLKnee.rotation.z = Math.PI/2;

var FLAnkle = new THREE.Object3D();

FLAnkle.name = "FLAnkle";

FLAnkle.position.set = (1,0,0);

var axes11 = createFrogAxes(0.5);

axes11.position.set(0.5,0,0);

FLAnkle.add(axes11);

scene.add(FLAnkle);

FLLowLeg.add(FLAnkle);

var FLFoot = foot();

scene.add(FLFoot);

FLAnkle.add(FLFoot);

var RRHip = new THREE.Object3D();

RRHip.name = "RRHip";

RRHip.position.set(-1,0,0);

var axes12 = createFrogAxes(0.5);

axes12.position.set(0,0,0);

axes12.rotation.y = -Math.PI/2;

RRHip.add(axes12);

scene.add(RRHip);

Torso.add(RRHip);

var RRUpLeg = shapeOctahedron();

var axes13 = createFrogAxes(0.5);

RRUpLeg.add(axes13);

RRUpLeg.position.set(-0.5,0,0);

axes13.rotation.y = -Math.PI/2;

RRUpLeg.add(axes13);

RRHip.add(RRUpLeg);

RRHip.rotation.y = Math.PI/2;

var RRKnee = new THREE.Object3D();

RRKnee.name = "RRKnee";

RRKnee.position.set(-0.5,0,0);

var axes14 = createFrogAxes(0.5);

axes14.rotation.z = -Math.PI/1.42;

RRKnee.add(axes14);

var RRLowLeg = shapeOctahedron();

RRLowLeg.position.set(-0.5,0,0)

RRKnee.add(RRLowLeg);

RRKnee.rotation.z = Math.PI/1.42;

var axes15 = createFrogAxes(0.5);

axes15.position.set(-0.5,0,0)

axes15.rotation.z = -Math.PI/1.42;

RRLowLeg.add(axes15);

var RRAnkle = new THREE.Object3D();

RRAnkle.name = "RRAnkle";

RRAnkle.position.set(-0.5,0,0);

var axes16 = createFrogAxes(0.5);

RRAnkle.add(axes16);

var RRFoot = shapeOctahedron();

RRFoot.position.set(-0.5,0,0);

RRAnkle.add(RRFoot);

RRAnkle.rotation.z = -Math.PI/1.42;

var axes17 = createFrogAxes(0.5);

RRFoot.add(axes17);

var RRTmt = new THREE.Object3D();

RRTmt.name = "RRTmt";

RRTmt.position.set(-0.5,0,0);

var axes18 = createFrogAxes(0.5);

RRTmt.rotation.y = -Math.PI/2;

RRTmt.add(axes18);

var RRToe = foot();

RRToe.position.set(0,0,0);

RRUpLeg.add(RRKnee);

RRLowLeg.add(RRAnkle);

RRAnkle.add(RRFoot);

RRFoot.add(RRTmt);

RRTmt.add(RRToe);

var RLHip = new THREE.Object3D();

RLHip.name = "RLHip";

RLHip.position.set(-1,0,0);

var axes12 = createFrogAxes(0.5);

axes12.position.set(0,0,0);

axes12.rotation.y = -Math.PI/2;

RLHip.add(axes12);

scene.add(RLHip);

Torso.add(RLHip);

var RLUpLeg = shapeOctahedron();

var axes13 = createFrogAxes(0.5);

RLUpLeg.add(axes13);

RLUpLeg.position.set(-0.5,0,0);

axes13.rotation.y = -Math.PI/2;

RLUpLeg.add(axes13);

RLHip.add(RLUpLeg);

RLHip.rotation.y = -Math.PI/2;

var RLKnee = new THREE.Object3D();

RLKnee.name = "RLKnee";

RLKnee.position.set(-0.5,0,0);

var axes14 = createFrogAxes(0.5);

axes14.rotation.z = -Math.PI/1.42;

RLKnee.add(axes14);

var RLLowLeg = shapeOctahedron();

RLLowLeg.position.set(-0.5,0,0)

RLKnee.add(RLLowLeg);

RLKnee.rotation.z = Math.PI/1.42;

var axes15 = createFrogAxes(0.5);

axes15.position.set(-0.5,0,0)

axes15.rotation.z = -Math.PI/1.42;

RLLowLeg.add(axes15);

var RLAnkle = new THREE.Object3D();

RLAnkle.name = "RLAnkle";

RLAnkle.position.set(-0.5,0,0);

var axes16 = createFrogAxes(0.5);

RLAnkle.add(axes16);

var RLFoot = shapeOctahedron();

RLFoot.position.set(-0.5,0,0);

RLAnkle.add(RLFoot);

RLAnkle.rotation.z = -Math.PI/1.42;

var axes17 = createFrogAxes(0.5);

RLFoot.add(axes17);

var RLTmt = new THREE.Object3D();

RLTmt.name = "RLTmt";

RLTmt.position.set(-0.5,0,0);

var axes18 = createFrogAxes(0.5);

RLTmt.rotation.y = -Math.PI/2;

RLTmt.add(axes18);

var RLToe = foot();

RLToe.position.set(0,0,0);

RLUpLeg.add(RLKnee);

RLLowLeg.add(RLAnkle);

RLAnkle.add(RLFoot);

RLFoot.add(RLTmt);

RLTmt.add(RLToe);

var event = event || window.event;

document.addEventListener('keydown', handleKeyDown, true);

function handleKeyDown(e)

{

var e = e || rotation.event;

var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;

if ('72, 75, 65, 84, 37, 38, 39, 40'.indexOf(keyCode) === -1) {

return;

} else {

switch (e.keyCode) {

case 72 && 37:

FRHip.rotation.z += 0.05;

break;

case 75:

break;

case 84:

break;

}

}

}

Console What' s New Itop Filter Default levels ? Group similar 1 hidden THREE.WebGLRenderer 91 three.js:21164 Uncaught TypeError: Cannot read property position' of undefined Assignment2_partB.js at render (Assignment2_partB.js:35) at Assignment2 partB.js:28