title: How to center objects in the browser in three.js?
body: <p>I have a file written in three.js to output 3D objects to be controlled by leapmotion. The code doesn't output the objects centered in my screen, they are shifted to top right and only show almost 2 sides not 4 as it should. </p>
  
  <p><strong>Note</strong> the code won't output anything if it is not connected to leapmotion.</p>
  
  <p>Here is the source file. <a href="https://github.com/ellinoran/calderan/blob/master/index.html" rel="nofollow noreferrer">https://github.com/ellinoran/calderan/blob/master/index.html</a></p>
  
  <p>I attached two images, one that shows how it shown in the browser and the other shows how it should be.</p>
  
  <p>I am using the latest version of chrome and I run it through wamp server. </p>
  
  <p><a href="https://i.stack.imgur.com/NuDyZ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NuDyZ.jpg" alt="enter image description here"></a></p>