Incorrect Positioning of camera

ThreejsNewbie · January 28, 2020, 11:31am

Hi,

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

Thanks

Mugen87 · January 28, 2020, 3:11pm

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.

github.com

donmccurdy/three-gltf-viewer/blob/5fa407408de685fa29520d97902c9b5d82f0c4a3/src/viewer.js#L254-L281


const box = new Box3().setFromObject(object);
const size = box.getSize(new Vector3()).length();
const center = box.getCenter(new Vector3());


this.controls.reset();


object.position.x += (object.position.x - center.x);
object.position.y += (object.position.y - center.y);
object.position.z += (object.position.z - center.z);
this.controls.maxDistance = size * 10;
this.defaultCamera.near = size / 100;
this.defaultCamera.far = size * 100;
this.defaultCamera.updateProjectionMatrix();


if (this.options.cameraPosition) {


  this.defaultCamera.position.fromArray( this.options.cameraPosition );
  this.defaultCamera.lookAt( new Vector3() );


} else {

This file has been truncated. show original

Topic		Replies	Views
Positioning camera according to size of the object Questions camera , bounding-box , gltf , threejs	7	2285	August 12, 2024
Make Camera position to zoom & center the obj file Questions camera , positioning	3	3287	December 29, 2022
Cannot set camera to glb, only geometry.center works Questions camera	4	1624	August 19, 2020
Reset GLTF position in world matrix after translation Questions loaders , geometry	8	2714	February 7, 2019
How can I center my object (random position, rotation) in my camera? Questions camera	3	136	June 28, 2024

Incorrect Positioning of camera

Related topics