Changing the center of object

Questions
1

Hello, please correct me if i am asking stupid questions but I downloaded a free gltf model from web and I try to manipulate the model in many ways but i encountered one issue. When I load the model and add it to the scene the cross point of its axis (x,y,z - I used AxesHelper) is on the bottom of the object and not on its center: =>

image
image1944×1094 99.3 KB

It creates a problems like:

  1. If I want to center my camera on the middle of the scene model is not in the middle of camera (see previous screenshot)
  2. It create issue with rotation on axis x,y,z that object/model is not stayin in one place when rotating

Is there a way of re-setting center of the model in code ? or it should be designed differently in Blender etc ?

2

From the Collection of examples from discourse.threejs.org

see LoadGLTFmove

and

see BeginnerExample // … step 03

=> center the scene !


// ... step 03: load 3D models - gltf is recommended https://blackthread.io/gltf-converter/
//=================================================================================================
													// https://gltf-viewer.donmccurdy.com/
			//https://threejs.org/docs/index.html#examples/en/loaders/GLTFLoader
const loader = new GLTFLoader( );					// if <script> use  THREE.GLTFLoader( )

const modelLh = new THREE.Object3D( );
loader.load( 'Lighthouse/Lighthouse_01.gltf', function ( gltf ) { //  (CC-BY) Poly by Googl, contains lighting 
	modelLh.add( gltf.scene ); // this gltf.scene is centered 
	modelLh.scale.set( 0.4, 0.4, 0.4 ); // because gltf.scene is big
	modelLh.position.set( 2, -0.99, -18 );
	scene.add( modelLh );
	}
);

// ----------------------------------------------------------------------------

const modelBee = new THREE.Object3D( );

loader.load( 'Kelli Ray_Bee/toi uu.gltf', processBee );

function processBee( gltf ) { // Kelli Ray  (CC-BY) Poly by Googl
	
			//https://threejs.org/docs/index.html#api/en/math/Box3
	const box = new THREE.Box3( ).setFromObject( gltf.scene );
	const c = box.getCenter( new THREE.Vector3( ) );
	const size = box.getSize( new THREE.Vector3( ) );
	gltf.scene.position.set( -c.x, size.y / 2 - c.y, -c.z ); // center the gltf scene
	modelBee.add( gltf.scene );
	
}

modelBee.scale.set( 0.0015, 0.0015, 0.0015 ); // because gltf.scene is very big
modelBee.position.set( 2.4, 0.2, 0.5 );
scene.add( modelBee );
// ----------------------------------------------------------------------------
			// https://threejs.org/docs/index.html#api/en/core/Clock
const clock = new THREE.Clock( );	// for the rotation of the model - see animate
let t, tt;							// time

const modelSqu = new THREE.Object3D( );
loader.load( 'Lowpoly Squirrel by Tipatat Chennavasin/model.gltf', function ( gltf ) { //  (CC-BY) Poly by Google
	const box = new THREE.Box3( ).setFromObject( gltf.scene );
					// https://threejs.org/docs/index.html#api/en/helpers/Box3Helper
	// const boxHelper = new THREE.Box3Helper( box, 0xffff00 );
	// scene.add( boxHelper ); // see original position of model.gltf, not centered
	const c = box.getCenter( new THREE.Vector3( ) );
	const size = box.getSize( new THREE.Vector3( ) );
	// center the gltf scene - important for modelSqu.rotation.y = t in function animate
	gltf.scene.position.set( -c.x, size.y / 2 - c.y, -c.z );  // put // in front of this line, try it out 
	modelSqu.add( gltf.scene ); 
	modelSqu.position.set( 0.7, -0.99, 0.3 );
	scene.add( modelSqu );
	}
);