如何在Three.js場景中平滑多邊形？

Question

我在Three.js中有這個模型：

模型不平滑的部分

我使用來自Unity資產商店的插件將模型導出到JSON文件中，然后導入到我的three.js應用程序中。 問題在於該插件不會導出平滑組，因此模型的質量看起來不太好。

有什么方法可以使three.js變得更平滑？

Answer 1

您可以使用THREE.SubdivisionModifier並像這樣使用它：

var modifier = new THREE.SubdivisionModifier(divisions);

// Apply the modifier to your geometry NOT MESH.
modifier.modify( geometry );

實際上，它不包含在Three.js構建中，因此您必須導入它。 你可以在這里得到

UPDATE 1基本上，您將JSON文件作為Object3d加載，就像一個容器。 它的結構如下：

• 對象3D
• 子對象（包含您的網格物體的數組（數量可以根據場景中的模型而變化））
  • 網格（包含有關幾何的數據，您需要對其進行修改）。

因此，為了修改“幾何”，您需要像這樣訪問它：

modifier.modify( mesh.children[0].children[0].geometry );

您需要將修改器應用於場景中的每個模型，因此：

modifier.modify( mesh.children[0].children[0].geometry );
modifier.modify( mesh.children[0].children[1].geometry );
modifier.modify( mesh.children[0].children[2].geometry );

取決於您擁有的型號。 就像您必須打開一個容器，然后在內部找到一個較小的容器，然后再找到另一個容器，依此類推，直到訪問幾何數據為止。 希望它足夠清楚:)