Changing the center of object

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