0

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?

enter image description here

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.

Nicky
  • 3,607
  • 6
  • 33
  • 64
  • 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 Sep 05 '16 at 23:21
  • @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 Sep 05 '16 at 23:58
  • Other possible options I can think of: move the pivot point, or [do the math yourself](http://stackoverflow.com/a/839931/3755747) (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 Sep 06 '16 at 06:39

1 Answers1

0

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.

Manuel Graf
  • 462
  • 5
  • 20