I want a scene with camera.position.y = 7 to be displayed in the centre of the canvas and not a bit down (like in the attached 2nd Codepen link).
Here are two simple Three.js Codepen examples:
1st Example: Codepen link: Link
camera.position.y = 7; camera.lookAt(0, 0, 0);
In the above demo I have a bar added to the centre of the canvas (by default) and I have set camera at y = 7. I have also added camera.lookAt(0, 0, 0). So the camera looks at centre. The output as you can see appears tilted (the bar appears as if it's falling to the front) and is not what I expect.
2nd Example: Codepen link: Link
camera.position.y = 7;
The 2nd example is same as first except the camera.lookAt(0, 0, 0) is not added. So the camera looks at y=7. The output is good and is what I want but it is not vertically centered.
What I what? I want the output same as in the 2nd example but it should be displayed in the centre (both vertically & horizontally) of the canvas. Also the camera.position.y can be anything and not just 7.
Basically the output should appear like in the 2nd example but in the centre of the canvas and for any given value of camera.position.y.
Is that achievable?
Thanks!