Incorrect Positioning of camera


Due to camera settings the object is not at the center of the screen

is there anyway to make the model appear like the below image

please find the below code

	camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 3500 );
	camera.position.z = -1000;
	camera.position.y = 0;
	camera.position.x = - 1000;// added to get a better control on screen
//	camera.lookAt( new THREE.Vector3( 0, 0, 0 ) );

	renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.setClearColor( "#e5e5e5" ); //setting a grey color on the screen
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight ); //adjusting the black screen on the browser
	document.body.appendChild( renderer.domElement );


Similar question were asked multiple times and we often refer to the code of the open source gltf-viewer. I suggest you study how the method setContent() is implemented. You can use the following code section to do two things:

  • Center an object based on its bounding box
  • Use the bounding box to derive optimal camera parameters

Especially the latter one could solve your issue.