[Beginner] Change Rotation Axis to Object Center (GLB)

Hey all, pharmacist with zero JS knowledge again,
Tried StackOverflow for 2 hours; couldn’t quite figure it out.

Goal: Get this GLB of a solar panel to rotate around its center (GREEN line in my image).
Visualization: https://i.imgur.com/x0vMZLe.png & https://i.imgur.com/9x8YaiG.gif
Note: There are two GLBs in my scene, static (legs, omitted) & dynamic (panel & frame)

//  Import Dynamic GLB Model; Contain within Box
const Box_DynamicPanel = new THREE.Object3D();
const modelDynamicLoad = new GLTFLoader();
modelDynamicLoad.load(solarDynamic, (gltf) => {

    const box = new THREE.Box3().setFromObject(gltf.scene);
    const center = box.getCenter(new THREE.Vector3());
    const size = box.getSize(new THREE.Vector3());

    gltf.scene.position.set(-center.x, size.y / 2 - center.y, -center.z);

    Box_DynamicPanel.position.x = panelX; // set this as 0
    Box_DynamicPanel.position.y = panelY; // set this as -0.5
    Box_DynamicPanel.position.z = panelZ; // set this as 0


//  Rotation in the .gif done via DAT GUI
const rotationFolder = gui.addFolder('Rotation');
rotationFolder.add(Box_DynamicPanel.rotation, 'x', -2, 2, 0.1);

Edit: User on Discord (unsure if he/she wants name written) suggested to:

  1. Create Group
  2. Add panels to the group
  3. Move panels within the group by -50% down
  4. Rotate Group
const group = new Group();

^^ When I go to translate group, nothing moves :slight_smile:

It’ll be easier to tell if you provide the live code to have a look, especially because you seem to make changes in JS but control rotation via GUI.

If you can modify the GLB file, change the pivot point of the panels from the bottom to the center.