Screen goes blank when moving camera - three.js

Question

I'm attempting to create something in three.js and I'm moderately successful in building the geometry from text files. To start off, I manage to get a game level file to display complete with textures. Then I try to load the models from that game and suddenly the screen would go blank as soon as I try to move around. I can look around, but moving kills the screen.
I then remove the part about loading the models, but still keep their position in memory, and the same thing happens.
After taking a good look, it turns out that after I set the camera's position to the player's position, then try to move, that is when the screen goes blank.
Some of the code snippet involving how the camera is set up:
var getPlayers = document.createElement("select");
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.001, 10000 );
var LOADING_COMPLETE = false;
A whole bunch of loading functions follow...
function CompleteTheLoading()
{
document.getElementById("mainmenu").innerHTML = "<b>Jump to </b>";
document.getElementById("mainmenu").appendChild(getPlayers);
yawObject.position.x = jklthings[getPlayers.value][3];
yawObject.position.y = jklthings[getPlayers.value][4];
yawObject.position.z = jklthings[getPlayers.value][5];
yawObject.rotation.z = jklthings[getPlayers.value][7]*Math.PI/180;
LOADING_COMPLETE = true;
animate();
}
getPlayers.onchange = function()
{
velocity.x = 0;
velocity.y = 0;
velocity.z = 0;
yawObject.position.x = jklthings[getPlayers.value][3];
yawObject.position.y = jklthings[getPlayers.value][4];
yawObject.position.z = jklthings[getPlayers.value][5];
yawObject.rotation.z = jklthings[getPlayers.value][7]*Math.PI/180;
if (document.activeElement != document.body) document.activeElement.blur();
}
var mouseX = 0;
var mouseY = 0;
var mouseK = 0;
var havePointerLock = 'pointerLockElement' in document ||
'mozPointerLockElement' in document ||
'webkitPointerLockElement' in document;
var moveForward = false;
var moveBackward = false;
var moveLeft = false;
var moveRight = false;
var canJump = false;
var prevTime = performance.now();
var velocity = new THREE.Vector3();
var direction = new THREE.Vector3();
var onKeyDown = function ( event ) {
switch ( event.keyCode ) {
case 38: // up
case 87: // w
moveForward = true;
break;
case 37: // left
case 65: // a
moveLeft = true;
break;
case 40: // down
case 83: // s
moveBackward = true;
break;
case 39: // right
case 68: // d
moveRight = true;
break;
}
};
var onKeyUp = function ( event ) {
switch( event.keyCode ) {
case 38: // up
case 87: // w
moveForward = false;
break;
case 37: // left
case 65: // a
moveLeft = false;
break;
case 40: // down
case 83: // s
moveBackward = false;
break;
case 39: // right
case 68: // d
moveRight = false;
break;
case 78: // n
if(getPlayers.selectedIndex==getPlayers.length-1)
getPlayers.selectedIndex=0;
else
getPlayers.selectedIndex=getPlayers.selectedIndex+1;
getPlayers.onchange();
break;
case 80: // p
if(getPlayers.selectedIndex==0)
getPlayers.selectedIndex=getPlayers.length-1;
else
getPlayers.selectedIndex=getPlayers.selectedIndex-1;
getPlayers.onchange();
break;
case 13: // Enter
getPlayers.onchange();
break;
}
};
document.addEventListener( 'keydown', onKeyDown, false );
document.addEventListener( 'keyup', onKeyUp, false );
var pitchObject = new THREE.Object3D();
pitchObject.add( camera );
var yawObject = new THREE.Object3D();
yawObject.add( pitchObject );
scene.add(yawObject);
var PI_2 = Math.PI / 2;
camera.rotation.x = 90*Math.PI/180;
function animate()
{
var time = performance.now();
var delta = ( time - prevTime ) / 1000;
velocity.x -= velocity.x * 1.0 * delta;
velocity.y -= velocity.y * 1.0 * delta;
velocity.z -= velocity.z * 1.0 * delta;
direction.z = Number( moveForward ) - Number( moveBackward );
direction.x = Number( moveLeft ) - Number( moveRight );
direction.normalize(); // this ensures consistent movements in all directions
if ( moveForward || moveBackward )
{
velocity.y -= direction.z * 1.0 * -delta;
velocity.z -= direction.z * pitchObject.rotation.x * 1.0 * -delta;;
}
if ( moveLeft || moveRight )
velocity.x -= direction.x * 1.0 * delta;
if(mouseK==1)
{
yawObject.rotation.z -= mouseX * 0.01;
pitchObject.rotation.x -= mouseY * 0.01;
pitchObject.rotation.x = Math.max( - PI_2, Math.min( PI_2, pitchObject.rotation.x ) );
}
yawObject.translateX( velocity.x * delta );
yawObject.translateY( velocity.y * delta );
yawObject.translateZ( velocity.z * delta );
renderer.render( scene, camera );
prevTime = time;
requestAnimationFrame( animate );
}
function mouseMovement(e)
{
mouseX = e.movementX || e.mozMovementX || e.webkitMovementX || 0;
mouseY = e.movementY || e.mozMovementY || e.webkitMovementY || 0;
}
renderer.domElement.addEventListener( 'mousedown', function()
{
if(LOADING_COMPLETE==true)
{
mouseK = 1;
document.addEventListener("mousemove", mouseMovement, false);
}
},false);
renderer.domElement.addEventListener( 'mouseup', function()
{
// Ask the browser to release the pointer
document.removeEventListener("mousemove", mouseMovement, false);
mouseX = 0;
mouseY = 0;
mouseK = 0;
},false);
Now, you are probably noticing that the camera is set at an angle. This is due to that the game is Z-up while three.js is Y-up. Rotating and recalculating the whole level is no fun, so I just jumble the camera instead.
Also, for the most part when I change getPlayers it still renders, but after I move I can't get it back even after getPlayers.
Making snippet, and oddly enough that works when setting the position of the yawObject. Except it won't run in this snippet. But here it is anyways.
<html>
<head>
<title>test</title>
</head>
<body>
<script src="https://threejs.org/build/three.js"></script>
<script>
var LOADING_COMPLETE=true;
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.001, 10000 );
// A whole lot of Loading Functions removed...
// All that remains is three's Materials Example:
var geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 );
var mesh = new THREE.Mesh( geometry, new THREE.MeshNormalMaterial({}) );
scene.add( mesh );
var mouseX = 0;
var mouseY = 0;
var mouseK = 0;
var havePointerLock = 'pointerLockElement' in document ||
'mozPointerLockElement' in document ||
'webkitPointerLockElement' in document;
var moveForward = false;
var moveBackward = false;
var moveLeft = false;
var moveRight = false;
var canJump = false;
var prevTime = performance.now();
var velocity = new THREE.Vector3();
var direction = new THREE.Vector3();
var onKeyDown = function ( event ) {
switch ( event.keyCode ) {
case 38: // up
case 87: // w
moveForward = true;
break;
case 37: // left
case 65: // a
moveLeft = true;
break;
case 40: // down
case 83: // s
moveBackward = true;
break;
case 39: // right
case 68: // d
moveRight = true;
break;
}
};
var onKeyUp = function ( event ) {
switch( event.keyCode ) {
case 38: // up
case 87: // w
moveForward = false;
break;
case 37: // left
case 65: // a
moveLeft = false;
break;
case 40: // down
case 83: // s
moveBackward = false;
break;
case 39: // right
case 68: // d
moveRight = false;
break;
case 78: // n
if(getPlayers.selectedIndex==getPlayers.length-1)
getPlayers.selectedIndex=0;
else
getPlayers.selectedIndex=getPlayers.selectedIndex+1;
getPlayers.onchange();
break;
case 80: // p
if(getPlayers.selectedIndex==0)
getPlayers.selectedIndex=getPlayers.length-1;
else
getPlayers.selectedIndex=getPlayers.selectedIndex-1;
getPlayers.onchange();
break;
case 13: // Enter
getPlayers.onchange();
break;
}
};
document.addEventListener( 'keydown', onKeyDown, false );
document.addEventListener( 'keyup', onKeyUp, false );
var pitchObject = new THREE.Object3D();
pitchObject.add( camera );
var yawObject = new THREE.Object3D();
yawObject.add( pitchObject );
scene.add(yawObject);
var PI_2 = Math.PI / 2;
camera.rotation.x = 90*Math.PI/180;
yawObject.position.x = 10.7;
yawObject.position.y = 20.2;
yawObject.position.z = 0;
yawObject.rotation.z = 135*Math.PI/180;
animate();
function animate()
{
var time = performance.now();
var delta = ( time - prevTime ) / 1000;
velocity.x -= velocity.x * 1.0 * delta;
velocity.y -= velocity.y * 1.0 * delta;
velocity.z -= velocity.z * 1.0 * delta;
direction.z = Number( moveForward ) - Number( moveBackward );
direction.x = Number( moveLeft ) - Number( moveRight );
direction.normalize(); // this ensures consistent movements in all directions
if ( moveForward || moveBackward )
{
velocity.y -= direction.z * 1.0 * -delta;
velocity.z -= direction.z * pitchObject.rotation.x * 1.0 * -delta;;
}
if ( moveLeft || moveRight )
velocity.x -= direction.x * 1.0 * delta;
if(mouseK==1)
{
yawObject.rotation.z -= mouseX * 0.01;
pitchObject.rotation.x -= mouseY * 0.01;
pitchObject.rotation.x = Math.max( - PI_2, Math.min( PI_2, pitchObject.rotation.x ) );
}
yawObject.translateX( velocity.x * delta );
yawObject.translateY( velocity.y * delta );
yawObject.translateZ( velocity.z * delta );
renderer.render( scene, camera );
prevTime = time;
requestAnimationFrame( animate );
}
function mouseMovement(e)
{
mouseX = e.movementX || e.mozMovementX || e.webkitMovementX || 0;
mouseY = e.movementY || e.mozMovementY || e.webkitMovementY || 0;
}
renderer.domElement.addEventListener( 'mousedown', function()
{
if(LOADING_COMPLETE==true)
{
mouseK = 1;
document.addEventListener("mousemove", mouseMovement, false);
}
},false);
renderer.domElement.addEventListener( 'mouseup', function()
{
document.removeEventListener("mousemove", mouseMovement, false);
mouseX = 0;
mouseY = 0;
mouseK = 0;
},false);
window.onresize = function()
{
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
</script>
</body>
</html>
EDIT:
Following Jim's advice, I've reconstructed the code bit by bit, keeping the "teleportation" part, and calling it to some arbitrary numbers. Everything seems to work fine, even after the final touches of loading jklthings. As soon as I change the arbitrary numbers to the coordinates of the jklthings that represent a player, it breaks like above.
Using a console.log(jklthings[getPlayers.value][3] + "\t" + jklthings[getPlayers.value][4] + "\t" + jklthings[getPlayers.value][5] + "\t" + jklthings[getPlayers.value][7]*Math.PI/180); I get the values -4.9 5.9 .1 0. Feeding these in manually, everything works.