What is the process for rotating a vector around a random axis?

Question

What is the process for rotating a vector around a random axis?

Imagine I have an imaginary axis created by two vectors. For instance, one vector points upwards at x = 10:

const startingPosition = new Vector3(10, 0, 0)
const endPosition = new Vector3(10, 0, 1)

To find the direction of this axis, you can do the following:

const axisDirection = new Vector3().subVectors(endPosition, startingPosition).normalize()

Now, how do I go about rotating a vector (for example, Vector3(50, 0, 0)) around this original axis?

I attempted using

Vector3.applyAxisAngle(axisDirection , radians)

, but since the axis was normalized, the rotation occurred around the world center (0, 0) instead of around the initial position of the axis.

javascript three.js rotation

Answer 1

Answer №1

I managed to solve this problem by identifying the precise point on the axis around which the point rotates. I utilized a helpful solution from this answer and converted the pseudocode into typescript:

getPivotPoint(pointToRotate: Vector3, axisStart: Vector3, axisEnd: Vector3) {
    const d = new Vector3().subVectors(axisEnd, axisStart).normalize()
    const v = new Vector3().subVectors(pointToRotate, axisStart)
    const t = v.dot(d)
    const pivotPoint = axisStart.add(d.multiplyScalar(t))
    return pivotPoint
  }

Following @Ouroborus's guidance, I then proceeded to translate the point, apply the rotation, and revert the translation:

rotatePointAroundAxis(pointToRotate: Vector3, axisStart: Vector3, axisEnd, radians: number) {
    const axisDirection = new Vector3().subVectors(axisEnd, axisStart).normalize()
    const pivotPoint = getPivotPoint(pointToRotate, axisStart, axisEnd)
    const translationToWorldCenter = new Vector3().subVectors(pointToRotate, pivotPoint)
    const translatedRotated = translationToWorldCenter.clone().applyAxisAngle(axisDirection, radians)
    const destination = pointToRotate.clone().add(translatedRotated).sub(translationToWorldCenter)
    return destination
  }

The above code is functioning smoothly, so I am documenting it here for my own reference and for others who may benefit from it.

Answer 2

I managed to solve this problem by identifying the precise point on the axis around which the point rotates. I utilized a helpful solution from this answer and converted the pseudocode into typescript:

getPivotPoint(pointToRotate: Vector3, axisStart: Vector3, axisEnd: Vector3) {
    const d = new Vector3().subVectors(axisEnd, axisStart).normalize()
    const v = new Vector3().subVectors(pointToRotate, axisStart)
    const t = v.dot(d)
    const pivotPoint = axisStart.add(d.multiplyScalar(t))
    return pivotPoint
  }

Following @Ouroborus's guidance, I then proceeded to translate the point, apply the rotation, and revert the translation:

rotatePointAroundAxis(pointToRotate: Vector3, axisStart: Vector3, axisEnd, radians: number) {
    const axisDirection = new Vector3().subVectors(axisEnd, axisStart).normalize()
    const pivotPoint = getPivotPoint(pointToRotate, axisStart, axisEnd)
    const translationToWorldCenter = new Vector3().subVectors(pointToRotate, pivotPoint)
    const translatedRotated = translationToWorldCenter.clone().applyAxisAngle(axisDirection, radians)
    const destination = pointToRotate.clone().add(translatedRotated).sub(translationToWorldCenter)
    return destination
  }

The above code is functioning smoothly, so I am documenting it here for my own reference and for others who may benefit from it.

What is the process for rotating a vector around a random axis?

Answer №1

Similar questions

attempting to employ the method of copying by converting result into a JSON string

What is the best way to incorporate a mute/unmute button into this automatically playing audio?

Guide on determining if the value in a JSON object is a string or an array in Node.js

Transferring Data in Vue.js Components through Props

Exploring the integration of query parameters in Postman using mongoose

Is there a new option to replace cascade shadow now that it has been taken out of three.js?

React/MUI Popover not aligning properly due to anchorPosition issue

Utilizing the variable $this outside of an object context within an Ajax function

When the JSON array is converted into a string, it appears as undefined

Aligning a quadrilateral to be perpendicular to a sphere through rotation

Using React to map through a nested array within an object

Adding a property during runtime to an object does not display in the current "this" context

Accessing the parent scope from a directive within a nested ng-repeat in AngularJs

How can I position text in the top right corner of a v-card's v-img component in Vuetify.js?

Having trouble with the Ajax load function not functioning in your HTML code?

What is the best way to utilize a portion of the data retrieved from an API call as the output for a function?

Separating Main Page Content from Sidebar for Independent Scrolling

Managing a large number of records in a for loop on a Node.js server can be challenging, especially when dealing with nearly

Ways to reload the page following the submission of a form

When attempting to use the search bar to filter in ReactJs, an error occurs: TypeError - Unable to access properties of undefined (specifically 'filter')