javascript - 八顶点立方体的法向量

Question

我在玩 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 顶点立方体创建正确的法线吗？如果不能，有哪些替代方案？

Answer 1

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

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

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

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