Adjust the placement of an object within cannon.js based on its local orientation

Question

Adjust the placement of an object within cannon.js based on its local orientation

I am trying to move a body in cannon.js with a quaternion rotation by 100 units along a vector relative to its local rotation. However, I'm facing a problem with the positioning.

For example:

let body = new CANNON.Body({ mass: 0 });
body.quaternion.setFromAxisAngle(new CANNON.Vec3(0,0,1),(2*Math.PI)/6);
body.position.set(0,0,100); //this is incorrect

Using body.position.set(x, y, z); seems to move the body relative to the world instead of the local rotation. I believe I need to incorporate a vector after applying the quaternion, but I'm struggling to find clear guidance in the cannon.js documentation.

javascript three.js cannon.js

Answer 1

Answer №1

Utilize the vmult method of Quaternion to perform vector rotation and use Vec3#add to add the resulting vector to the position.

let body = new CANNON.Body({ mass: 0 });
body.quaternion.setFromAxisAngle(new CANNON.Vec3(0,0,1),(2*Math.PI)/6);
let relativeVector = new CANNON.Vec3(0,0,100);

// Rotate the relative vector using quaternion and store the result in the same vector
body.quaternion.vmult(relativeVector, relativeVector);

// Add the position and relative vector, and store the result in body.position
body.position.vadd(relativeVector, body.position);

Answer 2

Utilize the vmult method of Quaternion to perform vector rotation and use Vec3#add to add the resulting vector to the position.

let body = new CANNON.Body({ mass: 0 });
body.quaternion.setFromAxisAngle(new CANNON.Vec3(0,0,1),(2*Math.PI)/6);
let relativeVector = new CANNON.Vec3(0,0,100);

// Rotate the relative vector using quaternion and store the result in the same vector
body.quaternion.vmult(relativeVector, relativeVector);

// Add the position and relative vector, and store the result in body.position
body.position.vadd(relativeVector, body.position);

Adjust the placement of an object within cannon.js based on its local orientation

Answer №1

Similar questions

"Utilize ajax and a modal window to insert a new record

Having trouble with radio button validation in JS?

What is the best way to make IE 10 display a pointer instead of an I-bar for a select list?

Exploring table iteration in Angular 7

Swirling hues transforming into #000000 upon second attempt

Using the jQuery before() method to manipulate form fields

Error message: React router issue (Prop type failure: Prop `children` supplied to `Switch` is invalid, expecting a ReactNode.)

Show the flex items arranged horizontally

Following the same occurrence using varying mouse clicks

Retrieving the value of a submit button within the `onSubmit` event handler in a React application

The functionality of loading JSON is not working properly in ePub3

Puppeteer causes Express to stop listening to incoming requests

Obtain a URL using JavaScript's regular expressions

I keep encountering an issue with Nodemailer where it keeps throwing the error message "TypeError [ERR_INVALID_ARG_TYPE]: The "chunk" argument needs to be a string or.."

Using Three.js to display a CSS3D-rendered DIV in full-screen mode

Exiting the window event

I'm curious if there is a specific jQuery event that triggers right before an element loses focus or right before the next element gains focus

Incorporating video into plane geometry with Three.js: A step-by-step guide

Discovering the process of mapping transitions in MUI

Issue with VueUse useStorage function failing to update stored object properties