How to combine gltf children elements into one object

Hi folks,
I have re-read many topics but have not found the exact answer.
I am uploading a model gltf. The model consists of several elements (each has its own material and color, etc.). I make an event handler (the object is moved by mouse click) and use a raycasting to detect the object. When I had a model loaded in obj format, the whole model moved as a whole. But for a model in the gltf format, only one element of the model moves (which is hit by the ray).
How can I combine all the elements of the gltf model into one whole?

Can you share your code here? If possible as a working example on codesandbox or similar.

May be you can use for dedecting breath first searching method. But I am also haven’t any idea about combine.

Thanks. But I have a lot of code. Below are separate blocks of code:

	//--------	it was the code to load the model in the obj format: 
			
		var loaderKitchen1Path1Door27 = new THREE.MTLLoader();					
	    var loadPathD271 = loadPath+'magia1_part3_door27.mtl';
		var loadPathD272 = loadPath+'magia1_part3_door27.obj';
	    loaderKitchen1Path1Door27.load(loadPathD271, function(matK1P1Door27){	
		matK1P1Door27.preload();
		var objLoaderK1P1Door27 = new THREE.OBJLoader(); 
		objLoaderK1P1Door27.setMaterials(matK1P1Door27);
		objLoaderK1P1Door27.load(loadPathD272, function(meshK1P1Door27){
		
		//----------------bbox----------
			
				var door27Bbox = new THREE.Box3();
				door27Bbox.setFromObject(meshK1P1Door27);
				var bboxDoor27Center = door27Bbox.getCenter().clone();
				bboxDoor27Center.multiplyScalar(-1);
					meshK1P1Door27.traverse(function(child){
	              			child.castShadow = true;
    						child.receiveShadow = true;							
						if (child instanceof THREE.Mesh){
							child.geometry.translate(bboxDoor27Center.x, bboxDoor27Center.y, bboxDoor27Center.z); 
	    					door[27].id = child.id;
	              		}                               
					});

				door27Bbox.setFromObject(meshK1P1Door27);
		//------------------------------------------------
				cubeAs[27].add(meshK1P1Door27);
				meshK1P1Door27.position.set((-door[27].cubeAs27X),0,(-door[27].cubeAs27Z));//-1.36,0.471, 2.435465
				meshK1P1Door27.rotation.y = Math.PI;	  		
		    });
		}); 
	//---------end loading obj
	
	
	//-----now I want to load gltf:
	
	var loaderKitchen1Path1Door27 = new GLTFLoader();					
	   	
	    loaderKitchen1Path1Door27.load('models/door27.gltf', function(meshK1P1Door27){
		meshK1P1Door27.scene;

		//----------------bbox----------
			
				var door27Bbox = new THREE.Box3();
				door27Bbox.setFromObject(meshK1P1Door27.scene);
				var bboxDoor27Center = door27Bbox.getCenter().clone();
				bboxDoor27Center.multiplyScalar(-1);
					meshK1P1Door27.scene.traverse(function(child){
	              			child.castShadow = true;
    						child.receiveShadow = true;							
						if (child instanceof THREE.Mesh){
							child.geometry.translate(bboxDoor27Center.x, bboxDoor27Center.y, bboxDoor27Center.z); 
	              		}                               
					});

		//------------------------------------------------
				cubeAs[27].add(meshK1P1Door27.scene);
				meshK1P1Door27.scene.position.set((-door[27].cubeAs27X),0,(-door[27].cubeAs27Z));//-1.36,0.471, 2.435465
				meshK1P1Door27.scene.rotation.y = Math.PI;

		});
		
	//------------loading is sussesful
	
		//--------------then event
	
	function onDocumentMouseDblClick( event ) {
			event.preventDefault();
			
			var intersects = getIntersects( event.layerX, event.layerY );
			if ( intersects.length > 0 ) {
				
				selectedObject = intersects[0].object;
				selectedObjectStatusId = selectedObject.id;
				if(selectedObjectStatusId === door[27].id){	
				
				//---------mooving selectedObject (here code fjf mooving stltcted object)
				}
			}
	}
	
	//-----------here I use raycasting to detect Object
	
	    //statsNode.innerHTML = '';	
		var raycaster = new THREE.Raycaster();
		var projector = new Projector();
		var directionVector = new THREE.Vector3();
			function getIntersects( x, y ) {
				x = ( x / window.innerWidth ) * 2 - 1;
				y = - ( y  / window.innerHeight ) * 2 + 1;
				var z = 0.5;
				directionVector.set( x, y, z );
				projector.unprojectVector(directionVector, camera);
				directionVector.sub(camera.position);
				directionVector.normalize();
				raycaster.set(camera.position, directionVector);
				var rayCube = raycaster.intersectObjects( scene.children, true );				
							if (rayCube.length) {
							  var target1 = rayCube[0].object;							  							 							  
								 		if (target1.id === door[27].id){								 											 					
												return rayCube;											
										}														 											 						  			
							}												
			}
			
	//--------------

Hi
I have recorded a short video to show my problem. Please watch the video:
https://youtu.be/wLSigsADD3s

Hi folks, so can anyone help?

Hi const , did you try to make an invisible element above your model (cube with transparence material ) and move the fake obj ?