这篇说一下如何构造魔方，主要包括魔方几何体的构造及纹理贴图。以下论述皆以三阶魔方为例，三阶魔方共有3 x 3 x 3 = 27个小立方体。

构造魔方

在第一篇里面说过，最初模型用的是微软的.x文件格式，由于魔方要实现按层旋转，所以不能将整个模型做成一个.x文件，只能分成若干个小立方体，每个立方体对应一个.x文件。这导致在发布程序的时候也要发布这些模型文件，而且.x文件已经逐渐为微软遗弃，所以就干脆不用了，自己画吧。魔方由27个小立方体构成，所以只要绘制一个小立方体，并复制27分，再将这个27个小立方体按一定顺序堆叠在一起，最后贴上纹理，就可以构成一个完整的魔方了。

一个小立方体包含六个面，由于每个面的纹理可能不同，所以需要逐个面绘制，这样可以方便的为每个面单独设置纹理。

一个面由两个三角形构成，这里采用TriangleStrip的方式进行绘制，只需要指定四个顶点即可，如果是TriangleList，则需要六个顶点。

顶点结构

下面来分析一下顶点的数据结构，首先要有一个位置坐标（位置是一个顶点必须要包含的信息），其次，为了添加光照效果，还需要一个法向量。最后，为了实现纹理贴图，需要有纹理坐标。所以一个完整的顶点有以下三部分构成：

位置
法向量
纹理坐标

用一个结构体来表示顶点，如下：

struct Vertex
{
    float  x,  y,  z; // position
    float nx, ny, nz; // normal
    float  u,  v;     // texture
};

定义顶点数组

对于任意一个立方体，它的边长是固定的，所以只要给定立方体8个顶点中任意一个，就可以推算出其他的顶点坐标，这里使用立方体的左下角顶点来计算其他顶点。假设左下角顶点坐标为P(x,y,z)，正方形边长为length，那么有如下关系成立。

顶点数组按面定义，顺序如下：

Front face
Back face
Left face
Right face
Top face
Bottom face

在定义任意一个面的四个顶点时，从左下角点开始按顺时针方向至右下角点结束，如下：

代码如下，解释一下第一行，其他行类似。

x,y,z是位置坐标
0.0f, 0.0f, -1.0f是法向量，法向量垂直于该面指向外。
0.0f, 0.0f是纹理坐标

// Vertex buffer data
Vertex vertices[] =
{
    // Front face
    {          x,           y,           z,  0.0f,  0.0f, -1.0f, 0.0f, 0.0f}, // 0
    {          x, y + length_,           z,  0.0f,  0.0f, -1.0f, 1.0f, 0.0f}, // 1
    {x + length_, y + length_,           z,  0.0f,  0.0f, -1.0f, 1.0f, 1.0f}, // 2
    {x + length_,           y,           z,  0.0f,  0.0f, -1.0f, 0.0f, 1.0f}, // 3

    // Back face
    {x + length_,           y, z + length_,  0.0f,  0.0f,  1.0f, 0.0f, 0.0f}, // 4
    {x + length_, y + length_, z + length_,  0.0f,  0.0f,  1.0f, 1.0f, 0.0f}, // 5
    {          x, y + length_, z + length_,  0.0f,  0.0f,  1.0f, 1.0f, 1.0f}, // 6
    {          x,           y, z + length_,  0.0f,  0.0f,  1.0f, 0.0f, 1.0f}, // 7

    // Left face
    {          x,           y, z + length_, -1.0f,  0.0f,  0.0f, 0.0f, 0.0f}, // 8
    {          x, y + length_, z + length_, -1.0f,  0.0f,  0.0f, 1.0f, 0.0f}, // 9
    {          x, y + length_,           z, -1.0f,  0.0f,  0.0f, 1.0f, 1.0f}, // 10
    {          x,           y,           z, -1.0f,  0.0f,  0.0f, 0.0f, 1.0f}, // 11

    // Right face 
    {x + length_,           y,           z,  1.0f,  0.0f,  0.0f, 0.0f, 0.0f}, // 12
    {x + length_, y + length_,           z,  1.0f,  0.0f,  0.0f, 1.0f, 0.0f}, // 13
    {x + length_, y + length_, z + length_,  1.0f,  0.0f,  0.0f, 1.0f, 1.0f}, // 14
    {x + length_,           y, z + length_,  1.0f,  0.0f,  0.0f, 0.0f, 1.0f}, // 15

    // Top face
    {          x, y + length_,           z,  0.0f,  1.0f,  0.0f, 0.0f, 0.0f}, // 16
    {          x, y + length_, z + length_,  0.0f,  1.0f,  0.0f, 1.0f, 0.0f}, // 17
    {x + length_, y + length_, z + length_,  0.0f,  1.0f,  0.0f, 1.0f, 1.0f}, // 18
    {x + length_, y + length_,           z,  0.0f,  1.0f,  0.0f, 0.0f, 1.0f}, // 19

    // Bottom face
    {x + length_,           y,           z,  0.0f, -1.0f,  0.0f, 0.0f, 0.0f}, // 20
    {x + length_,           y, z + length_,  0.0f, -1.0f,  0.0f, 1.0f, 0.0f}, // 21
    {          x,           y, z + length_,  0.0f, -1.0f,  0.0f, 1.0f, 1.0f}, // 22
    {          x,           y,           z,  0.0f, -1.0f,  0.0f, 0.0f, 1.0f}, // 23
};

层的编号

层的编号主要用来确定旋转那一层，层的编号依如下顺序进行。

X轴，从左到右，依次为0，1，2层
Y轴，从下到上，依次为3，4，5层
Z轴，从后至前，依次为6，7，8层

实际上编号都是由各个坐标轴的负方向到正方向依次递增，因为DirectX使用左手系，所以Z轴垂直屏幕向内为正，这与OpenGL正好相反，如果是OpenGL的话，需要将678层颠倒一下。

小立方体编号

小立方体编号是初始化小立方体数组时的顺序，在本程序中不以立方体编号来确定哪些立方体要旋转，因为这样比较麻烦，在旋转之后需要更新编号，而且扩展性不好。小立方体编号按上图中6,7,8号层依次进行。顺序从左到右，从下到上，如下图所示（注意，这里只标出了能看见的立方体，看不见的可以按顺序计算出来）

面的编号

给面编号的原因是，当鼠标点击魔方时，需要确定当前拾取的是哪个面，确定了面以后，再根据鼠标的位置来确定旋转那一层，后续的篇章有详细介绍。面的编号按如下规则。下图中只有三个面可见，看不见的面可以推算出来。

Front face - 0
Back face - 1
Left face - 2
Right face - 3
Top face - 4
Bottom face - 5

纹理贴图

纹理布局如下：前白，后黄，左红，右橙，上绿，下蓝。

最初纹理是从图片生成的，后来发现魔方的颜色都是简单颜色，可以省去加载图片的步骤，直接在内存中创建纹理即可。函数CreateTexture有三个参数，分别是纹理宽度，高度及颜色，该函数内部调用D3DXCreateTexture来创建纹理。纹理创建好以后，调用Lock函数锁定之，然后使用memcpy进行颜色填充。

LPDIRECT3DTEXTURE9 D3D9::CreateTexture(int texWidth, int texHeight, D3DCOLOR color)
{
    LPDIRECT3DTEXTURE9 pTexture;

    HRESULT hr = D3DXCreateTexture(d3ddevice_, 
        texWidth, 
        texHeight, 
        0, 
        0, 
        D3DFMT_A8R8G8B8,  // 4 bytes for a pixel 
        D3DPOOL_MANAGED, 
        &pTexture);

    if (FAILED(hr))
    {
        MessageBox(NULL, L"Create texture failed", L"Error", 0);
    }

    // Lock the texture and fill in color
    D3DLOCKED_RECT lockedRect;
    hr = pTexture->LockRect(0, &lockedRect, NULL, 0);
    if (FAILED(hr))
    {
        MessageBox(NULL, L"Lock texture failed!", L"Error", 0);
    }

    DWORD sideColor = 0xff000000; // the side line color

    int side_width = 10;

    // Calculate number of rows in the locked Rect
    int rowCount = (texWidth * texHeight * 4 ) / lockedRect.Pitch;

    for (int i = 0; i < texWidth; ++i)
    {
        for (int j = 0; j < texHeight; ++j)
        {
            int index = i * rowCount + j;

            int* pData = (int*)lockedRect.pBits;

            if (i <= side_width || i >= texWidth - side_width 
                || j <= side_width || j >= texHeight - side_width)
            {
                memcpy(&pData[index], &sideColor, 4);
            }
            else
            {
                memcpy(&pData[index], &color, 4);
            }
        }
    }

    pTexture->UnlockRect(0);

    return pTexture;
}

