p5.j??s如何正確計算點相對于原點的3D旋轉

我真的花了好幾個小時試圖解決這個問題，但沒有結果，我錯過了什么？

這里遵循我的代碼：

//font for WEBGL
var robotoFont;
var dotId = 0;

var rotating = true;

var orbits = [];
var dotsData = [];

function preload() {
    robotoFont = loadFont('./assets/Roboto-Regular.ttf');
}

function setup() {
    createCanvas(windowWidth, windowHeight, WEBGL);
    textFont(robotoFont);
    background(0);

    let orbit1 = new Orbit(0, 0, 0, 0.5, 0.5, 0.5);
    orbit1.obj.push(new Dot(0, 0));
    orbits.push(orbit1);
    // let orbit2 = new Orbit(90, 45, 0);
    // orbit2.obj.push(new Dot(0, 0));
    // orbits.push(orbit2);
}

function draw() {
    angleMode(DEGREES);
    background(0);
    orbitControl();

    let len = 200;
    fill('white');
    stroke('white');
    sphere(2);
    stroke('red');
    line(0, 0, 0, len, 0, 0);
    text('x', len, 0)
    stroke('green');
    line(0, 0, 0, 0, len, 0);
    text('y', 0, len)
    push();
    rotateX(90);
    stroke('yellow');
    line(0, 0, 0, 0, len, 0);
    text('z', 0, len)
    pop();

    dotsData = [];

    orbits.forEach(o => o.draw());

    textSize(14);
    push();
    for (let i = 0; i < 2; i  ) {
        let yPos = -(windowHeight / 2)   15;
        for (let i = 0; i < dotsData.length; i  ) {
            let [id, pos, pos3d] = dotsData[i];
            let [x1, y1, z1] = [pos[0].toFixed(0), pos[1].toFixed(0), pos[2].toFixed(0)];
            let [x2, y2, z2] = [pos3d.x.toFixed(0), pos3d.y.toFixed(0), pos3d.z.toFixed(0)];
            text(`${id}: (${x1}, ${y1}, ${z1}) -> (${x2}, ${y2}, ${z2})`, -windowWidth / 2   5, yPos);
            yPos  = 18;
        }

        rotateX(-90);
    }
    pop();

}

function mouseClicked() {
    // controls.mousePressed();
}

function keyPressed() {
    // controls.keyPressed(keyCode);
    if (keyCode === 32) {
        rotating = !rotating;
    }
}

class Orbit {
    constructor(x, y, z, xr, yr, zr) {
        this.obj = [];
        this.currentRot = [
            x ? x : 0,
            y ? y : 0,
            z ? z : 0
        ]
        this.rot = [
            xr ? xr : 0,
            yr ? yr : 0,
            zr ? zr : 0
        ]
    }

    draw() {
        push();

        if (rotating) {
            this.currentRot[0]  = this.rot[0];
            this.currentRot[1]  = this.rot[1];
            this.currentRot[2]  = this.rot[2];
        }

        rotateY(this.currentRot[1]);
        rotateX(this.currentRot[0]);
        rotateZ(this.currentRot[2]);

        noFill();
        stroke('white');
        ellipse(0, 0, 300, 300);

        for (let i = 0; i < this.obj.length; i  ) {
            let o = this.obj[i];
            o.draw();
            dotsData.push([o.id, o.getPosition(), this.#get3DPos(o)]);
        }

        pop();
    }

    #get3DPos(o) {
        let [x, y, z] = o.getPosition();
        let w = 0;
        let rotX = this.currentRot[0] * PI / 180;
        let rotY = this.currentRot[1] * PI / 180;
        let rotZ = this.currentRot[2] * PI / 180;

        let rotation = Quaternion.fromEuler(rotZ, rotX, rotY, 'ZXY').conjugate();
        [x, y, z] = rotation.rotateVector([x, y, z]);

        return createVector(x, y, z);
    }
}


class Dot {

    constructor(angle) {
        this.id =   dotId;
        this.x = cos(angle) * 150;
        this.y = sin(angle) * 150;
    }

    draw() {
        push();
        fill('gray');
        translate(this.x, this.y);
        noStroke();
        sphere(15);
        pop();
    }

