THREE.js How to calculate rotation position on a 3D circle?

Question

As represented in the image below, I have a THREE.Scene with a simple cube. Attached to the cube is a CANNON.Body for Physics (represented in the green wireframe).

The CANNON.Body is offset from the cube by a couple of units. For rotation, this offset will be the radius.

When I rotate the cube, I want the CANNON.Body to rotate around the cube based on the angle and radius. On the right hand side of the image, I rotated the cube with an angle of 45 degrees (I also have radians available). However, the CANNON.Body does not rotate around the cube, only around it's own center. I need it to rotate around the cube for all axes x, y and z.

Is there a built-in function in THREE.js or should I use my own mathematical equation for this? If so, what would that be?

Thanks!

P.S. I've seen solutions for pure THREE.js Scene's where the geometry is translated to manipulate the pivot point. Since I don't have geometry in my CANNON.Body, this will not be possible.

One way might be to add an (otherwise empty) Object3D to the scene, but leave its position at the center of rotation. Add the CANNON.Body not to the scene but to that Object3D. Move the CANNON.Body as you did before to shift it, and instead rotate the Object3D. — Leeft
@Leeft Thank you for the suggestion. However, I want to try and not add unnecessary Objects to the Scene. I know that this can be solved mathematically, I just don't know how to apply it to my situation and what equations to use. If you have any other suggestions, please let me know! — Nicky
Other possible options I can think of: move the pivot point, or do the math yourself (there's no builtin function, but THREE.Math has some radToDeg and degToRad helpers). There's nothing wrong with creating some (otherwise empty) Object3D to group or offset things in your scene though, and in fact the scene itself is essentially an Object3D which has several Object3D as its children (such as your lights, objects, etc). — Leeft

Manuel Graf Manuel Graf · Accepted Answer · 2017-01-23T09:19:29

I never worked with cannonjs, but was it possible to just add the Cube and the Rigid Body in a Three.Group?

Like

var rigidBody = new CANNON.Body(); // whatever it is for cannon
var model = new THREE.Group();

// your model goes here
model.add(new THREE.Mesh(
  new THREE.BoxGeometry(1,1,1), 
  new THREE.MeshStandardMaterial()
));

model.add(rigidBody);
scene.add(model);

This way, if you rotate the parent element model, the rigidbody should update the same way.

THREE.js How to calculate rotation position on a 3D circle?

1 Answers