0

Problem

In three.js scene i have LineLoop across 6 points located as plane on picture. And i heed to rotate it around vector A'B' (green rounded arrow).

My pipline:

  1. Calc points vectors
let pointVector = new Vector3().fromArray([x, y, z])
  1. Set vector for movemnet
const move = new Vector3(xMove, yMove, zMove)
  1. Set vector for rotation direction
const zNormalVector = new THREE.Vector3(0, 0, 1)
  1. Set angle for rotation
const zAngle = Math.PI/6
  1. Calc quaternion with vector and angle
const zQuaternion = new Quaternion().setFromAxisAngle(zNormalVector, zAngle)
  1. Add move vector to every points from 1.
pointVector.add(move)
  1. Apply quaternion to every points from 1.
pointVector.applyQuaternion(zQuaternion)

With the operation "movement" everything is ok, but the operation "rotation" puzzled me.

Obviously, the exact execution of this algorithm results in rotation along the red arrow instead of the green one.

Specifying a rotation vector with an increased coordinate Y leads to the fact that the axis of rotation is tilted, not moved, and I did not find how to set the starting point of the vector in the documentation.

Perhaps a similar problem can be solved through the .worldToLocal and .localToWorld methods, but Vector3 is not an instance of Object3D

UPD 1 In docs i found: A direction and length in 3D space. In three.js the length will always be the Euclidean distance (straight-line distance) from (0, 0, 0) to (x, y, z) and the direction is also measured from (0, 0, 0) towards (x, y, z).

It means my question has no answer. But how i can rotate my object like green arrow?

Zakhar Skorokhodov
  • 197
  • 10
  • 1
    It is best to show your complete code, not describe it. A live example is helpful. Perhaps this answer will help: https://stackoverflow.com/a/32038265/1461008. – WestLangley Aug 26 '20 at 15:06
  • Theory from [Mauricio Cele Lopez Belon](https://stackoverflow.com/a/63606107/6899390) with implementation from [WestLangley](https://stackoverflow.com/questions/63596950/#comment112465840_63596950) works. Proof in next comment. – Zakhar Skorokhodov Aug 27 '20 at 00:53
  • https://jsfiddle.net/zakharsk/uhp72o4j – Zakhar Skorokhodov Aug 27 '20 at 00:54

1 Answers1

1

What you want is a translated rotation i.e., a rotation around an axis that is not passing thru the origin.

There are several ways to do that, one simple way is the following. Let T be translation operator, R be rotation operator and T^-1 the inverse translation i.e., the same as T but in the opposite direction. Then the transform that you want is:

TranslatedRotation = T * R * T^-1

The * is the composition of operators (or composition of functions), in matrix language it can be the "matrix product".

So the given a point x, the rotation around translated axis is

x' = T * R * T^-1 * x

The implementation of T and R can be arbitrary. T can be a vector addition and R a quaternion.

Mauricio Cele Lopez Belon
  • 1,422
  • 1
  • 7
  • 9