The center of the sphere on left border of screen


I have a canvas with only one sphere. Which one is on the middle of screen. I need to put center of it on left border of screen. I use simple css: “left” -(window.innerWidth/2) + “px”. It works, but in the case of resize of the screen, my sphere dont follow smoothly and it change the position.

For resize i use function: THREEx.WindowResize(renderer, camera);

I fight with that since one week. I have no idea where looking for solution. In three.js or in html? Or somewhere else?

You can also do the resize manually. Most three.js examples do it like this…

function init() {

   // register onWindowResize in your init function

   window.addEventListener( 'resize', onWindowResize, false );


function onWindowResize() {

   camera.aspect = window.innerWidth / window.innerHeight;
   renderer.setSize( window.innerWidth, window.innerHeight );


Inside your onWindowResize function, you can now adjust the new position of your sphere.