How to change the position of perspective camera vertically?

[shonsirsha]

Hi all,

This is the perspective that what I want to achieve

I am trying to achieve that with perspective camera, and this is my current setup:
camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 1000);
camera.position.x = 3;
camera.position.y = 1.8;
camera.position.z = 3.8;
camera.zoom = 1.1;

and this is how it looks like (the view of the floor is too big):

Now, if i tried to zoom (zoom:1.5) it to look closer to the design, the text is obviously gonna get cropped out:

So, how can I move the position of the camera along the y-axis while still looking at the same position (less floor and more text - just like the design), because if i change the value of camera.y, the camera moves vertically but not what I wanted for this case.

(e.g: camera.y is 8)

Should I use lookAt? Or am I understanding it wrongly?

Any help would be appreciated, thanks!

[hofk]

Some camera movements.

Maybe there’s something in it for you?

See in the Collection of examples from discourse.threejs.org 218
(https://hofk.de/main/discourse.threejs/2018/index2018.html)

HumanEyesCamera - @prisoner849, hofk

function move( ) {
	
	if ( keyCode === 87 ) { if ( withinBorders( moveForward ) ) moveForward( camHolder ) }	// w fast vorward
	if ( keyCode === 83 ) { if ( withinBorders( moveBack ) ) moveBack( camHolder ) }		// s backward a little slower
	if ( keyCode === 65 ) { if ( withinBorders( moveLeft ) ) moveLeft( camHolder ) }		// a slowly leftwards
	if ( keyCode === 68 ) { if ( withinBorders( moveRight ) ) moveRight( camHolder ) }		// d slowly rightwards
		
	if ( keyCode === 76 ) { turnLeft( camHolder ) }		// l turn to the left
	if ( keyCode === 82 ) { turnRight( camHolder ) }	// r turn to the right
		
	if ( keyCode === 84 ) { goTop( camHolder ) }	 	// t upstretch
	if ( keyCode === 66 ) { goBottom( camHolder ) }	 	// b bend down
	
	if ( keyCode === 38 ) { lookUp( camera ) }	 		// up arrow, looking higher		-> camera
	if ( keyCode === 40 ) { lookDown( camera ) }		// down arrow, looking deeper	-> camera
}

and see Circular control used for walkable areas control

[Mugen87]

@shonsirsha

Should I use lookAt? Or am I understanding it wrongly?

It seems your camera still looks at the origin in your screenshots. If that’s the case, try to do something like this:

camera.lookAt( 0, 1.8, 0 );

[shonsirsha]

Thanks @Mugen87 , but where should I put this code? I tried putting it before/after the camera.position but I didn’t notice any difference.

[Mugen87]

Are you using a control class like OrbitControls?

[DolphinIQ]

Adjusting the camera’s .fov might also be helpful