3とTween.js - 望ましくない回転ですが、このジンバルロックですか？

Question

私はこのトゥイーン

  behaviour.tween = new TWEEN.Tween(behaviour.origin).to(behaviour.target,behaviour.offsetTime * 1000) 
      .onUpdate(function(){ 

       hotspot.position.x = behaviour.origin.pX; 
       hotspot.position.y = behaviour.origin.pY; 
       hotspot.position.z = behaviour.origin.pZ; 
       hotspot.rotation.x = behaviour.origin.rX; 
       hotspot.rotation.y = behaviour.origin.rY; 
       hotspot.rotation.z = behaviour.origin.rZ; 
       hotspot.scale.set(behaviour.origin.scale,behaviour.origin.scale,behaviour.origin.scale); 
       hotspot.opacity = behaviour.origin.opacity; 

      }). 

とここ

Position (X:57.36, Y:-8.31, Z:93.78) 
Rotation (X:-3.05, Y:-0.55, Z:-3.10) 

にここ

Position (X:82.22, Y:-8.31, Z:57.75) 
Rotation (X:-3.00, Y:-0.95, Z:-3.02) 

からオブジェクトをトゥイーンだし、それがシーン全体に移動するオブジェクトがz軸に沿って回転します。

これはジンバルロックと思われますか？もしそうなら、これを回避する方法は何ですか？

Answer 1

トランジションにQuaternionを使用することは常に安全です。私にとってはslerpを使わずにTween.jsを使うだけでうまくいきます。

// excerpt from my code 
var q = obj.quaternion.clone().multiply(new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1,0,0), theta)); 

new TWEEN.Tween(obj.quaternion) 
    .to(q, time) 
    .onUpdate(function() { object.quaternion.copy(this); }) // onUpdate isn't really needed in this case 
    .start(); 

だから、あなたのために、それはこのような何かで動作します：

behaviour.origin.position = new THREE.Vector3(82.22, -8.31, 57.75); 
behaviour.origin.quaternion = ew THREE.Quaternion().setFromEuler(new THREE.Euler(-3.00, -0.95, 3.02)); 

behaviour.target.position = new THREE.Vector(57.36, -8.31, 93.78); 
behaviour.target.quaternion = ew THREE.Quaternion().setFromEuler(new THREE.Euler(3.05, -0.55, 3.10)); 

new TWEEN.Tween(behaviour.origin) 
    .to(behaviour.target, behaviour.offsetTime * 1000) 
    .onUpdate(function() { 
    hotspot.position.copy(behaviour.origin.position); 
    hotspot.quaternion.copy(behaviour.origin.quaternion); 
    }) 
    .start(); 

---

UPDATE： [OK]を、slerp()を使用するadvicedされるが、それ以外の場合は、奇妙な行動を引き起こすことができ、あまりにも。

behaviour.origin.position = new THREE.Vector3(82.22, -8.31, 57.75); 
behaviour.origin.quaternion = ew THREE.Quaternion().setFromEuler(new THREE.Euler(-3.00, -0.95, 3.02)); 

behaviour.target.position = new THREE.Vector(57.36, -8.31, 93.78); 
behaviour.target.quaternion = ew THREE.Quaternion().setFromEuler(new THREE.Euler(3.05, -0.55, 3.10)); 

behaviour.origin.t = 0; 
behaviour.target.t = 1; 

new TWEEN.Tween(behaviour.origin) 
    .to(behaviour.target, behaviour.offsetTime * 1000) 
    .onUpdate(function() { 
    hotspot.position.copy(behaviour.origin.position); 
    THREE.Quaternion.slerp(behaviour.origin.quaternion, behaviour.target.quaternion, hotspot.quaternion, behaviour.origin.t); 
    }) 
    .start();