如何从头开始组成一个具有人类可读角度的旋转矩阵?

opengl math matrix 3d


有一件事一直阻碍着我做3D编程,那就是无法理解数学的工作原理。在编程流程中,我可以用方法和函数来进行数学运算,然后对我来说,这一切都很清楚,也很有逻辑性,但在数学符号中,我就是无法从数学中找出头或尾。

我一直在看网站,看一些研究所的视频,试图解释这个问题,但他们都是用数学符号,而我只是迷失在其中,我的大脑无法将其翻译成可以理解的东西。我可能在这方面有缺陷。

另外,只是使用别人的代码不是我的兴趣,我想了解它背后的机制和逻辑。我很乐意使用别人的代码,但我真的想了解它的工作原理。

问题

您能以简单的术语向我解释,而无需数学符号,仅编程符号/函数/伪代码,如何在所有三个轴上实现矩阵变换?

理想情况下,我想要的是写一个方法/对象的材料/理解,在这个方法/对象中,我可以定义类似于glRotate的3个轴的角度,来旋转我所拥有的四边形/三边形集合。(我正在尝试对一个立方体形状进行3D旋转的编程,而不需要OpenGL函数来帮我完成,因为每次显示列表中的东西发生变化时,都要通过一次绘制调用来完成。)

我做了什么?

我曾尝试制作一个90度变换函数以掌握数学原理,但完全无法制作一个理论上应该是最简单的适当矩阵。您可以在http://jsfiddle.net/bLfg0tj8/5/上看到我的失败尝试。

Vec3 = function(x,y,z) {
    this.x = x;
    this.y = y;
    this.z = z;
}
Matrix = function Matrix() {
    this.matrixPoints = new Array();    
    this.rotationPoint = new Vec3(0,0,0);
    this.rotationAngle = 90;
}
Matrix.prototype.addVector = function(vector) {
    this.matrixPoints.push(vector);
}
Matrix.prototype.setRotationPoint = function(vector) {
    this.rotationPoint = vector; 
}
Matrix.prototype.setRotationAngle = function(angle) {
    this.rotationAngle = angle;
}
Matrix.prototype.populate = function() {
    translateToOrigin =     [[1,0,0-this.rotationPoint.x],
                                  [0,1,0-this.rotationPoint.y],
                                  [0,0,0-this.rotationPoint.z]];
    rotationMatrix =         [[0,-1,0],
                                  [0,1,0],
                                  [0,0,1]];
    translateEnd =         [[1,0,this.rotationPoint.x],
                                  [0,1,this.rotationPoint.y],
                                  [0,0,this.rotationPoint.z]];
    currentColumn = 0;
    currentRow = 0;
    this.combomatrix = this.mergeMatrices(this.mergeMatrices(translateEnd,rotationMatrix),
                                          translateToOrigin);
}
Matrix.prototype.transform = function() {
    newmatrix = new Array();
    for(c = 0;c<this.matrixPoints.length;c++) {
        newmatrix.push(this.applyToVertex(this.matrixPoints[c]));
    }
    return newmatrix;
}
Matrix.prototype.applyToVertex = function(vertex) {
    ret = new Vec3(vertex.x,vertex.y,vertex.z);
    ret.x = ret.x + this.combomatrix[0][0] * vertex.x +
            this.combomatrix[0][1] * vertex.y +
            this.combomatrix[0][2] * vertex.z;
    
    ret.y = ret.y + this.combomatrix[1][0] * vertex.x +
            this.combomatrix[1][1] * vertex.y +
            this.combomatrix[1][2] * vertex.z;
    
    ret.z = ret.z + this.combomatrix[2][0] * vertex.x +
            this.combomatrix[2][1] * vertex.y +
            this.combomatrix[2][2] * vertex.z;
    return ret;
}
Matrix.prototype.mergeMatrices = function(lastStep, oneInFront) {
    step1 = [[0,0,0],[0,0,0],[0,0,0]];
    step1[0][0] =   lastStep[0][0] * oneInFront[0][0] + 
                    lastStep[0][1] * oneInFront[1][0] + 
                    lastStep[0][2] * oneInFront[2][0];
    
    step1[0][1] =   lastStep[0][0] * oneInFront[0][1] + 
                    lastStep[0][1] * oneInFront[1][1] + 
                    lastStep[0][2] * oneInFront[2][1];
    
    step1[0][2] =   lastStep[0][0] * oneInFront[0][2] + 
                    lastStep[0][1] * oneInFront[1][2] + 
                    lastStep[0][2] * oneInFront[2][2];
    //============================================================
    step1[1][0] =   lastStep[1][0] * oneInFront[0][0] + 
                    lastStep[1][1] * oneInFront[1][0] + 
                    lastStep[1][2] * oneInFront[2][0];
    
    step1[1][1] =   lastStep[1][0] * oneInFront[0][1] + 
                    lastStep[1][1] * oneInFront[1][1] + 
                    lastStep[1][2] * oneInFront[2][1];
    
    step1[1][2] =   lastStep[1][0] * oneInFront[0][2] + 
                    lastStep[1][1] * oneInFront[1][2] + 
                    lastStep[1][2] * oneInFront[2][2];
    //============================================================
    step1[2][0] =   lastStep[2][0] * oneInFront[0][0] + 
                    lastStep[2][1] * oneInFront[1][0] + 
                    lastStep[2][2] * oneInFront[2][0];
    
    step1[2][1] =   lastStep[2][0] * oneInFront[0][1] + 
                    lastStep[2][1] * oneInFront[1][1] + 
                    lastStep[2][2] * oneInFront[2][1];
    
    step1[2][2] =   lastStep[2][0] * oneInFront[0][2] + 
                    lastStep[2][1] * oneInFront[1][2] + 
                    lastStep[2][2] * oneInFront[2][2];
    return step1;
}
Matrix.prototype.getCurrentMatrix = function() {
    return this.matrixPoints;
}
myvectors = [new Vec3(50,50,0), new Vec3(20,80,0), new Vec3(80, 80, 0)];