调用上面的函数依次创建6个面的颜色纹理及魔方内部的纹理（旋转时可见，白色）。

void RubikCube::InitTextures()
{
    DWORD colors[] = 
    {
        0xffffffff, // White,   front face
        0xffffff00, // Yellow,    back face
        0xffff0000, // Red,        left face
        0xffffa500,    // Orange,    right face
        0xff00ff00, // Green,    top face
        0xff0000ff, // Blue,    bottom face
    };

    // Create face textures
    for(int i = 0; i < kNumFaces; ++i)
    {
        face_textures_[i] = d3d9->CreateTexture(texture_width_, texture_height_, colors[i]);
    }

    // Create inner texture
    inner_textures_ = d3d9->CreateInnerTexture(texture_width_, texture_height_, 0xffffffff);

    Cube::SetFaceTexture(face_textures_, kNumFaces);
    Cube::SetInnerTexture(inner_textures_);
}

绘制

在RubikCube类里面依次初始化所有的小立方体。

void RubikCube::InitCubes()
{// Get unit cube length and gaps between layers
    float length = cubes[0].GetLength();
    float cube_length = cubes[0].GetLength();
    float gap = gap_between_layers_;

    // Calculate half face length
    float half_face_length = face_length_ / 2;


    for (int i = 0; i < kNumLayers; ++i)
    {
        for (int j = 0; j < kNumLayers; ++j)
        {
            for (int k = 0; k < kNumLayers; ++k)
            {
                // calculate the front-bottom-left corner coodinates for current cube
                // The Rubik Cube's center was the coordinate center, but the calculation assume the front-bottom-left corner
                // of the Rubik Cube was in the coodinates center, so move half_face_length for each coordinates component.
                float x = i * (cube_length + gap) - half_face_length;
                float y = j * (cube_length + gap) - half_face_length;
                float z = k * (cube_length + gap) - half_face_length;

                // calculate the unit cube index in inti_pos
                int n = i + (j * kNumLayers) + (k * kNumLayers * kNumLayers);

                // Initiliaze cube n
                cubes[n].Init(D3DXVECTOR3(x, y, z));
            }
        }
    }
}

绘制一个小立方体，pIB是一个index buffer数组，共有六个元素，每个元素代表一个面的index buffer。常量kNumFaces_=6。在绘制每个面的时候要先设置这个面的纹理。

void Cube::Draw()
{
    // Setup world matrix for current cube
    d3d_device_->SetTransform(D3DTS_WORLD, &world_matrix_) ;

    // Draw cube by draw every face of the cube
    for(int i = 0; i < kNumFaces_; ++i)
    {
        if(textureId[i] >= 0)
        {
            d3d_device_->SetTexture(0, pTextures[textureId[i]]);
        }
        else
        {
            d3d_device_->SetTexture(0, inner_texture_);
        }

        d3d_device_->SetStreamSource(0, vertex_buffer_, 0, sizeof(Vertex));
        d3d_device_->SetIndices(pIB[i]) ;
        d3d_device_->SetFVF(VERTEX_FVF);

        d3d_device_->DrawIndexedPrimitive(D3DPT_TRIANGLESTRIP, 0, 0, 24, 0, 2);
    }
}

绘制整个魔方，kNumCubes是一个魔方中小立方体的总数，对于三阶魔方来说是3 x 3 x 3 = 27。

//draw all unit cubes to build the Rubik cube
for(int i = 0; i < kNumCubes; i++)
{
    cubes[i].Draw();
}

程序下载

RubikCube

上次发布的时候有一个严重的bug，在旋转的时候会出现丢失某一层的情况，现已修复，欢迎各位继续捉虫。

Haypp coding!

本文转自zdd博客园博客，原文链接：http://www.cnblogs.com/graphics/p/3044236.html，如需转载请自行联系原作者

用DirectX实现魔方（二）

构造魔方

顶点结构

定义顶点数组

层的编号

小立方体编号

面的编号

纹理贴图

绘制

程序下载

热门文章

最新文章

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

用DirectX实现魔方（二）

构造魔方

顶点结构

定义顶点数组

层的编号

小立方体编号

面的编号

纹理贴图

绘制

程序下载

热门文章

最新文章

相关电子书

相关实验场景