My 3D model is not rotating around its origin

I have a Grouped model which is not rotating around its center axiz, when i googled this i found out it was due to an offset when exporting each mesh. to get a perfect rotation should each individual mesh have their own pivot point centered at their middle or should it be absolute to the parent model’s own pivot point ?

The question is not too clear. Can you fill in some answers to the following questions:

  • Do you have a main root 3d model which composes of sub 3d models?
  • You are importing the root 3D model into threejs that was modeled in a modeling software?
  • You are trying to rotate the root model around a pivot?
  1. yes
  2. no i am taking each of its parts and importing it into threejs, i am making a product configurator
  3. each of its parts is added to this var group = new THREE.Group(); and the group should be able to rotate around its pivot

According to your answers, do you mean something like this. Basically i’m just rotating a THREE.Group like you mentioned. I created 3 sphere and pushed them into the Group object. in the code, checkout “createScene()”

jsfiddle example:

yeah, but see mine here (it take a little bit of time to load tho). The shirt model doesnt rotate around its pivot. It is because its is made out of other meshes who arent at their pivot too

when load a model,move the model to original point. try this code:

    var box3 = new THREE.Box3().setFromObject(object);
    var center = box3.getCenter();

Yes, the author links OrbitControls.js, but at the same time he uses custom code to move the camera. Have a look into, there you can find a function addEventListeners(). So, when you use mouse, you can see some log messages from functions of those event listeners. The only thing that, from my point of view, is missing there is camera.lookAt(model's_position_or_scene.position). But maybe I’m wrong with it :slight_smile:

i tried this and it completely scattered my model

i completely removed the orbit control tho… i now only use mouse Event
What happened to the parts of the model? They look like exploded now or set at random positions.
Did you try to use camera.lookAt()?
Did you try to play around with the position of the camera?

it tried [quote=“sweerwen, post:6, topic:3339”]
var box3 = new THREE.Box3().setFromObject(object); var center = box3.getCenter(); object.position.add(center.multiplyScalar(-1));
[/quote] lemme try at lookout, gimmi a sec

I tried, camera.lookAt(). It doesnt show the model on the screen

i had see your website
and test this code in console

var group = new THREE.Group();
var childs = scene.children.slice(3);
var box3 = new THREE.Box3().setFromObject(group);
var center = box3.getCenter();

it works fine

i should try the code out?

Does this create a center origin for the model or it moves it to the original point ?

the link is actually

Just want to make I’m on the same page with this diagram attach. Am I correct, you are bringing in your models like the first row?

If so, i wonder, if the pivots need to be fixed in the 3D modeling software like demoed in Row 2, prior to bringing them into threejs and pushing into a group.


Yes i am bringing them in like the first row. but how do i make each of them fixed before exporting them ?

okay next question: Would modifying the pivot of each model to be like row 2 work or is something you want to avoid? If you can change the pivot of each model to be like two 2, i believe it will be much easier to work with, as all you have to do is just push the model into the Group and the placement should be correct.

If you don’t want to do it like row 2, and keep it as row 1, then it requires a little bit more work, if not you may need to create a little system to reconnect the pieces by offsetting the pivot of each model (in a smart way) so that the models align together seamlessly.

I feel row 1 seems hard if i try to reconnect them, because i plan to add more mesh to the shirts in future. but if i go with row 2, how do i give them a central origin ?