Does anyone know how I can rotate a CannonJS (the physics library) CANNON.RigidBody? I'm trying to make the object rotate with the camera, so both are facing the same direction. I know I have to modify the quaternion, but this doesn't work correctly:

mPlayer.objectBody.quaternion.set(0, mPlayer.yawObject.rotation.y, 0, 1);

It also changes the Y-position of the object, not just the rotation.

Here's a demo (WASD to move the red rectangle - which is what I want to rotate)
Here's the main script

At the moment it automatically rotates based on the physics. Thanks for the help!

EDIT:
I've sort of got it working now. But it doesn't rotate fully (the whole 360 degrees) and the angle it rotates isn't quite right. If someone could take a look and see what's wrong I would really appreciate it! :)

Same link as before but the rectangle/body is below the camera now, so I can see if it's rotating correctly.

I added this code to make it rotate:

mPlayer.objectBody.quaternion.y = mPlayer.yawObject.rotation.y;
mPlayer.objectBody.quaternion.w = 1;
mPlayer.objectBody.quaternion.normalize();  

---

To save you looking through the code, mPlayer.yawObject.rotation.y is set in the MouseMove event:

var onMouseMove = function ( event ) {
    var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
    var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;

    mPlayer.yawObject.rotation.y -= movementX * 0.002;
    mPlayer.pitchObject.rotation.x -= movementY * 0.002;

    mPlayer.pitchObject.rotation.x = Math.max( - PI_2, Math.min( PI_2, mPlayer.pitchObject.rotation.x ) );
};

Thanks again!

Does anyone know how I can rotate a CannonJS (the physics library) CANNON.RigidBody? I'm trying to make the object rotate with the camera, so both are facing the same direction. I know I have to modify the quaternion, but this doesn't work correctly:

mPlayer.objectBody.quaternion.set(0, mPlayer.yawObject.rotation.y, 0, 1);

It also changes the Y-position of the object, not just the rotation.

Here's a demo (WASD to move the red rectangle - which is what I want to rotate)
Here's the main script

At the moment it automatically rotates based on the physics. Thanks for the help!

EDIT:
I've sort of got it working now. But it doesn't rotate fully (the whole 360 degrees) and the angle it rotates isn't quite right. If someone could take a look and see what's wrong I would really appreciate it! :)

Same link as before but the rectangle/body is below the camera now, so I can see if it's rotating correctly.

I added this code to make it rotate:

mPlayer.objectBody.quaternion.y = mPlayer.yawObject.rotation.y;
mPlayer.objectBody.quaternion.w = 1;
mPlayer.objectBody.quaternion.normalize();  

---

To save you looking through the code, mPlayer.yawObject.rotation.y is set in the MouseMove event:

var onMouseMove = function ( event ) {
    var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
    var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;

    mPlayer.yawObject.rotation.y -= movementX * 0.002;
    mPlayer.pitchObject.rotation.x -= movementY * 0.002;

    mPlayer.pitchObject.rotation.x = Math.max( - PI_2, Math.min( PI_2, mPlayer.pitchObject.rotation.x ) );
};

Thanks again!

• javascript
• rotation
• three.js
• quaternions
• cannon.js

Share Improve this question Follow edited Apr 9, 2013 at 0:29 Joey Morani asked Apr 7, 2013 at 21:06 Joey MoraniJoey Morani 26.6k3333 gold badges8989 silver badges132132 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

Solved the problem with help from the Cannon.JS developer. I'm now using:

mPlayer.objectBody.quaternion.setFromAxisAngle(new CANNON.Vec3(0,1,0), mPlayer.yawObject.rotation.y);