Everything was going smoothly with my code until I decided to enable WebGL. It seems that the function responsible for resizing my object every frame rate stopped working.
function animate(){
window.requestAnimationFrame(animate);
s.setPosition(s.x - 1, s.y - 1, 0);
}
s.prototype.setPosition = function(x, y, z) {
this.x = x;
this.y = y;
this.z = z;
this.squareMesh.geometry.vertices[0].set( x, y, z);
this.squareMesh.geometry.vertices[1].set( x + this.w - 1, y, z);
this.squareMesh.geometry.vertices[2].set( x + this.w - 1, y - this.h + 1, z);
this.squareMesh.geometry.vertices[3].set( x, y - this.h + 1, z);
}
Enabling WebGL seemed to throw a wrench in things as now it looks like the object is not getting updated.
The workaround of using a built-in function obj.position.x = s.x +1 does work, but then it leads to other issues like all objects having the position 0 0 0. More details on this problem can be found here: Three.js, WebGl Object position