function drawVectors(vectors,color) {
    for(c=0;c<vectors.length;c++) {
        document.getElementById("whoa").innerHTML += '<div style="color:'+color+';position:absolute;left:'+vectors[c].x+'px; top:'+vectors[c].y+'px;z-index:'+vectors[c].z+';">('+c+').</div>';
    }
}
matrix = new Matrix();
for(c=0;c<myvectors.length;c++) {
    matrix.addVector(myvectors[c]);
}
matrix.setRotationPoint(new Vec3(50,70,0));
matrix.populate();
somematrix = matrix.transform();
drawVectors(matrix.getCurrentMatrix(),"lime"); // draw current matrix that was hand coded
drawVectors([matrix.rotationPoint],'white'); // draw rotation point
drawVectors(somematrix,"red"); // transformed matrix... somehow two points merge
<div id="whoa" style="position:relative;top:50px;left:150px;background-color:green;color:red;width:400px;height:300px;">
    &nbsp;
</div>

绿色的文字是原来的三角形,白色的点是中心点,红色的点是变形失败的点(我想,因为它没有对准中心点)。我当时的教程以为我是如何把矩阵组合成一个组合矩阵的,但我想是我在哪里搞砸了。

就像我说的那样,我真的是真的很难理解数学记号和说话。无济于事的是,大部分老师都会跳过部分讲解。我一个人花了2个小时才明白,当乘法矩阵时,你需要把每一步都加起来,而不是一味地继续乘法。解释的时候也是如此。

我要/想要合作的实际例子

例如,我有一个立方体,从位于世界中的波面obj文件中加载了一个立方体,其位置为

x = 50
y = 100
z = 200

这个立方体是用四边形和一些紫外线贴图画出来的。这里没有问题。它渲染得很好,所有的纹理都能正确显示。

这些是用四边形绘制的立方体的每个 "面 "的位置坐标。

// Front face
-1.0, -1.0,  1.0,
 1.0, -1.0,  1.0,
 1.0,  1.0,  1.0,
-1.0,  1.0,  1.0,

// Back face
-1.0, -1.0, -1.0,
-1.0,  1.0, -1.0,
 1.0,  1.0, -1.0,
 1.0, -1.0, -1.0,

