How to update multiple 3d object position sharing in one input

Questions
,
1

Like three.js and editor panel, when you click multiple objects, the size/position/rotation values ​​of the objects are tracked in real time and you can see that they are all shared in one panel. How can I do this? my code is still incomplete

image
image820×1389 110 KB

this is my code

function transformObj1 () {
  for(let i = 0; i < Group1.children.length; i++){    
    let worldPosition = new THREE.Vector3();
    Group1.children[i].children[0].getWorldPosition( worldPosition );
    posXInput.value = worldPosition.x
    posYInput.value = worldPosition.y
    posZInput.value = worldPosition.z

    sizeXInput.value = measure1.x
    sizeYInput.value = measure1.y
    sizeZInput.value = measure1.z
  }
}

transformControl.addEventListener( 'change', render );
renderer.domElement.addEventListener( 'click', clickEvent );
console.log(box1)
function animate2(){
  box1.setFromObject( Group1, Group1)
  box1.getSize(measure1);

  box2.setFromObject( Group2, Group2)
  box2.getSize(measure2); 

  raycaster.setFromCamera( pointer, camera );
  let intersects = raycaster.intersectObjects( [Groups], true);
  if ( intersects.length > 0 ) {
    let object = intersects[0].object;
    transformControl.attach(object.parent.parent)
    if(object.parent.parent == Group2){
      transformObj2()
    }else if(object.parent.parent == Group1){
      transformObj1()
    }
  }
  requestAnimationFrame(animate2);
}

animate2();