How to rotate an object around a pivot point?

Questions
,
1

Hello,

I’ve asked in another forum but I thought I would like to be more clear on my problem. I am having trouble in rotating the upper part of my model around a pivot point, like seen here:
image

I have looked at this question here and tried the example, but I also want to account for how to calculate the pivot point when it changes when the lower part rotates.

Edit: Here is what my current rotation looks like based on the linked question’s example:
https://jsfiddle.net/xeqyp9jg/2/

Any help is appreciated!

2

This isn’t the complete answer, but take a look at the changes I made to the fiddle to get it working more as you described - https://jsfiddle.net/eh5zqa4r/1/

When you add the ‘pivot’ to Mesh1, it’s adding pivot to the Mesh1 geometries center. You want to move the pivot by half of the Mesh1 geometry height (which puts the pivot back to WORLD 0,0,0). Then when you add Mesh2 to Pivot, it’s back to the center of the world and rotates around the point in your visualisation. Take a look here too - https://stackoverflow.com/a/28860849

When I use pivots, I also attach a sphere to its position so you can visualise where the pivot point is in your world to help see what’s going on.

Hope this helps.

2 Likes
3

A simpler approach:
https://jsfiddle.net/8t6Lq9d1/

4

Thank you so much! Your solution has helped a lot, especially with repositioning the pivot back to world coordinates. I appreciate it!

5

Hi this has helped me a lot but do you know how I can get rid of the stationary rectangle in the jsfiddle?
I’ve been trying to remove it for ages and nothing has worked.

6

Do you mean like this? - https://jsfiddle.net/0y7mLwfh/

7

Yes thank you very much!

8

No problem. If you compare the two jsfiddles you should be able to see the commented out code to prevent the static rectangle being added to the scene and adding the rotating rectangle directly to the pivot.

9

Hello guys,
I have the same question and did not quite understand everything.
If i have a mesh with position (1,1,1) and it is 1,1,1 big and want to rotate it at the point (1.9,1.5,1.5) i would have to code it like this, right?

var geometry = new THREE.PlaneGeometry( 1, 1, 1 );
var material = new THREE.MeshNormalMaterial();
var mesh = new THREE.Mesh( geometry, material );
mesh.position.set(1,1,1);
pivot = new THREE.Group();
pivot.position.set(1.9,1.5,1.5);
scene.add( pivot );

//Now i have to counter the position or not?? Because the pivot is translating my object…

mesh.position.sub(?);
pivot.add(mesh);

Can somebody help me :slight_smile:

10

I just signed up to write a thank you, it has been a headscratcher for me, trying to change the pivot point to do scaling upwards, you saved me!

1 Like
11

that fiddle doesn’t work, i tried it both in ff and chrome.

12

Unfortunately, some authors do not use a CDN with the appropriate version of three.js for their examples.

They access the current version of three.js and due to the constant changes some examples do not work after some time.

In the collection I have another example from this post @yombo. This is linked in the collection to the version of three.js at that time.

../js/three.min.103.js

RotateAroundPivotPoint

1 Like