// Top face
-1.0,  1.0, -1.0,
-1.0,  1.0,  1.0,
 1.0,  1.0,  1.0,
 1.0,  1.0, -1.0,

// Bottom face
-1.0, -1.0, -1.0,
 1.0, -1.0, -1.0,
 1.0, -1.0,  1.0,
-1.0, -1.0,  1.0,

// Right face
 1.0, -1.0, -1.0,
 1.0,  1.0, -1.0,
 1.0,  1.0,  1.0,
 1.0, -1.0,  1.0,

// Left face
-1.0, -1.0, -1.0,
-1.0, -1.0,  1.0,
-1.0,  1.0,  1.0,
-1.0,  1.0, -1.0

所以这一切都很好。但如果我想让这个立方体沿x轴旋转90度,绕z轴旋转45度怎么办?我不能使用glRotate,因为当我把数据传给tesselator对象的时候,我不能通过opengl函数对它进行任何矩阵变换,因为它只是接收数据,而不是实际的渲染。

数据的存储方式如下:

WaveFrontObject()
   |
   |-> Groups(String groupname)
        |
        |-> Faces()
              |
              |-> Vertex(float x, float y, float z)[] 
              |-> Float UVmap[] corresponding to each vertex
              |-> drawFace() // Draws the face as a quad or triangle

所以上述我给出的每一个坐标都是作为波面对象的面存储在 "立方体 "组中。

当立方体被添加到方程器中时,它被翻译成世界中正确的坐标,它的渲染是正常的。

但是,它的渲染效果始终是一样的。如果我想让它以一个角度渲染,我必须在这个时候做一个单独的波面对象才能做到这一点。在我看来,如果用一些数学方法就能解决这个问题,那就太疯狂了。

答案中需要

  1. 逐步解释如何建立一个翻译矩阵,并尝试给我解释一下数学知识。
  2. 解释如何将平移矩阵应用到四边形/三边形面中的四边形/三边形的平移矩阵,当它们保持围绕着它们的位置中心的方向时,如何应用平移矩阵

    x=50.5 y=100.5 z=200.5

  3. 一些例子/伪代码配合解释。

用来解释的编程语言并不重要,只要是C族中的编程语言就可以了。

请尽量远离数学符号/语言。我不知道什么是αβ,thetha是什么,我知道x轴,y轴和z轴是什么。我知道什么是角,但我不知道数学家为它找到的名字。

如果你想使用数学名称,请向我解释一下它们在三维世界/代码中是什么,以及它们是如何形成/计算的。

我只是想做一个方法/对象的方法/对象,其思路类似于

Matrix.transformVertices(vertices[], 90deg x, 45 deg y, 0 deg z);



Answer 1 Spektre


所以问题实际上是了解4x4均匀变换矩阵

没有了数学,唯一剩下的就是几何图形/意义,这对人类的抽象/理解来说要好得多。

1.那么4x4矩阵是什么?

它是某种笛卡尔坐标系的代表,它是由()组成的。

  1. 3 个基向量(每个轴一个)红色,绿色,蓝色

    因此,如果红色,绿色,蓝色向量彼此垂直,则坐标系是正交的。如果它们也是单位矢量,则它是正交的(例如单位矩阵)。

  2. 原点灰色

  3. 投影和同侧(矩阵的未标记底部)

    这部分是有仅用于一次使旋转和平移,因此点使用必须是均匀的,可在形式手段 (x,y,z,w=1) 为分和 (x,y,z,w=0) 为方向向量。如果只是 (x,y,z) ,则矩阵将为 3x3 ,不足以进行转换。我不会使用不容易从几何上解释的任何投影。

这种布局来自OpenGL表示法,那里也有转置表示(向量是行而不是列)

现在,如何将任何点转换到/从这个坐标系中的任何点。

g=M*l;
l=Inverse(M)*g;

where:

  • M 是变换矩阵
  • lM 个局部坐标系点(LCS)
  • g 是全局坐标系点(GCS)

对于转置版本(DirectX),它是:

l=M*g;
g=Inverse(M)*l;

那是因为转置的正交旋转矩阵本身也是逆的

OpenGL transform matrix

2.如何形象化

