0

I use ThreeJS r68.

I always used THREE.Geometry for my project and it just works fine. Now I want to change from THREE.Geometry to THREE.BufferGeometry because I read that this is the better choice. But I couldn't get SmoothShading to work with my THREE.BufferGeometry.

I load my Object into a BufferGeometry and call bufferGeometry.computerVertexNormals. And then my result is FlatShading.

I read in the computeVertexNormals() method that BufferGeometry calculates differently if I use an "index" attribute. I tried to create an "Indexed" BufferGeometry but that just made everything worse. I don't know if I just created that right. I just added the indices like I would add them to the faces in a normal Geometry. The BufferGeometry.fromGeometry() method does not create an indexed BufferGeometry so I don't know where to look.

Do I need an indexed BufferGeometry for SmoothShading?

UPDATE

[... some time later....]

I think I could create a indexed THREE.BufferGeometry now. It's more like Geometry. And smooth shading looks fine with an indexed BufferGeometry. So now i have SmoothShading but a invalid uv-map. But why is the uv-map different in an indexed BufferGeometry to compared to not indexed BufferGeometry? BufferGeometry is really not easily loaded.

4

2 回答 2

1

好的。

这是我得到的：

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

2.) 索引THREE.BufferGeometry每个顶点只有 1 个 uv 点，而不是每个面顶点有 1 个 uv 点。
这意味着如果你有一个有 4 个点的正方形，那么你只有 4 个 uv 点，而不是 6 个像 inTHREE.Geometry和 non indexed THREE.BufferGeometry。（这很令人困惑，并且不允许使用复杂的 uv-maps）

更新

[……睡了几个小时……]

我又看了THREE.BufferGeometry.computerVertexNormals()一遍。我必须纠正自己。

索引THREE.BufferGeometry：

1）每个顶点只有 1 个 uv
2）每个顶点只有 1 个法线
结果：
- 只能进行平滑阴影。
- 只有简单的 uv 贴图。
- 65.535 个顶点的限制。

非索引THREE.BufferGeometry：

1) 每个面顶点 1 个 uv
2) 每个面顶点 1 个法线
结果：
- 在 ThreeJS(r68) 中计算法线：仅 FlatShading
- 在 ThreeJS 之外计算法线并导入法线：FlatShading 和 SmoothShading
- 可以使用复杂的 uv 贴图

于 2014-09-16T18:30:38.873 回答
1

您可以应用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还不行。但他们正在努力。在 GitHub 上查看相关问题。

于 2016-02-04T14:35:56.590 回答