How can I change the rotation point of the object?

Question

I put a hamburger model on the site using Three.js. As the site goes down, the hamburger rotates in various ways. In one place, it should rotate around itself at an angle of approximately 45 degrees. However, it does not take the center of the object as the pivot point, so instead of rotating around itself, it rotates from the upper left corner. How can I fix this?

The bread rotates as I show in the link below. Instead, the rotation point should be the middle of the bread and it should rotate on the y-axis.

Answer 1

Your hamburger model has its origin not at the center of its geometries Axis Align Bounding Box.

If you don't want to edit the geometry of the burger, you can parent it to an empty group with a local position equal to the offset required such that the pivot of the burger appears to be its visual center (or whatever center you want it to be). Then instead of directly modifying the burger, you modify the parent.

const burgerParent = new THREE.Group();
burgerParent.add(yourBurgerModel);
yourBurgerModel.position.x = 123; // Some offset you define
yourBurgerModel.position.y = 123; // Some offset you define
yourBurgerModel.position.z = 123; // Some offset you define
scene.add(burgerParent);