是的,您可以绘制矩阵数字,但是乍一看它们没有意义,尤其是在数字变化的情况下,请绘制轴矢量,如上图所示。其中每个轴是一条从 originorigin + line_size*axis_vector 的线+ line_size * axis_vector

3.如何构造

只需计算轴矢量和原点,然后将它们放入矩阵即可。为确保正交性利用叉积(但请谨慎对待乘员的顺序以使用正确的方向)

4.效果

  • 旋转是通过旋转轴线来完成的,所以你可以通过参数圆方程计算每个轴.....
  • 缩放比例的方法是将axises乘以比例系数来进行缩放
  • 歪斜只是使用非垂直轴线

5.旋转

对于大多数情况下,采用的是增量旋转法。有两种类型

  • 局部旋转 M'=M*rotation_matrix 像您将控制飞机,汽车或玩家一样绕局部坐标轴旋转...大多数引擎/游戏不使用这些并以欧拉角来伪造它,这是一种廉价的解决方案(有很多怪癖和问题),因为大多数使用OpenGL的人甚至都不知道这是可能的,而是堆叠 glRotate/glTranslate 调用的列表...

  • 全局旋转 M'=Inverse(Inverse(M)*rotation_matrix) 绕全局坐标系轴旋转。

其中 rotation_matrix 是任何标准旋转变换矩阵。

如果你有不同的矩阵布局(转位),那么局部和全局的旋转是反过来计算的......

您还可以从以下 3 角度计算您的 rotation_matrix

rotation_matrix=rotation_around_x(ax)*rotation_around_y(ay)*rotation_around_z(az);

请参阅Wiki旋转矩阵 Rx,Ry,RzBasic rotations 中获取3D Rx,Ry,Rz。如您所见,它们实际上只是单位圆参数方程。乘法顺序更改角度如何收敛到目标位置。这称为欧拉角,我不使用它(我集成了阶跃变化,如果做得好,它没有任何限制,更不用说它更简单了)。

总之,如果你需要的话,你可以将变换矩阵转换为欧拉角相对来说比较容易看到。

6.旋转

如果要使用 glRotate ,则应改用四元数,因为那是绕轴旋转而不是3个角度!有解决方法:

  1. 为该轴创建变换矩阵 N
  2. 然后将矩阵 M 转换为它
  3. 旋转 N
  4. 然后将 MN 转换回全局坐标

或者你可以使用Rodrigues_rotation_formula代替

在这种情况下,要将矩阵与矩阵进行相互转换,只需将轴转换为点并将原点保持原样即可,但是 N 的原点必须为(0,0,0)!否则,转换后的向量必须改为 w=0

7.用法

变革是累积性的,这意味着。

  • p'=M1*M2*M3*M4*p;M=M1*M2*M3*M4; p'=M*p

所以,如果你有很多点要变换,那么你可以将所有的变换都预计算成单个矩阵,然后只用它。不需要将点乘以所有后续矩阵。好了,现在的概念。

您应该具有 3 个坐标系:

  • 相机 C
  • world (usually unit matrix)
  • 对象 O (每个对象都有自己的矩阵)

因此,如果具有 8 个顶点 p0,...,p7 的多维数据集,则必须在每个点上执行从对象局部坐标到摄像机局部坐标的转换。一些gfx api会执行其中的一些操作,因此您只需要应用所需的内容,因此您确实需要:

  • p(i)'=inverse(C)*unit*M*p(i);

变换是累积的,单位矩阵不会改变什么。

  • Q=inverse(C)*M; p(i)'=Q*p(i);

因此,在为绘制的对象绘制计算 Q 之前,先获取对象的每个点 p(i) 并计算已变换的 p(i)' ,然后绘制/使用已变换的对象... p(i)' 位于本地摄像机坐标系中(屏幕的x,y),但那里没有透视图,因此在绘制之前,您还可以添加任何投影矩阵并在末尾除以 z 坐标...投影也是累积的,因此它也可以位于 Q

[edit1] C ++示例

