THREE.js：需要幫助旋轉四元數

Question

我想要了解three.js的四元數，但是對於所有教程，我都無法將它們轉換為我需要的應用程序。 這就是問題：

給定一個以（0,0,0）為中心的球體，我想在球體表面上對一個物體進行角度，該物體充當相機的焦點。 使用鍵盤輸入在曲面上移動和旋轉此點。 將焦點設置到選定的軌道當然很容易，但是保持垂直於表面的正確旋轉逃離了我。 我知道四元數是平滑運動和任意軸旋轉的必要條件，但我不知道從哪里開始。

然后第二部分用焦點旋轉相機偏移。 我找到的片段不再具有所需的效果，因為cameraOffset不繼承旋轉：

var cameraOffset = relativeCameraOffset.clone().applyMatrix4( focalPoint.matrixWorld );
camera.position.copy( focalPoint.position.clone().add(cameraOffset) );
camera.lookAt( focalPoint.position );

更新1：在桿上使用固定攝像頭嘗試並旋轉行星。 但除非我遺漏了一些重要的東西，否則這也會失敗，因為朝向赤道的方向完全傾斜。 （左邊變成前鋒）。 更新中的代碼是：

        acceleration.set(0,0,0);

        if (keyboard.pressed("w")) acceleration.x = 1 * accelerationSpeed;
        if (keyboard.pressed("s")) acceleration.x = -1 * accelerationSpeed;
        if (keyboard.pressed("a")) acceleration.z = 1 * accelerationSpeed;
        if (keyboard.pressed("d")) acceleration.z = -1 * accelerationSpeed;
        if (keyboard.pressed("q")) acceleration.y = 1 * accelerationSpeed;
        if (keyboard.pressed("e")) acceleration.y = -1 * accelerationSpeed;

        velocity.add(acceleration);
        velocity.multiplyScalar(dropOff);
        velocity.max(minV);
        velocity.min(maxV);

        planet.mesh.rotation.x += velocity.x;
        planet.mesh.rotation.y += velocity.y;
        planet.mesh.rotation.z += velocity.z;

所以我仍然願意接受建議。

Answer 1

最后從矩陣和四元數的混合物中找到了解決方案：

    //Setup
    var ux = new THREE.Vector3(1,0,0);
    var uy = new THREE.Vector3(0,1,0);
    var uz = new THREE.Vector3(0,0,1);

    var direction = ux.clone();
    var m4 = new THREE.Matrix4();
    var dq = new THREE.Quaternion(); //direction quad base
    var dqq;   //final direction quad
    var dq2 = new THREE.Quaternion();
    dq2.setFromAxisAngle(uz,Math.PI/2); //direction perpendicular rot

        //Update
        if (velocity.length() < 0.1) return;
        if (velocity.x) { focalPoint.translateY( velocity.x ); }
        if (velocity.y) { focalPoint.translateX( velocity.y ); }
        //create new direction from focalPoint quat, but perpendicular
        dqq = dq.clone().multiply(focalPoint.quaternion).multiply(dq2);

        velocity.multiplyScalar(dropOff);
        //forward direction vector          
        direction = ux.clone().applyQuaternion(dqq).normalize();
        //use Matrix4.lookAt to align focalPoint with the direction
        m4.lookAt(focalPoint.position, planet.mesh.position, direction);
        focalPoint.quaternion.setFromRotationMatrix(m4);

        var cameraOffset = relativeCameraOffset.clone();
        cameraOffset.z = cameraDistance;

        cameraOffset.applyQuaternion(focalPoint.quaternion);

        camera.position = focalPoint.position.clone().add(cameraOffset) ;
        //use direction for camera rotation as well
        camera.up = direction;
        camera.lookAt( focalPoint.position );

這是它的核心。 它在行星周圍平移（並且有一些延伸旋轉）而沒有桿是一個問題。

Answer 2

我不太明白你的問題。 但是為了幫助，我在一個球體上繪制一條船，代碼如下。

var geometry = new THREE.ShapeGeometry(shape);
var translation = new THREE.Matrix4().makeTranslation(boat.position.x, boat.position.y, boat.position.z);
var rotationZ = new THREE.Matrix4().makeRotationZ(-THREE.Math.degToRad(boat.cap));
var rotationX = new THREE.Matrix4().makeRotationX(-THREE.Math.degToRad(boat.latitude));
var rotationY = new THREE.Matrix4().makeRotationY(Math.PI / 2 + THREE.Math.degToRad(boat.longitude));
var roationXY = rotationY.multiply(rotationX);
geometry.applyMatrix(rotationZ);
geometry.applyMatrix(roationXY );
geometry.applyMatrix(translation);

1. 首先，我在Z上應用旋轉來定義船首
2. 然后，我在Y，X上應用旋轉以將船垂直於球體表面設置
3. 最后，我應用翻譯將船放在球體上

輪換順序很重要