クォータニオンを使用してメッシュを正しくトゥイーンする方法はありますか？

Question

私はトゥイーン関数（から大きな助けを借りてSO）をトゥイーンメッシュに結合しました...そしてうまくいきます。

私の質問は、私がやっているやり方が非効率で、より良い解決策を探していると感じています。

たとえば、関数を呼び出すたびにメッシュをクローンしています。これはrotateOnAxis（）を呼び出すことができるためです。私が望むのは、メッシュ回転が軸​​上で増加するターゲットクォータニオンです...しかし、私はそれを得るより良い方法を見つけることができませんでした。

いつもどおり、大変助かりました。

PS。本当に愛するthreejs !!!

function tweenRot(obj, axis, angle){ 
     var actp = obj.clone(); // seems wasteful 
     actp.rotateOnAxis(axis, angle); 
     var targq = actp.quaternion; 

     var qm = new THREE.Quaternion(); 
     var curQuaternion = obj.quaternion; 

     var tween = new TWEEN.Tween({t:0}).to({t:1}, 500) 
      .easing(TWEEN.Easing.Sinusoidal.InOut) 
      .onUpdate(function(){ 
       THREE.Quaternion.slerp(curQuaternion, targq, qm, this.t); 
       qm.normalize(); 
       obj.rotation.setFromQuaternion(qm) 
      }); 

     tween.start(); 
    } 

Answer 1

あなたは回転とangleのaxisを指定することにより、オブジェクトの回転をトゥイーンします。あなたはそのようなものにすることができます

var tweenRotateOnAxis = function() { 

    // axis is assumed to be normalized 
    // angle is in radians 

    var qStart = new THREE.Quaternion(); 
    var o = new THREE.Object3D(); 

    return function tweenRotateOnAxis(object, axis, angle) { 

     var qEnd, time = { t: 0 }; 

     // start quaternion 
     qStart.copy(object.quaternion); 

     // end quaternion 
     o.quaternion.copy(qStart); 
     o.rotateOnAxis(axis, angle); 
     qEnd = o.quaternion; 

     // tween 
     new TWEEN.Tween(time) 
      .to({ t : 1 }, 1000) 
      .easing(TWEEN.Easing.Linear.EaseNone) 
      .onUpdate(function() { 
       THREE.Quaternion.slerp(qStart, qEnd, object.quaternion, time.t); 
      }) 
      .onComplete(function() { 
       object.quaternion.copy(qEnd); // to be exact 
      }) 
      .start(); 

    }; 

}(); 

これは、あなたがそれを繰り返し呼び出す場合でも、合理的に効率的でなければなりません。回転はオブジェクト空間内にあります。

レンダリングループでTWEEN.update()に電話することを忘れないでください。

three.js r.75