//$$---- Form CPP ----
//---------------------------------------------------------------------------
// apart from math.h include you can ignore this machine generated VCL related code
#include <vcl.h>
#pragma hdrstop
#include "win_main.h"
#include <math.h>
//---------------------------------------------------------------------------
#pragma package(smart_init)
#pragma resource "*.dfm"
TMain *Main; // pointer to main window ...
//---------------------------------------------------------------------------
// Here is the important stuff some math first
//---------------------------------------------------------------------------
const double deg=M_PI/180.0;
double divide(double x,double y);
void  matrix_mul       (double *c,double *a,double *b); // c[16] = a[16] * b[16]
void  matrix_mul_vector(double *c,double *a,double *b); // c[ 4] = a[16] * b[ 4]
void  matrix_subdet    (double *c,double *a);           // c[16] = all subdets of a[16]
double matrix_subdet   (          double *a,int r,int s);//      = subdet(r,s) of a[16]
double matrix_det      (          double *a);           //       = det of a[16]
double matrix_det      (          double *a,double *b); //       = det of a[16] and subdets b[16]
void  matrix_inv       (double *c,double *a);           // c[16] = a[16] ^ -1
//---------------------------------------------------------------------------
double divide(double x,double y)
        {
        if (!y) return 0.0;
        return x/y;
        }
void  matrix_mul       (double *c,double *a,double *b)
        {
        double q[16];
        q[ 0]=(a[ 0]*b[ 0])+(a[ 1]*b[ 4])+(a[ 2]*b[ 8])+(a[ 3]*b[12]);
        q[ 1]=(a[ 0]*b[ 1])+(a[ 1]*b[ 5])+(a[ 2]*b[ 9])+(a[ 3]*b[13]);
        q[ 2]=(a[ 0]*b[ 2])+(a[ 1]*b[ 6])+(a[ 2]*b[10])+(a[ 3]*b[14]);
        q[ 3]=(a[ 0]*b[ 3])+(a[ 1]*b[ 7])+(a[ 2]*b[11])+(a[ 3]*b[15]);
        q[ 4]=(a[ 4]*b[ 0])+(a[ 5]*b[ 4])+(a[ 6]*b[ 8])+(a[ 7]*b[12]);
        q[ 5]=(a[ 4]*b[ 1])+(a[ 5]*b[ 5])+(a[ 6]*b[ 9])+(a[ 7]*b[13]);
        q[ 6]=(a[ 4]*b[ 2])+(a[ 5]*b[ 6])+(a[ 6]*b[10])+(a[ 7]*b[14]);
        q[ 7]=(a[ 4]*b[ 3])+(a[ 5]*b[ 7])+(a[ 6]*b[11])+(a[ 7]*b[15]);
        q[ 8]=(a[ 8]*b[ 0])+(a[ 9]*b[ 4])+(a[10]*b[ 8])+(a[11]*b[12]);
        q[ 9]=(a[ 8]*b[ 1])+(a[ 9]*b[ 5])+(a[10]*b[ 9])+(a[11]*b[13]);
        q[10]=(a[ 8]*b[ 2])+(a[ 9]*b[ 6])+(a[10]*b[10])+(a[11]*b[14]);
        q[11]=(a[ 8]*b[ 3])+(a[ 9]*b[ 7])+(a[10]*b[11])+(a[11]*b[15]);
        q[12]=(a[12]*b[ 0])+(a[13]*b[ 4])+(a[14]*b[ 8])+(a[15]*b[12]);
        q[13]=(a[12]*b[ 1])+(a[13]*b[ 5])+(a[14]*b[ 9])+(a[15]*b[13]);
        q[14]=(a[12]*b[ 2])+(a[13]*b[ 6])+(a[14]*b[10])+(a[15]*b[14]);
        q[15]=(a[12]*b[ 3])+(a[13]*b[ 7])+(a[14]*b[11])+(a[15]*b[15]);
        for(int i=0;i<16;i++) c[i]=q[i];
        }
void  matrix_mul_vector(double *c,double *a,double *b)
        {
        double q[3];
        q[0]=(a[ 0]*b[0])+(a[ 1]*b[1])+(a[ 2]*b[2])+(a[ 3]);
        q[1]=(a[ 4]*b[0])+(a[ 5]*b[1])+(a[ 6]*b[2])+(a[ 7]);
        q[2]=(a[ 8]*b[0])+(a[ 9]*b[1])+(a[10]*b[2])+(a[11]);
        for(int i=0;i<3;i++) c[i]=q[i];
        }
