八个顶点立方体的法线向量

问题描述

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

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

问题在于，来自互联网的多维数据集具有24个顶点（每个面4个* 6个面），这对我认为是多维数据集的方式来说很重要。

| （我的代码在第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 
]，
法线：[
 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.5 7，0.57，
 0.57，-0.57，0.57，
 -0.57，-0.57，0.57，
 -0.57，0.57，0.57 
]，
索引 ：[[
 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个顶点立方体创建正确的法线吗？
如果不是，有什么选择？

解决方案

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

在3D图形中，您通常需要在同一位置放置两个或多个顶点，但具有不同的法线，颜色或纹理坐标。这就是您的多维数据集的情况-多维数据集通常只有8个角，但是所有这些角都连接3个边，并且每侧都有不同的法线，因此这就是您看到的所有示例多维数据集都有24个顶点的原因。 / p>

实际上，您的立方体与球体非常相似，具有非常简单的几何形状，从而使球体上的每个顶点只有一个法线，并且照明在顶点。在立方体中，您需要将每个侧面都阴影化为平坦的表面，因此构建该侧面的所有顶点都需要相同的法线。

如果您看起来像，可能更容易理解在立方体上作为6个不同的四边形，并使用单独的顶点创建所有这些四边形。

I was playing around with WEBGL and today and a encountered a problem with my cube's vertex normals .

I checked my code with a cube mesh from internet and it works great.

The thing is that the cube from internet has 24 vertices (4 for each face * 6 faces) which is way to much for I cube I think.

FIDDLE MY CUBE | FIDDLE INTERNET CUBE (my code stars at line 200)

I figured out that a cube needs no more than 8 vertices and 12 indices.But when I render my cube I get a weird shape on screen like this(because of the normals?):

This is the cube form internet in almost the same rotation position as my cube:

This is my cube:

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
    ]
}

My question is :

It is possible to create correct normals for a 8 vertex cube?If not, what are the alternatives?

解决方案

You need to understand, that the vertex is not just a point in the space, it's rather a set of distinct properties, connected into one object. Those properties include position, but may also have normal, color, texture coordinates, etc.

In 3D graphics you'll often need two or more vertices placed in the same location, but with different normals, colors or texture coords. And this is the case with your cube - the cube in general has just 8 corners, but all of those corners connects 3 sides and every side has different normal, so it's the reason why all example cubes you've seen had 24 vertices.

In fact your cube is very similar to a sphere, with very simple geometry, in a way that every vertex on the sphere has just one normal and the lighting is smooth around the vertex. In the cube you need to shade every side as a flat surface, so all vertices that build that side needs the same normal.

It may be simpler to understand if you look at the cube as a 6 distinct quads and create all those quads with separate vertices.

这篇关于八个顶点立方体的法线向量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！