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

Questions
1

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.add(gltf.scene);

    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

    scene.add(Box_DynamicPanel);
});

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

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();
group.add(Box_DynamicPanel);
group.translateY(-5);
scene.add(group);

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

3

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.

4

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