My 3D model is not rotating around its origin



Correct depending on if you take approach on row 1 or 2, you it will change how you load and re-orient your models.

I feel like what you want is similar to some RPG games where a game avatar can wear armor. In that case you may consider writing a little system where each part has a connector and you connect them to the correct spot.

This diagram below, if you do, would mean you follow something similiar to row 1 with slight offset of each model’s pivot point to their connecting location.


Okay tho, i feel what you are saying is real good, but still after all is done. How do i now make my model rotate around its axis. Thats still my problem. At-least i need like a small explanation or a guide. I feel like giving up on Threejs


when you say " How do i now make my model rotate around its axis", i assume you are referring to the root model or the Group.

If so, I believe once you connect all the sub models to the root model, you end up just having to rotate the root (parent | group) model, and all (child) parts should follow.

unless i’m not understanding something…


Okay first, are you advicing me to go with row 1 or 2 ? and if so, check out my [link] i used row one and joined all the parts ( but it didnt give me my desired result


sorry give the link a second, and pushing to the server, in the lik you would find out that the shirt model is completely built and not explosion


I’m leaning towards row 1 in your case, because you seem to be assembling modular parts on top of other modular parts which in this case also will be expandable moving into the future.

you’ll still have to offset the pivots slightly on each model, so the pivot of each model, is where you end up connecting onto another part for example.

again if you see yourself going to do something like in the attach image, where you have more than 1 level of connection, kinda like a skeleton chain where the everything connects to something, but if you trace their root connection, they all meet at the hip joint.

So while Row 2 is easier if you only have one level of connection, it is not so much dynamic though.
Row 1 is more modular and dynamic but it does take more coding to put a system around the connections in my opinion.


Now i am getting you. Stilla few question i have to ask tho. like:

  1. what should i use as the root model which all other models connect to ?
  2. Since we are all adding the modular piece 1, modular piece 2, and modular piece 3 to the threeGroup. how do we now set the modular piece 2 as the rotation point in the three group ?


Good question. Off the top of my head, i’m thinking, continue to make THREE.Group your main container that will hold the rest of the child models.

Group (rotate on the group when all child models are connected)

  • piece 1
  • piece 2
  • piece 3

So this means, you always only apply rotation on the Group, which would really be the center of all all sub models. Unless you are talking about rotating around only based on the selected modular piece, than that’s probably a more advance rotation.

hopefully i’m still on the same page. The group has a zero zero position. So, trying to mimic your front and back shirt, the pivot of the front and back would have to be set at the same locations like in the image. so front and back, when pushed into the group, they are automatically get put in the correct position.


Now i am a bit confused, are all child models added to the group before i rotate or just the center piece, and if i rotate on the group since it didn’t specify an origin for it to rotate about, it may go haywire


Maybe there is a lower level of processing i may not be aware of with this setup.

but for simplicity, the way how i see it, the Group (which contains all the child models) should be assembled or positioned correctly before you try rotating the group. In other words, once the model looks good and all parts are in their proper places, then rotate.

Incase you were not aware, when you create a THREE.Group, the default origin is always (0,0,0) so that’s the default pivot point of the group, or where the rotation will be applied to.


i did this, i positioned them correctly but it is not still rotating around the center

have a look


can the default pivot of the group be changed ?


yes it sure can. To change pivot on any 3d objects, I believe you can do it by using applyMatrix.
myGroup.applyMatrix( new THREE.Matrix4().makeTranslation(x, y, z) );

fyi - this is a translation change on the pivot which is what i think you are asking for.

i’m thinking it should work in your case scenario.
If you are not familiar with using matrix, you may want to read up on them. There is a difference when you use matrix to move, scale, rotate objects vs modifying objects through non-matrix methods which most people are used to. I’m not a matrix expert i only understand the basics to some degrees.


okay lemme try it. can i message you if i have any issues ?


sure can, i’m going to be on break in a bit, but will try my best to answer questions that I can.


I saw this post tho, the algorithm is quite long, but i think someone had the same issue .;


can you try to create a basic red sphere and just add it to your main group that’s housing all the child models? I’m carious to see where your group’s pivot point is.

When you add a 3d object to a group or empty mesh, the child automatically gets positioned at the parent’s pivot location. So without modifying any position on the sphere, where the sphere appears in the scene is where the group’s pivot point is (a.k.a. the group’s position)

In fact, after you add the sphere, and if you rotate the group, you will see that the sphere should stay in the same location since the sphere is at the group’s pivot location.

How do you rotate a Group of Objects around an arbitrary axis?

okay, lemme try that