THREE.js - Quaternion Offset / Calibration

Question

I'm working with a sensor to control the rotation of a hand model in THREE. I want to be able to apply an offset (on button click) to the hand model to adjust for any initial sensor position discrepancies.

I'm using quaternions and i'm not entirely clear on how to do this.

It seems that the approach should be to get the current position, get the difference between the current position and the home position [0,0,0,1], and apply this offset to the live sensor values.

I've tried this so far:

// on button click 
quaternionOffset.copy(quaternion.multiplyQuaternions(quaternion.inverse(), startPosition))
// on update
quaternion.multiply(quaternionOffset)

start
initial sensor position (example)

start
home position (fingers pointing forward)

Thank you for the help

score 1 · Answer 1 · answered Sep 05 '18 at 00:47

1

I think your approach is correct, just make sure you don't accidentally apply the home quaternion inside the input quaternion :

var inputQuaternion = new THREE.Quaternion();
var homeQuaternion = new THREE.Quaternion();

document.addEventListener('click', function () {
  // set the current rotation as home
  homeQuaternion.copy(inputQuaternion).inverse();
});

function updateFromSensor(quaternion) {
  inputQuaternion.copy(quaternion);
  object.quaternion.multiplyQuaternions(inputQuaternion, homeQuaternion);
}

answered Sep 05 '18 at 00:47

neeh

2,777
3
24
32

Thanks neeh, the above solution still doesn't produce the results i'm going for. For example, when applying the above operations, the hand model moves to conjugate / inverse of the quaternion. https://i.imgur.com/ktisBJj.png I think i'm missing something in terms of taking the current position of the model, getting the difference between that position and the home position (0,0,0,1) and getting the offset from that difference. I'm just not sure how to do that with quaternions. – Andrej Sep 07 '18 at 20:57
Can you upload a screenshot of the hand model in its rest pose? (no rotation) – neeh Sep 10 '18 at 14:13

score 0 · Answer 2 · answered Mar 23 '19 at 20:57

let baseQuaternion = new THREE.Quaternion();
let diff;

function changeHandler(value) {
  if (!diff) {
    diff = baseQuaternion.multiply(value.inverse());
  }
  let calibrated = new THREE.Quaternion();
  calibrated.multiplyQuaternions(diff, value);
  object.setRotationFromQuaternion(calibrated);
}

Inspired by https://stackoverflow.com/a/22167097/1162838

THREE.js - Quaternion Offset / Calibration

2 Answers2