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

您希望通过指定axis轮播和angle来补间对象的轮播。你可以这样：

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

如何使用四元数正确补间网格？

1 个答案: