Question

Old Fiddle

顺便说一句，我的小提琴的键盘控制如下：

使用箭头键进行导航。

向上和向下调整围绕x轴的旋转。

左右调整围绕y轴的旋转。

按'z'或'x'围绕z轴旋转

更新

好吧，看起来我越来越接近我的目标，但仍有一些问题。

我尝试使用不同的旋转方法，一切正常，直到你尝试围绕x轴旋转（向上或向下箭头）。可以在this newly updated fiddle中对此进行测试。

除此之外，一些轮换可以看作是有效的。

例如：

- 围绕x轴旋转90°（向上或向下箭头 - 您将看到顶部或底部）

- 围绕y轴旋转一点然后回到原点（左箭头或右箭头）

---- *如果对象处于绝对原点（成功），您应该看到旋转的行为与z轴旋转相同

- 围绕z轴旋转一点，然后返回原点（键盘上的z或x）

---- *如果对象处于绝对原点（成功），您应该看到旋转的行为与y轴旋转一样

结束示例......

下一个例子......

可以进行测试以证明失败：

- 围绕y轴旋转90°（左侧或右侧箭头 - 您将看到左侧或右侧）

- 围绕z轴旋转一点，然后返回原点（键盘上的z或x）

---- *如果对象处于绝对原点（成功），您应该看到旋转的行为与x轴旋转相同

- 围绕x轴旋转一点然后回到原点（向上或向下箭头）

---- *如果对象处于绝对原点，旋转应该表现为z轴的行为，但事实并非如此。相反，它的行为与原点的x轴旋转一样（失败！）

再次，我仍然非常困惑为什么这会失败，如果有人可以提供帮助，我将非常感激。谢谢！

更多信息..

负责代码轮换的区域如下所示。我理解这可能很难理解，但仅仅通过查看rotate2函数，它应该是非常自我解释我究竟在做什么。我正在迭代网格线的起点和终点，并将（x，y，z）坐标发送到旋转函数，然后将返回应用到网格线。

function rotate2(Xr, Yr, Zr, x, y, z)
{
    //Cosine
    this.C = function(v)
    {
        return Math.cos(v);
    }.bind(this);

    //negative cosine
    this.nC = function(v)
    {
        return (Math.cos(v)) * -1;
    }.bind(this);

    //Sine
    this.S = function(v)
    {
        return Math.sin(v);
    }.bind(this);

    //negative sine
    this.nS = function(v)
    {
        return (Math.sin(v)) * -1;
    }.bind(this);

    //First Matrix row
    //{
       var aa = (this.C(Yr)) * (this.C(Zr));
       var ab = (this.nC(Yr)) * (this.S(Zr));
       var ac = this.S(Yr);
    //}

    //Second Matrix Row
    //{
       var ba = (this.S(Xr) * this.S(Yr) * this.C(Zr)) + (this.C(Xr) * this.S(Zr));
       var bb = (this.nS(Xr) * this.S(Yr) * this.S(Zr)) + (this.C(Xr) * this.C(Zr));
       var bc = this.nS(Xr) * this.C(Yr);
    //}

    //Third Matrix Row
    //{
       var ca = (this.nC(Xr) * this.S(Yr) * this.C(Zr)) + (this.S(Xr) * this.S(Zr));
       var cb = (this.C(Xr) * this.S(Yr) * this.S(Zr)) + (this.S(Xr) * this.C(Zr));
       var cc = this.C(Xr) * this.C(Yr);
    //}

    //__          __   ___   ____
    //|aa   ab   ac|   |x|   |nX|
    //|ba   bb   bc| * |y| = |nY|
    //|ca   cb   cc|   |z|   |nZ|


    var nX = (x * aa) + (y * ab) + (z * ac);
    var nY = (x * ba) + (y * bb) + (z * bc);
    var nZ = (x * ca) + (y * cb) + (z * cc);

    var rtrnObj = new Object();

    rtrnObj.x = nX;
    rtrnObj.y = nY;
    rtrnObj.z = nZ;

    return rtrnObj;
}

function drawGrid()
{
    var placeObject;

    var axis;
    var plane;
    var line;
    var point;
    var multiplex;

    for(axis in Grid)
    {
        for(plane in Grid[axis])
        {
            for(line in Grid[axis][plane])
            {
                for(point in Grid[axis][plane][line])
                {
                    placeObject = rotate2(object_info.grid.x_rotation, object_info.grid.y_rotation, object_info.grid.z_rotation, Grid[axis][plane][line][point].x, Grid[axis][plane][line][point].y, Grid[axis][plane][line][point].z);

                    //Here, I am centering the coordinates on the screen.
                    //If you were to watch in the debugger, the values for the
                    //coordinates will range from (+) my maximum dimesion
                    //(in this example, my maximum dimension is 3 inches) to
                    //(-) my maximum dimension. I add this to the center point
                    // of the screen in order to center the coordinates

                    placeObject.z += (object_info.grid.center.z - player.z);
                    //This is used for distancing, even though I am not 
                    //encorporating vanishing points in this example.

                    placeObject.x += object_info.grid.center.x;

                    placeObject.y += object_info.grid.center.y;


                    //Convert To Pixels
                    //{
                        placeObject.x *= 12 * ppi;
                        placeObject.y *= 12 * ppi;
                    //}

                    //Convert To screen coordinates
                    //{
                        placeObject.x += (View.w / 2);
                        placeObject.y = (placeObject.y * -1) + (View.h / 2);
                    //}

                    if(point === 'a')
                    {
                        Lines[(axis + plane + line)].setAttributeNS(null, "x1", placeObject.x.toString());
                        Lines[(axis + plane + line)].setAttributeNS(null, "y1", placeObject.y.toString());
                    }
                    else
                    {
                        Lines[(axis + plane + line)].setAttributeNS(null, "x2", placeObject.x.toString());
                        Lines[(axis + plane + line)].setAttributeNS(null, "y2", placeObject.y.toString());
                        Lines[(axis + plane + line)].style.stroke = '#000000';
                    }
                }
            }
        }
    }
}

说明我的旋转功能的矩阵can be found here，第118页，图9.1

3D Rotation Matrix

3D旋转：围绕旋转轴旋转

0 个答案: