如何在 STL 加载的 BufferGeometry 中平滑网格三角形 [英] How to smooth mesh triangles in STL loaded BufferGeometry

问题描述

我正在尝试使用 Three.js 加载一些 STL 文件.模型已正确加载，但我想要合并/平滑的三角形太多.

I´m trying to load some STL files using Three.js. The models are loaded correctly, but there are too many triangles that I would like to merge/smooth.

我已经成功地应用了其他 3D 格式的平滑加载地形，但是我无法使用通过 STLLoader 加载 STL 文件产生的 BufferGeometry 来实现.

I had successfully applied smooth loading terrains in other 3D formats, but I can´t do it with the BufferGeometry that results from loading an STL file with the 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 );
});

这是我试过的，它抛出一个错误:Uncaught TypeError: smooth.mergeVertices is not a function

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

如果我评论mergeVertices()"行，我得到的是一个不同的错误:Uncaught TypeError: Cannot read property 'length' of undefined in SubdivisionsModifier, line 156.

If I comment the "mergeVertices()" line, what I get is a different error: Uncaught TypeError: Cannot read property 'length' of undefined in SubdivisionsModifier, line 156.

我正在尝试的示例代码似乎已经过时(由于 Three.JS 库中的大量更改，最近经常发生这种情况).或者也许我忘记了什么.事实是顶点似乎为空..?

It seems that the sample codes I´m trying are outdated (this is happenning a lot recently due to the massive changes in the Three.JS library). Or maybe I´m forgetting something. The fact is that the vertices seems to be null..?

提前致谢！

推荐答案

看来我看错了方向:平滑三角形与 SubdivisionsModifier 无关...我需要的比这更容易，只需计算应用材料之前的顶点，因此它可以使用 SmoothShading 而不是 FlatShading(我做对了吗?).

It seems I was looking in the wrong direction: smoothing the triangles has nothing to do with the SubdivisionsModifier... What I needed was easier than that, just compute the vertex BEFORE applying the material, so it can use SmoothShading instead of FlatShading (did I got it right?).

这里的问题是 STLLoader 返回的 BufferGeometry 没有计算顶点/顶点，所以我不得不手动完成.之后，在computeVertexNormals() 和voilà 之前应用mergeVertices()！三角形消失，一切顺利:

The problem here was that the BufferGeometry returned by the STLLoader has not calculated vertices/vertex, so I had to do it manually. After that, apply mergeVertices() just before computeVertexNormals() and voilà! The triangles dissappear 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 );
});

这篇关于如何在 STL 加载的 BufferGeometry 中平滑网格三角形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！