The center of the sphere on left border of screen

Questions
1

Hello,

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?

2

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;
   camera.updateProjectionMatrix();
   renderer.setSize( window.innerWidth, window.innerHeight );

}

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