How to smooth mesh triangles in STL loaded by BufferGeometry

Question

I am trying to download some STL files using Three.js. Models loaded correctly, but there are too many triangles that I would like to merge / smooth.

I have successfully applied smooth loading areas in other three-dimensional formats, but I cannot do this with the BufferGeometry that occurs when loading an STL file using STLLoader.

_

var material = new THREE.MeshLambertMaterial( { ... } ); var path = "./models/budah.stl"; var loader = new THREE.STLLoader(); loader.load( path, function ( object ) { object.computeBoundingBox(); object.computeBoundingSphere(); object.computeFaceNormals(); object.computeVertexNormals(); object.normalizeNormals(); object.center(); // Apply smooth var modifier = new THREE.SubdivisionModifier( 1); var smooth = smooth = object.clone(); smooth.mergeVertices(); smooth.computeFaceNormals(); smooth.computeVertexNormals(); modifier.modify( smooth ); scene.add( smooth ); }); 

This is what I tried, it throws an error: Dig TypeError: smooth.mergeVertices is not a function

If I comment out the line "mergeVertices ()", I get another error: Uncaught TypeError: cannot read the length of the undefined property in SubdivisionsModifier, line 156.

It looks like code examples I'm trying to deprecate (this has been happening a lot recently due to huge changes in the Three.JS library). Or maybe I'm forgetting something. The fact is that the vertices seem to be zero.?

Thanks in advance!

Answer 1

It seems I was looking for the wrong direction: smoothing triangles had nothing to do with SubdivisionsModifier ... What I needed was simpler, just calculate the vertex before applying the material so that it could use SmoothShading instead of FlatShading (did I succeed? )

The problem was that the BufferGeometry returned by STLLoader did not calculate the vertices / vertices, so I had to do it manually. After that, apply mergeVertices () immediately before computeVertexNormals () and voilà! Triangles disappear and everything is smooth:

 var material = new THREE.MeshLambertMaterial( { ... } ); var path = "./models/budah.stl"; var loader = new THREE.STLLoader(); loader.load( path, function ( object ) { object.computeBoundingBox(); object.computeVertexNormals(); object.center(); /////////////////////////////////////////////////////////////// var attrib = object.getAttribute('position'); if(attrib === undefined) { throw new Error('a given BufferGeometry object must have a position attribute.'); } var positions = attrib.array; var vertices = []; for(var i = 0, n = positions.length; i < n; i += 3) { var x = positions[i]; var y = positions[i + 1]; var z = positions[i + 2]; vertices.push(new THREE.Vector3(x, y, z)); } var faces = []; for(var i = 0, n = vertices.length; i < n; i += 3) { faces.push(new THREE.Face3(i, i + 1, i + 2)); } var geometry = new THREE.Geometry(); geometry.vertices = vertices; geometry.faces = faces; geometry.computeFaceNormals(); geometry.mergeVertices() geometry.computeVertexNormals(); /////////////////////////////////////////////////////////////// var mesh = new THREE.Mesh(geometry, material); scene.add( mesh ); }); 

Answer 2

Than you can convert it back to BufferGeometry because it is more GPU / CPU efficient for more complex models:

 var geometry = new THREE.Geometry(); geometry.vertices = vertices; geometry.faces = faces; geometry.computeFaceNormals(); geometry.mergeVertices(); geometry.computeVertexNormals(); var buffer_g = new THREE.BufferGeometry(); buffer_g.fromGeometry(geometry); var mesh = new THREE.Mesh(buffer_g, material); scene.add( mesh ) 

Answer 3

This happened to me when loading the obj file. If you have 3D software like 3dsmax:

• Open the obj file,
  
• Go to the polygon selection mode and select all polygons.
  
• In the surface properties panel, click the Auto Smooth button.
  
• Export model back to obj format
  

Now you will not need to call the geometry.mergeVertices () and geometry.computeVertexNormals (); functions. Just load obj and add to the scene, the grid will be smooth.

EDIT: My obj files had meshphongmaterial by default and when changing the shading property to a value of 2 the mesh became smooth.

 child.material.shading = 2