void  matrix_subdet    (double *c,double *a)
        {
        double   q[16];
        int     i,j;
        for (i=0;i<4;i++)
         for (j=0;j<4;j++)
          q[j+(i<<2)]=matrix_subdet(a,i,j);
        for (i=0;i<16;i++) c[i]=q[i];
        }
double matrix_subdet    (         double *a,int r,int s)
        {
        double   c,q[9];
        int     i,j,k;
        k=0;                            // q = sub matrix
        for (j=0;j<4;j++)
         if (j!=s)
          for (i=0;i<4;i++)
           if (i!=r)
                {
                q[k]=a[i+(j<<2)];
                k++;
                }
        c=0;
        c+=q[0]*q[4]*q[8];
        c+=q[1]*q[5]*q[6];
        c+=q[2]*q[3]*q[7];
        c-=q[0]*q[5]*q[7];
        c-=q[1]*q[3]*q[8];
        c-=q[2]*q[4]*q[6];
        if (int((r+s)&1)) c=-c;       // add signum
        return c;
        }
double matrix_det       (         double *a)
        {
        double c=0;
        c+=a[ 0]*matrix_subdet(a,0,0);
        c+=a[ 4]*matrix_subdet(a,0,1);
        c+=a[ 8]*matrix_subdet(a,0,2);
        c+=a[12]*matrix_subdet(a,0,3);
        return c;
        }
double matrix_det       (         double *a,double *b)
        {
        double c=0;
        c+=a[ 0]*b[ 0];
        c+=a[ 4]*b[ 1];
        c+=a[ 8]*b[ 2];
        c+=a[12]*b[ 3];
        return c;
        }
void  matrix_inv       (double *c,double *a)
        {
        double   d[16],D;
        matrix_subdet(d,a);
        D=matrix_det(a,d);
        if (D) D=1.0/D;
        for (int i=0;i<16;i++) c[i]=d[i]*D;
        }
//---------------------------------------------------------------------------
// now the object representation
//---------------------------------------------------------------------------
const int pnts=8;
double pnt[pnts*3]=     // Vertexes for 100x100x100 cube centered at (0,0,0)
    {
    -100.0,-100.0,-100.0,
    -100.0,+100.0,-100.0,
    +100.0,+100.0,-100.0,
    +100.0,-100.0,-100.0,
    -100.0,-100.0,+100.0,
    -100.0,+100.0,+100.0,
    +100.0,+100.0,+100.0,
    +100.0,-100.0,+100.0,
    };
const int facs=6;
int fac[facs*4]=        // faces (index of point used) no winding rule
    {
    0,1,2,3,
    4,5,6,7,
    0,1,5,4,
    1,2,6,5,
    2,3,7,6,
    3,0,4,7,
    };
double rep[16]=        // 4x4 transform matrix of object (unit from start) at (0,0,+100)
    {
    1.0,0.0,0.0,  0.0,
    0.0,1.0,0.0,  0.0,
    0.0,0.0,1.0,100.0,
    0.0,0.0,0.0,1.0,
    };
double eye[16]=        // 4x4 transform matrix of camera at (0,0,-150)
    {
    1.0,0.0,0.0,   0.0,
    0.0,1.0,0.0,   0.0,
    0.0,0.0,1.0,-150.0,
    0.0,0.0,0.0,1.0,
    };