    getPosition() {
        return [this.x, this.y, 0];
    }
}

它在 stackoverflow 中不起作用，因為我需要像字體這樣的本地資產。

這里的作業代碼：https ://editor.p5js.org/cigno5/sketches/_ZVq0kjJL

uj5u.com熱心網友回復：

我終于整理好了。我真的不明白為什么會這樣作業，但我根本不需要四元數，而且我使用矩陣乘法在 3 軸上應用旋轉的第一個直覺是正確的。

我在第一個實體中確實錯過了（并使我的生活變得悲慘）是矩陣乘法不是可交換的。這意味著在 x、y 和 z 軸上應用旋轉不等同于在 z、y 和 x 上應用相同的旋轉角度。

作業解決方案通過 3 個簡單的步驟實作：

1. 使用向量將四元數替換為矩陣乘法（方法#resize2）
2. 以 ZYX 順序旋轉繪圖平面
3. 以 XYZ 順序進行旋轉數學運算

//font for WEBGL
var robotoFont;
var dotId = 0;

var rotating = true;

var orbits = [];
var dotsData = [];

function preload() {
    robotoFont = loadFont('./assets/Roboto-Regular.ttf');
}

function setup() {
    createCanvas(windowWidth, windowHeight, WEBGL);
    textFont(robotoFont);
    background(0);

    let orbit1 = new Orbit(0, 0, 0, 0.5, 0.5, 0.5);
    orbit1.obj.push(new Dot(0, 0.5));
    orbits.push(orbit1);
    // let orbit2 = new Orbit(90, 45, 0);
    // orbit2.obj.push(new Dot(0, 0));
    // orbits.push(orbit2);
}

function draw() {
    angleMode(DEGREES);
    background(0);
    orbitControl();

    let len = 200;
    fill('white');
    stroke('white');
    sphere(2);
    stroke('red');
    line(0, 0, 0, len, 0, 0);
    text('x', len, 0)
    stroke('green');
    line(0, 0, 0, 0, len, 0);
    text('y', 0, len)
    push();
    rotateX(90);
    stroke('yellow');
    line(0, 0, 0, 0, len, 0);
    text('z', 0, len)
    pop();

    dotsData = [];

    orbits.forEach(o => o.draw());

    textSize(14);
    push();
    for (let i = 0; i < 2; i  ) {
        let yPos = -(windowHeight / 2)   15;
        for (let i = 0; i < dotsData.length; i  ) {
            let [id, pos, pos3d] = dotsData[i];
            let [x1, y1, z1] = [pos[0].toFixed(0), pos[1].toFixed(0), pos[2].toFixed(0)];
            let [x2, y2, z2] = [pos3d.x.toFixed(0), pos3d.y.toFixed(0), pos3d.z.toFixed(0)];
            text(`${id}: (${x1}, ${y1}, ${z1}) -> (${x2}, ${y2}, ${z2})`, -windowWidth / 2   5, yPos);
            yPos  = 18;
        }

        rotateX(-90);
    }
    pop();

}

function mouseClicked() {
    // controls.mousePressed();
}

function keyPressed() {
    // controls.keyPressed(keyCode);
    if (keyCode === 32) {
        rotating = !rotating;
    }
}

class Orbit {
    constructor(x, y, z, xr, yr, zr) {
        this.obj = [];
        this.currentRot = [
            x ? x : 0,
            y ? y : 0,
            z ? z : 0
        ]
        this.rot = [
            xr ? xr : 0,
            yr ? yr : 0,
            zr ? zr : 0
        ]
    }

    draw() {
        push();

        if (rotating) {
            this.currentRot[0]  = this.rot[0];
            this.currentRot[1]  = this.rot[1];
            this.currentRot[2]  = this.rot[2];
        }

        rotateZ(this.currentRot[2]);
        rotateY(this.currentRot[1]);
        rotateX(this.currentRot[0]);

        noFill();
        stroke('white');
        ellipse(0, 0, 300, 300);

        for (let i = 0; i < this.obj.length; i  ) {
            let o = this.obj[i];
            o.draw();
            dotsData.push([o.id, o.getPosition(), this.#get3DPos(o)]);
        }

        pop();
    }

    #get3DPos(o) {
        let [x, y, z] = o.getPosition();
        let pos = createVector(x, y, z);
        pos = this.#rotate2(pos, createVector(1, 0, 0), this.currentRot[0]);
        pos = this.#rotate2(pos, createVector(0, 1, 0), this.currentRot[1]);
        pos = this.#rotate2(pos, createVector(0, 0, 1), this.currentRot[2]);
        return pos;
    }

    //https://stackoverflow.com/questions/67458592/how-would-i-rotate-a-vector-in-3d-space-p5-js
    #rotate2(vect, axis, angle) {
        // Make sure our axis is a unit vector
        axis = p5.Vector.normalize(axis);

        return p5.Vector.add(
            p5.Vector.mult(vect, cos(angle)),
            p5.Vector.add(
                p5.Vector.mult(
                    p5.Vector.cross(axis, vect),
                    sin(angle)
                ),
                p5.Vector.mult(
                    p5.Vector.mult(
                        axis,
                        p5.Vector.dot(axis, vect)
                    ),
                    (1 - cos(angle))
                )
            )
        );
    }

}


class Dot {

    constructor(angle, speed) {
        this.id =   dotId;
        this.angle = angle;
        this.speed = speed
    }

    draw() {
        this.angle  = this.speed;
        this.x = cos(this.angle) * 150;
        this.y = sin(this.angle) * 150;

        push();
        fill('gray');
        translate(this.x, this.y);
        noStroke();
        sphere(15);
        pop();
    }

    getPosition() {
        return [this.x, this.y, 0];
    }
}

現在它就像一個魅力：

https://editor.p5js.org/cigno5/sketches/PqB9CEnBp

標籤：数学 3d 回转 p5.j​​s 四元数

上一篇：我們如何用數學方程對演算法問題進行建模？

下一篇：將人員分配到組中以使他們盡可能少地見面