在webgl中创建一个长方体(不是一个立方体)

时间:2015-09-23 16:34:42

标签: webgl

任何人都可以为我提供完整的webgl代码来创建一个长方体(而不是一个立方体)??

我试图在init buffers()

中使用以下坐标
    cuboidVertexPositionBuffer1 = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, cuboidVertexPositionBuffer1);
    vertices = [
        //front face
        0.0,      0.0,    0.0,
        0.0154,   0.0,    0.0,    //X
        0.0154,   0.062,  0.0,
        0.0,      0.062,  0.0,


        // Back face
        0.0,      0.0,   -0.04,
        0.0,      0.062, -0.04,    
        0.0154,   0.062, -0.04,
        0.0154,   0.0,   -0.04,


        // Top face
        0.0,      0.062, -0.04,
        0.0,      0.062,  0.0,
        0.0154,   0.062,  0.0,
        0.0154,   0.062, -0.04,


        // Bottom face
        0.0,      0.0,   -0.04,
        0.0154,   0.0,   -0.04,      //Y
        0.0154,   0.0,    0.0,
        0.0,      0.0,    0.0,


        // Right face
        0.0154,   0.0,   -0.04,
        0.0154,   0.062,   -0.04,
        0.0154,   0.062,  0.0,
        0.0154,   0.0,    0.0,


        // Left face
        0.0,      0.0,   -0.04,
        0.0,      0.0,    0.0,
        0.0,      0.062,  0.0,
        0.0,      0.062, -0.04
        ];

       gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    cuboidVertexPositionBuffer1.itemSize = 3;
    cuboidVertexPositionBuffer1.numItems = 24;



    cuboidVertexIndexBuffer1 = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cuboidVertexIndexBuffer1);
    var cubeVertexIndices = [
        0, 1, 2,      0, 2, 3,    // Front face
        4, 5, 6,      4, 6, 7,    // Back face
        8, 9, 10,     8, 10, 11,  // Top face
        12, 13, 14,   12, 14, 15, // Bottom face
        16, 17, 18,   16, 18, 19, // Right face
        20, 21, 22,   20, 22, 23  // Left face
    ];
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(cubeVertexIndices), gl.STATIC_DRAW);
    cuboidVertexIndexBuffer1.itemSize = 1;
    cuboidVertexIndexBuffer1.numItems = 36;

问题出在右侧,当我旋转相机X时,随着旋转度的增加,X与Y合并。

1 个答案:

答案 0 :(得分:-1)

我发现我的错误实际上在坐标中没有任何错误,问题是由于近屏幕剪辑器造成的。我只是改变了它的值并且它有效。