//---------------------------------------------------------------------------
// this is how to draw it
//---------------------------------------------------------------------------
void obj(double *pnt,int pnts,int *fac,int facs,double *rep,double *ieye)
    {
    // variables for drawing
    int i;
    double p0[3],p1[3],p2[3],p3[3],m[16],d;
    // gfx api variables (change to your stuff) Main is the main form of this application
    TCanvas *scr=Main->bmp->Canvas;
    double xs2=Main->ClientWidth/2,ys2=Main->ClientHeight/2;
    double v=xs2*tan(30.0*deg); // 60 degree viewing angle perspective projection

    matrix_mul(m,ieye,rep);             // cumulate all needed transforms

    for (i=0;i<facs*4;)                 // go through all faces
        {
        // convert all points of face
        matrix_mul_vector(p0,m,&pnt[fac[i]*3]); i++;
        matrix_mul_vector(p1,m,&pnt[fac[i]*3]); i++;
        matrix_mul_vector(p2,m,&pnt[fac[i]*3]); i++;
        matrix_mul_vector(p3,m,&pnt[fac[i]*3]); i++;
        // here goes perspective divide by z coordinate if needed
        d=divide(v,p0[2]); p0[0]*=d; p0[1]*=d;
        d=divide(v,p1[2]); p1[0]*=d; p1[1]*=d;
        d=divide(v,p2[2]); p2[0]*=d; p2[1]*=d;
        d=divide(v,p3[2]); p3[0]*=d; p3[1]*=d;
        // here is viewport transform (just translate (0,0) to middle of screen in this case
        p0[0]+=xs2; p0[1]+=ys2;
        p1[0]+=xs2; p1[1]+=ys2;
        p2[0]+=xs2; p2[1]+=ys2;
        p3[0]+=xs2; p3[1]+=ys2;
        // draw quad
        // I use VCL GDI TCanvas you use what you have ...
        // and wireframe only to keep this simple (no Z buffer,winding culling,...)
        scr->Pen->Color=clAqua;     // perimeter wireframe
        scr->MoveTo(p0[0],p0[1]);
        scr->LineTo(p1[0],p1[1]);
        scr->LineTo(p2[0],p2[1]);
        scr->LineTo(p3[0],p3[1]);
        scr->LineTo(p0[0],p0[1]);
//      scr->Pen->Color=clBlue;     // face cross to visualy check if I correctly generate the fac[]
//      scr->MoveTo(p0[0],p0[1]);
//      scr->LineTo(p2[0],p2[1]);
//      scr->MoveTo(p1[0],p1[1]);
//      scr->LineTo(p3[0],p3[1]);
        }
    }
//---------------------------------------------------------------------------
//---------------------------------------------------------------------------
void TMain::draw()
    {
    if (!_redraw) return;
    bmp->Canvas->Brush->Color=clBlack;
    bmp->Canvas->FillRect(TRect(0,0,xs,ys));

    // compute inverse of camera need to compute just once for all objects
    double ieye[16];
    matrix_inv(ieye,eye);
    // draw all objects
    obj(pnt,pnts,fac,facs,rep,ieye);

    Main->Canvas->Draw(0,0,bmp);
    _redraw=false;
    }
//---------------------------------------------------------------------------
__fastcall TMain::TMain(TComponent* Owner) : TForm(Owner)
    {
    // window constructor you can ignore this ... (just create a backbuffer bitmap here)
    bmp=new Graphics::TBitmap;
    bmp->HandleType=bmDIB;
    bmp->PixelFormat=pf32bit;
    pyx=NULL;
    }
//---------------------------------------------------------------------------
void __fastcall TMain::FormDestroy(TObject *Sender)
    {
    // window destructor release memory ... also ignoe this
    if (pyx) delete pyx;
    delete bmp;
    }
//---------------------------------------------------------------------------
void __fastcall TMain::FormResize(TObject *Sender)
    {
    // on resize event ... just resize/redraw backbuffer also can ignore this
    xs=ClientWidth;  xs2=xs>>1;
    ys=ClientHeight; ys2=ys>>1;
    bmp->Width=xs;
    bmp->Height=ys;
    if (pyx) delete pyx;
    pyx=new int*[ys];
    for (int y=0;y<ys;y++) pyx[y]=(int*) bmp->ScanLine[y];
    _redraw=true;
    }
//---------------------------------------------------------------------------
void __fastcall TMain::FormPaint(TObject *Sender)
    {
    // repaint event can ignore
    _redraw=true;
    }
