How can I smooth my polygons in a Three.js scene?

Question

I've this model here in Three.js:

Unsmoothed part of the model

I used a plug-in from the Unity asset store, to export the model into a JSON file, then imported in my three.js application. The problem is that the plugin doesn't export the smoothing groups, so the quality of the model doesn't look so good.

Is there any way to smooth everything with three.js?

Answer 1

You can use the THREE.SubdivisionModifier and use it like this:

var modifier = new THREE.SubdivisionModifier(divisions);

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

Actually it's not included in Three.js build, so you have to import it. You can get it here

UPDATE 1 Basically you JSON file gets loaded as an Object3d, which is like a container. It's structured like this:

• Object3D
• children (arrays containing your meshes (the number can change based on the model in your scene))
  • Mesh (containing data about your geometry, which is what you need to modify).

So in order to modify the "geometry" you need to access it like so:

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

You'll need to apply a modifier to every model in your scene, so:

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

depending on the number of models you have. It's like you have to open a container and inside you find a smaller container, then another one and so on, until you access geometry data. Hope it is clear enough :)