Question

我使用ThreeJS r68。

我总是将THREE.Geometry用于我的项目，它运行正常。现在我想从THREE.Geometry更改为THREE.BufferGeometry，因为我读到这是更好的选择。但我无法让SmoothShading与THREE.BufferGeometry一起使用。

我将Object加载到BufferGeometry中并调用bufferGeometry.computerVertexNormals。然后我的结果是FlatShading。

我在computeVertexNormals()方法中读到，如果我使用“index”属性，BufferGeometry的计算方式会有所不同。我试图创建一个“索引”的BufferGeometry，但这让一切变得更糟。我不知道我是否只是创造了那个权利。我刚刚添加了索引，就像我将它们添加到普通几何中的面部一样。 BufferGeometry.fromGeometry()方法不会创建索引的BufferGeometry，因此我不知道在哪里查看。

我是否需要为SmoothShading建立索引的BufferGeometry？

更新

[......过了一段时间......]

我想我现在可以创建一个索引THREE.BufferGeometry。它更像是几何。使用索引的BufferGeometry，平滑着色看起来很好。所以现在我有SmoothShading但是无效的uv-map。但是为什么在索引的BufferGeometry中uv-map与未编入索引的BufferGeometry相比有何不同？ BufferGeometry真的不容易加载。

Answer 1

行。

这是我得到的：

1。）SmoothShading仅适用于索引THREE.BufferGeometry。（据我所知）而不是非索引的BufferGeometry。

2。）索引THREE.BufferGeometry每个顶点只有1 uv点，而不是每个面顶点1 uv点。
这意味着如果你有一个4分的正方形，那么你只有4个uv分而不是像THREE.Geometry和非索引THREE.BufferGeometry那样的6个。（这很令人困惑，不会允许复杂的uv-map）

更新

[......之后几个小时的睡眠......]

我再次调查THREE.BufferGeometry.computerVertexNormals()。我必须纠正自己。

已编入索引THREE.BufferGeometry：

1）每个顶点只有1 uv
2）每个顶点只有1个法线
结果：
   - 只有smoothShading可能。
   - 只有简单的紫外线地图。
   - 限制65.535个顶点。

非索引THREE.BufferGeometry：

1）每个面顶点1 uv 2）每个面顶点1个法线
结果：
   - 计算ThreeJS中的法线（r68）：仅FlatShading
   - 计算ThreeJS之外的法线并导入法线：FlatShading和SmoothShading
   - 复杂的uv地图可能

Answer 2

您可以将THREE.FlatShading应用于素材，以获得平面着色的THREE.BufferGeometry。在这种情况下，您根本不需要定义任何法线。

这可以为您节省很多麻烦和开销：

geometry = new THREE.BufferGeometry

material = new THREE.MeshPhongMaterial({ 
    color: 0xff0000, 
    shading: THREE.FlatShading
});

mesh = new THREE.Mesh( geometry, material );

您的网格将呈现平面阴影。这对THREE.MeshLambertMaterial还不起作用。但他们正在努力。检查相关问题here on GitHUB。

BufferGeometry始终创建FlatShading法线。我需要SmoothShading

更新

2 个答案:

更新