//---------------------------------------------------------------------------
void __fastcall TMain::tim_redrawTimer(TObject *Sender)
    {
    // timer event to animate the cube ...
    _redraw=true;

    // rotate the object to see it in motion
    double ang,c,s;

    ang=5.0*deg; c=cos(ang); s=sin(ang);    // rotate baround z by 5 degrees per timer step
    double rz[16]= { c, s, 0, 0,
                    -s, c, 0, 0,
                     0, 0, 1, 0,
                     0, 0, 0, 1 };

    ang=1.0*deg; c=cos(ang); s=sin(ang);    // rotate baround x by 1 degrees per timer step
    double rx[16]= { 1, 0, 0, 0,
                     0, c, s, 0,
                     0,-s, c, 0,
                     0, 0, 0, 1 };
    matrix_mul(rep,rep,rz);
    matrix_mul(rep,rep,rx);

    draw();
    }
//---------------------------------------------------------------------------

这里是它的样子。

cube example

还有背脸删减的GIF动画。

animation

[notes]

如果您有更多的问题,请给我留言.....

[Edit2]经常需要的基本3D矢量操作

如果你不知道如何计算向量运算,如交叉/点积或绝对值等,请看。

// cross product: W = U x V
W.x=(U.y*V.z)-(U.z*V.y)
W.y=(U.z*V.x)-(U.x*V.z)
W.z=(U.x*V.y)-(U.y*V.x)
// dot product: a = (U.V)
a=U.x*V.x+U.y*V.y+U.z*V.z
// abs of vector a = |U|
a=sqrt((U.x*U.x)+(U.y*U.y)+(U.z*U.z))

这里是我的C++向量数学。

static double vector_tmp[3];
double divide(double x,double y) { if ((y>=-1e-30)&&(y<=+1e-30)) return 0.0; return x/y; }
double* vector_ld(double x,double y,double z)          { double *p=vector_tmp; p[0]=x; p[1]=y; p[2]=z; return p;}
double* vector_ld(double *p,double x,double y,double z) {                      p[0]=x; p[1]=y; p[2]=z; return p;}
void  vector_copy(double *c,double *a)         { for(int i=0;i<3;i++) c[i]=a[i];       }
void  vector_abs(double *c,double *a)          { for(int i=0;i<3;i++) c[i]=fabs(a[i]); }
void  vector_one(double *c,double *a)
        {
        double l=divide(1.0,sqrt((a[0]*a[0])+(a[1]*a[1])+(a[2]*a[2])));
        c[0]=a[0]*l;
        c[1]=a[1]*l;
        c[2]=a[2]*l;
        }
void  vector_len(double *c,double *a,double l)
        {
        l=divide(l,sqrt((a[0]*a[0])+(a[1]*a[1])+(a[2]*a[2])));
        c[0]=a[0]*l;
        c[1]=a[1]*l;
        c[2]=a[2]*l;
        }
void  vector_neg(double *c,double *a)          { for(int i=0;i<3;i++) c[i]=-a[i];      }
void  vector_add(double *c,double *a,double *b) { for(int i=0;i<3;i++) c[i]=a[i]+b[i]; }
void  vector_sub(double *c,double *a,double *b) { for(int i=0;i<3;i++) c[i]=a[i]-b[i]; }
void  vector_mul(double *c,double *a,double *b) // cross
        {
        double   q[3];
        q[0]=(a[1]*b[2])-(a[2]*b[1]);
        q[1]=(a[2]*b[0])-(a[0]*b[2]);
        q[2]=(a[0]*b[1])-(a[1]*b[0]);
        for(int i=0;i<3;i++) c[i]=q[i];
        }
void  vector_mul(double *c,double *a,double  b) { for(int i=0;i<3;i++) c[i]=a[i]*b; }
void  vector_mul(double *c,double  a,double *b) { for(int i=0;i<3;i++) c[i]=a*b[i]; }
double vector_mul(         double *a,double *b) { double c=0; for(int i=0;i<3;i++) c+=a[i]*b[i]; return c; } // dot
double vector_len(double *a) { return sqrt((a[0]*a[0])+(a[1]*a[1])+(a[2]*a[2])); }
double vector_len2(double *a) { return (a[0]*a[0])+(a[1]*a[1])+(a[2]*a[2]); }

[Edit3]通过键盘进行摄像机和对象控制的局部旋转

由于最近经常有人问到这个问题,所以这里有我的一些示例性的回答。