threejs之updateWorldMatrix的实现原理

首先我们需要定义几个额外的概念，包括表示位置、旋转、和缩放的类，以及一个用于表示4x4矩阵并执行矩阵运算的类。这个函数的目的是更新一个物体在世界空间中的位置，考虑到它的局部变换（位置、旋转、缩放）以及它的父对象的世界矩阵（如果有的话）。

首先，让我们定义一些基础的数学工具类，包括 Vector3, Quaternion（用于表示旋转）, 和 Matrix4。

class Vector3 {
    constructor(public x: number = 0, public y: number = 0, public z: number = 0) {}

    set(x: number, y: number, z: number): Vector3 {
        this.x = x;
        this.y = y;
        this.z = z;
        return this;
    }
}

class Quaternion {
    constructor(public x: number = 0, public y: number = 0, public z: number = 0, public w: number = 1) {}

    // Quaternion相关的方法，如乘法、归一化等，这里省略
}

class Matrix4 {
    elements: number[] = [
        1, 0, 0, 0,
        0, 1, 0, 0,
        0, 0, 1, 0,
        0, 0, 0, 1
    ];

    // Matrix4相关的操作方法，如乘法、逆矩阵等，这里省略
    makeRotationFromQuaternion(q: Quaternion): Matrix4 {
        // 根据Quaternion更新Matrix4以表示旋转，实现省略
        return this;
    }

    makeTranslation(x: number, y: number, z: number): Matrix4 {
        this.elements[12] = x;
        this.elements[13] = y;
        this.elements[14] = z;
        return this;
    }

    multiply(mat: Matrix4): Matrix4 {
        // 实现矩阵乘法，更新当前矩阵，实现省略
        return this;
    }

    // 更多Matrix4的方法，如setScale等
}

class Object3D {
    position: Vector3 = new Vector3();
    rotation: Quaternion = new Quaternion();
    scale: Vector3 = new Vector3(1, 1, 1);
    matrix: Matrix4 = new Matrix4();
    matrixWorld: Matrix4 = new Matrix4();
    parent: Object3D | null = null;
    children: Object3D[] = [];

    updateMatrix(): void {
        // 创建平移矩阵，将对象的位置应用到矩阵中
    const translationMatrix = new Matrix4().makeTranslation(this.position.x, this.position.y, this.position.z);

    // 创建旋转矩阵，将对象的旋转应用到矩阵中
    const rotationMatrix = new Matrix4().makeRotationFromQuaternion(this.rotation);

    // 注意：这里简化了缩放的处理，您可以根据需要扩展该部分

    // 将平移和旋转矩阵相乘，得到对象的本地变换矩阵
    this.matrix = translationMatrix.multiply(rotationMatrix);
    }

    updateWorldMatrix(updateParents: boolean = false, updateChildren: boolean = true): void {
        if (updateParents && this.parent) {
            this.parent.updateWorldMatrix(true, false);
        }

        this.updateMatrix();

        if (this.parent) {
            this.matrixWorld = new Matrix4().multiplyMatrices(this.parent.matrixWorld, this.matrix);
        } else {
            this.matrixWorld = this.matrix;
        }

        if (updateChildren) {
            for (const child of this.children) {
                child.updateWorldMatrix(false, true);
            }
        }
    }

    add(child: Object3D): void {
        if (child.parent) {
            throw new Error("Child already has a parent");
        }
        this.children.push(child);
        child.parent = this;
    }
}

// 使用示例
const parent = new Object3D();
parent.position.set(1, 2, 3);

const child = new Object3D();
parent.add(child);

parent.updateWorldMatrix();

这个实现提供了一个基础框架，从中可以看出 updateWorldMatrix 方法如何根据对象的局部变换（位置、旋转、缩放）以及父对象的世界矩阵来更新对象的世界矩阵。这个方法首先更新自身的局部矩阵，然后如果有父对象，它会和父对象相乘。