八顶点立方体的法向量

我在玩WEBGL,今天遇到了一个立方体顶点法线的问题。

我用立方体网格检查了代码 from internet 而且效果很好。

事实是,来自互联网的立方体有24个顶点(每个面4个,6个面),我认为这对我的立方体来说非常重要。

FIDDLE MY CUBE | FIDDLE INTERNET CUBE (我的代码在第200行开始)

我发现一个立方体只需要8个顶点和12个索引。 但当我渲染立方体时,屏幕上会出现一个奇怪的形状(因为法线?):

这是与我的立方体几乎相同旋转位置的立方体形式互联网:

这是我的立方体:

var cube = {
    "vertices" : [
        -0.5 , 0.5 , 0.5, // 0
         0.5 , 0.5 , 0.5, // 1
        -0.5 ,-0.5 , 0.5, // 2
         0.5 ,-0.5 , 0.5, // 3

        -0.5 , 0.5 , -0.5, // 4
         0.5 , 0.5 , -0.5, // 5
        -0.5 ,-0.5 , -0.5, // 6
         0.5 ,-0.5 , -0.5 // 7
    ],
    "normals" : [
        0.57    , 0.57      , -0.57 ,
        0.57    , -0.57     , -0.57 ,
        -0.57   , -0.57     , -0.57 ,
        -0.57   , 0.57      , -0.57 ,
        0.57    , 0.57      , 0.57 ,
        0.57    , -0.57     , 0.57 ,
        -0.57   , -0.57     , 0.57 ,
        -0.57   , 0.57      , 0.57 
    ],
    "indices" : [
        0 , 2 , 3 ,
        0 , 3 , 1 ,

        0 , 4 , 5 ,
        0 , 5 , 1 ,

        0 , 4 , 6 ,
        0 , 6 , 2 ,

        2 , 6 , 7 ,
        2 , 7 , 3 ,

        1 , 5 , 7 ,
        1 , 7 , 3 ,

        4 , 6 , 7 ,
        4 , 7 , 5 
    ]
}

我的问题是:

是否可以为8顶点立方体创建正确的法线? 如果没有,有什么替代方案?