Bouncy Ball doesn't bounce straight up - three.js

Question

I am trying to make the game brickbreaker with Three.js and Physi.js objects. So far I have the bricks and the paddle working. However, when I create a bouncy ball, it seems to be jumping all over the place instead of simply up and down at different angles. It also seems like the ball keeps bouncing even if it isn't hitting the paddle. Can any one help with my code?
var scene, camera, renderer;
var wall, brick, ball;
var npc;
var controls =
{ left:false, right:false,
speed:10,}
var counter=0;
var ball;
console.log("Checking!");
init();
animate();
/****************************************************************
To initialize the scene, we initialize each of its components *
****************************************************************/
function init(){
initPhysijs();
scene = initScene();
initRenderer();
initControls();
addLight();
camera = addCamera();
addBricks();
addWalls();
addNPC();
var ball = createBall();
ball.position.set(0,-10,0);
scene.add(ball)
}
function initScene(){
var scene = new Physijs.Scene();
return scene;
}
function initPhysijs(){
Physijs.scripts.worker = '../js/physijs_worker.js';
Physijs.scripts.ammo = '../js/ammo.js';
}
function initRenderer(){
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xF7F9F9));
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
}
function initControls(){
// here is where we create the eventListeners to respond to operations
//create a clock for the time-based animation ...
clock = new THREE.Clock();
clock.start();
window.addEventListener( 'keydown', keydown);
window.addEventListener( 'keyup', keyup );
}
function keydown(event){
console.dir(event);
console.log("Keydown: '"+event.key+"'");
// this is the regular scene
switch (event.key){
// change the way the avatar is moving
case "ArrowRight": controls.right = true;console.log("coneAvatar moving forward"); break;
case "ArrowLeft": controls.left = true; break;
}
}
function keyup(event){
//console.log("Keydown:"+event.key);
//console.dir(event);
switch (event.key){
case "ArrowRight": controls.right = false; break;
case "ArrowLeft": controls.left = false; break;
}
}
function updateNPC(npc,controls){
var forward = npc.getWorldDirection();
if (controls.left){
npc.position.set(counter-.2,-15,0)
npc._dirtyPosition=true;
// npc.position.x+=1;
counter=counter-.2;
} else if (controls.right){
npc.position.set(counter+.2,-15,0)
npc._dirtyPosition=true;
// npc.position.x=npc.position-1;
counter=counter+.2;
}
else{
npc.position.set(counter,-15,0);
}
}
function addLight() {
var spotLight = new THREE.DirectionalLight(0xffffff);
spotLight.position.set(30, 40, 50);
spotLight.intensity = 1;
scene.add(spotLight);
}
function addCamera(){
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z=24;
camera.position.y=0;
camera.position.x=0;
camera.lookAt(0,0,0);
return camera;
}
function createBall(){
//var geometry = new THREE.SphereGeometry( 4, 20, 20);
var geometry = new THREE.SphereGeometry( 1, 16, 16);
var material = new THREE.MeshLambertMaterial( { color: 0x444444} );
var pmaterial = new Physijs.createMaterial(material,0.9,3);
var mesh = new Physijs.BoxMesh( geometry, pmaterial );
mesh.setDamping(0.01,0.01);
mesh.castShadow = true;
return mesh;
}
/* Adds the bricks to the scene to form the wall the player will try to break down
Added by Allison Regna */
function addBricks() {
var yPos = 0;
var zPos = 0;
var colors = [0x1DD3B0, 0xAFFC41, 0xB2FF9E, 0x75B9BE, 0x7D82B8, 0x00A5CF, 0x987284, 0xAAEFDF, 0xAED6F1];
for(var i= 1; i <= 8 ; i++){
xPos = -30.5;
for(var j= 1; j <=16; j++){
color = colors[getRandomInt(9)];
brick = createBrick(color);
brick.position.set(xPos, yPos, zPos);
scene.add(brick);
brick.addEventListener('collision',
function( other_object, relative_velocity, relative_rotation, contact_normal ) {
if (other_object == ball){
console.log("The ball broke the brick!");
// make the brick drop below the scene ..
this.position.y = this.position.y - 100;
this.__dirtyPosition = true;
}
}
)
xPos += 4.10;
}
yPos += 2.10;
}
}
/* Returns a random integer between 0 inclusive and maxInt noninclusive
Added by Allison Regna */
function getRandomInt(maxInt) {
return Math.floor(Math.random() * Math.floor(maxInt));
}
function addNPC(){
npc = createBoxMesh(0x0000ff);
npc.position.set(0,-15,0);
npc.scale.set(5,2,1);
npc.rotateY(100)
scene.add(npc);
console.dir(npc);
}
/* Adds walls to the scene so the ball can bounce off back into the players view
Added by Allison Regna */
function addWalls(){
var topWall = createWall();
topWall.position.set(0, 18, 0);
scene.add(topWall);
var leftWall = createWall();
leftWall.position.set(-39, 0, 0);
leftWall.rotateZ(Math.PI/2);
scene.add(leftWall);
var rightWall = createWall();
rightWall.position.set(39, 0, 0);
rightWall.rotateZ(Math.PI/2);
scene.add(rightWall);
}
function createBoxMesh(color){
var geometry = new THREE.BoxGeometry( 2, .1, .1);
var material = new THREE.MeshLambertMaterial( { color: color} );
var pmaterial= new Physijs.createMaterial( material, 0.9, .95 );
mesh = new Physijs.BoxMesh( geometry, pmaterial, 0);
mesh.castShadow = true;
mesh.float=true;
return mesh;
}
/* Creates a brick mesh
Added by Allison Regna */
function createBrick(color){
var geometry = new THREE.PlaneGeometry( 4, 2, 4 );
var material = new THREE.MeshBasicMaterial( { color: color, wireframe: false } );
var pmaterial= new Physijs.createMaterial( material, 0.9, 0.05 );
brickMesh = new Physijs.BoxMesh( geometry, pmaterial, 0 );
brickMesh.castShadow = true;
return brickMesh;
}
/* Creates a wall mesh that will keep the ball inside the scene
Added by Allison Regna */
function createWall(){
var geometry = new THREE.PlaneGeometry( 100, 1, 1 );
var material = new THREE.MeshBasicMaterial( {color: 0xffffff} );
var pmaterial = new Physijs.createMaterial ( material, .9, 0.05 );
var wall = new THREE.Mesh( geometry, material, 0 );
return wall;
}
function animate() {
requestAnimationFrame( animate );
updateNPC(npc,controls);
renderer.render( scene, camera );
scene.simulate();
}
<!DOCTYPE html>
<!--
PA03 Group J-Crew
-->
<html>
<head>
<meta charset=utf-8>
<title>Game 0</title>
<style>
body { margin: 0;}
canvas { width: 100%; height: 100%;}
</style>
</head>
<body>
<script src="https://github.com/mrdoob/three.js/"></script>
<script src="https://github.com/chandlerprall/Physijs"></script>
<script src="https://github.com/dataarts/dat.gui"></script>
<script src="https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/OBJLoader.js"></script>
<script src="Final_project.js"></script>
<div id="info"></div>
</body>
</html>