八顶点立方体的法向量

Question

我正在使用 WEBGL，今天遇到了我的立方体顶点法线的问题。

我用互联网上的立方体网格检查了我的代码，效果很好。

问题是，来自互联网的立方体有 24 个顶点（每个面 4 个顶点 * 6 个面），我认为这对于我的立方体来说太多了。

摆弄我的立方体| 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 个顶点的立方体创建正确的法线吗？如果没有，还有哪些替代方案？

Answer 1

您需要了解，它vertex不仅仅是空间中的一个点，而是一组连接到一个对象的不同属性。这些属性包括位置，但也可能有法线、颜色、纹理坐标等。

在 3D 图形中，您通常需要将两个或多个顶点放置在同一位置，但具有不同的法线、颜色或纹理坐标。你的立方体就是这种情况 - 立方体一般只有 8 个角，但所有这些角都连接 3 个边，并且每条边都有不同的法线，所以这就是为什么你看到的所有示例立方体都有 24 个顶点的原因。

事实上，你的立方体与球体非常相似，具有非常简单的几何形状，球体上的每个顶点只有一个法线，并且顶点周围的光照是平滑的。在立方体中，您需要将每一面都着色为平面，因此构建该面的所有顶点都需要相同的法线。

如果您将立方体视为 6 个不同的四边形并使用单独的顶点创建所有这些四边形，则可能更容易理解。