How to change the position of perspective camera vertically?

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!

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

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 );
1 Like

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.

Are you using a control class like OrbitControls?

1 Like

Adjusting the camera’s .fov might also be helpful